Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Way to set theme? #160

Open
DokterKaj opened this issue Oct 13, 2024 · 4 comments
Open

Way to set theme? #160

DokterKaj opened this issue Oct 13, 2024 · 4 comments

Comments

@DokterKaj
Copy link

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
Copy link
Owner

httpjamesm commented Oct 13, 2024 •
edited
Loading

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
Copy link
Author

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
Copy link

Bluey26 commented Nov 4, 2024 •
edited
Loading

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@httpjamesm @DokterKaj @Bluey26