Way to set theme? - Githubissues

DokterKaj commented 1 month ago

I'd like to use the light theme since sometimes there are transparent images which are effectively invisible on the auto dark theme background. I can see the <html> element has a data-theme attribute which can be set to light, but is there any way to set it persistently? Apparently there used to be a toggle but it was removed (#140) and I don't think Stylus can modify HTML attributes.

httpjamesm commented 1 month ago

Can you show examples? what if the image was preprocessed on the server, like by changing the transparent background to white if it's too dark?

Alternatively, you can make a simple JavaScript bookmark let to run code to change that value.

DokterKaj commented 1 month ago

Can you show examples?

Here's one: https://anonymousoverflow.catsarch.com/exchange/tex/questions/119839/pgfplots-axis-with-arrow-tips-at-the-end#119844

what if the image was preprocessed on the server, like by changing the transparent background to white if it's too dark?

This could be a viable solution. Alternatively, there could be CSS that adds a white shadow or stroke around all images only in dark mode?

Alternatively, you can make a simple JavaScript bookmark let to run code to change that value.

I see, I'll look into it.

Bluey26 commented 3 weeks ago

Hi, i usually tinker with userscripts and found this issue by chance.

I have found 2 solutions, based in what you described in your issue, both involving the use of a userscript.

The first solution consist on change the current theme from auto to light, and make it persistent (even if the browser is using dark scheme). For this, the following code seems to work:

// ==UserScript==
// @name testing csschangeANon
// @match            https://anonymousoverflow.catsarch.com/*
// @version          1.0
// @run-at         document-start
// ==/UserScript==

document.getElementsByTagName('html')[0].setAttribute("data-theme" ,'light');

This will set the theme into light, as if you change the value in the html source by hand.

The other approach is to set the images background to a solid color, so in case the image has no background(transparent), there will be a custom background for it. Keep in mind that this does not affect images that already have a background (for example, the first picture shown in the example URL given):

// ==UserScript==
// @name testing csschangeANon
// @match            https://anonymousoverflow.catsarch.com/*
// @version          1.0
// @run-at         document-start
// ==/UserScript==

const imgcolor =
      `img {
  background-color: #fff !important;
}`;

GM.addStyle(imgcolor);

The color is set to #fff (white) but you can use another color, both in hex or by common name (i.e. pink just works).

This userscripts should be added to an userscript manager like greasemonkey,tampermonkey,firemonkey,etc.

Both scripts were tested in firefox+firemonkey, and they worked.

Some info about GM.addStyle: https://sourceforge.net/p/greasemonkey/wiki/GM_addStyle/ , a good page to learn about userscripts: https://wiki.greasespot.net

Since i am commenting, i want to thank for this awesome front end, its really cool, removes all the distractions and you go directly to what you are looking for :)

DokterKaj commented 3 weeks ago

With the second solution, since it's just CSS, I think it would be easier to just use Stylus with the following rule:

p img {
    background-color: #fff;
}

We need p img since using only img would also affect some icons.

httpjamesm / AnonymousOverflow

Way to set theme? #160