Dark theme obscures logo


(Walter Lapchynski) #1

On the main website, it seems our logo includes a white hummingbird head and “Qt:”

LXQt logo from main website

However, here it seems we’re using grey instead:

which would be fine if the Dark Theme didn’t mess it up.

I see two options:

  1. Change the logo based on the theme chosen. Not sure Discourse supports this.
  2. Use the white one, draw a box around it and give it a grey background (as opposed to alpha) as we do on the main page.

(Michael Tunnell) #2

It appears the dark theme is applied via Javascript rather than via CSS.

Possible Solutions:

  • Use Javascript to remove the original logo image and replacing a dark friendly image.
  • Use Javascript to inject a class into the HTML of the logo anchor, replace the img element with a span element and use CSS to load the image based on whether the class is there or not.
  • Use the same logo but add a white glow (or drop shadow) which will make it visible in dark mode and the effect will blend in on the light theme.
  • or wxl’s previously mentioned solution

(Walter Lapchynski) #3

The white glow/drop shadow is a more attractive alternative to my box-with-a-background suggestion, IMHO. Both should be the easiest to implement, too.


(Alf Gaida) #4

The best solution would be to use svg instead of png - different css for the themes should be easy. As i wrote sometimes- this forum need a bit of polishing.

Edit: Bare with me, but i should first pack the Release for debian :stuck_out_tongue:


(Pedram Pourang) #5

It’s in PNG instead of SVG? Unforgivable! SVG is the best solution everywhere :wink:


(Alf Gaida) #6

and even worse - not hosted by us - so it’s fetched eveytime it is needed from the github account of the original creator - yes, we should change it as soon as possible :sunglasses:


(Alf Gaida) #7

@tsujan - i would agree, but only if you provide a solution to inline the svg files :stuck_out_tongue:

i told it @wxl before - it’s basically the same crap as with our svg-based themes and activate hightlight/alternative colors the right way in svg


(Pedram Pourang) #8

@agaida I realized that it might make no difference after writing that comment :wink:


(Alf Gaida) #9

it make a difference - thats why i asked for - and there are some sample scripts in the world wide waste - to make it short - one must inline any used svg, that would be a ten-liner js script. After doing so one can change the behaviour (colors etc) inside the svg file - and thats really cool because it works fine and out of the box with every browser that is capable to display svg.

try to open https://forum.lxqt.org/images/lxqt-name.svg in a new window and inspect the things - you will be surprised, hint - there are the IDs left and right if i remember correctly. :smiley:


(Pedram Pourang) #10

My favorite work (Kvantum) is all about SVG :wink: Yes, SVG is very flexible but my experience with it is limited to C++ and Qt.


(Pedram Pourang) #11

An example: https://stackoverflow.com/questions/22252472/change-svg-color


(Alf Gaida) #12

right - but i need something dynamic - i can’t work in discourse with svg directly - so the jQuery or so should dynamically find any img tag and convert the svg to an inlined svg - if that is done i could work with #id fill: in the templates

EDIT: Nice to have - but not top priority right now


(Alf Gaida) #13

Gray is the new black or white :stuck_out_tongue: