Can anyone help me solve this https://stackoverflow.com/q/...
I am stuck on this thing and did not receive any answers yet

WHAT THE FUCK! You asked that question TWO FUCKING HOURS ago, you have already comments, and then you abuse devRant as SO spam?!

Just do what g-cyrillus said 2 hours ago ☹️

@highlight what's he got to do?

@C0D4 Apart from that, I think the whole question with "style applied before" is somewhat at odds with how a declarative language like CSS is intended to work.

@Fast-Nop it is, but swapping out the body's css tag is the solution to his problem, or part of, doing it before load would need pre-render checking with a cookie or something to do tact what to initially render with.

Small text / large / light / dark and what not could be achieved using that as a basis.

Sadly, when you want multi theme, you have to "break" things.

Or you could experiment with the prefers-color-scheme media types.

@C0D4 The latter is what I'm doing. It's the browser's job to decide which colour scheme to use because it sucks when you have to set that for every website over and over again. Especially when you clean cookies upon exiting the browser, for privacy reasons.

@Fast-Nop 😅but since when do webdevs do the right thing.

I was able to solve it by writing my own function that applies css so now I can check if the style is already applied from a particular category I can just replace it with the new one, else if it is not already applied I append the style, since its all javascript now.
Thanks guys I am a little new to Javascript and I was very keen to find out some solution, won't spam like this again :)

@ishank-dev O-M-G. Riddled with !important and every element separately in JS. You really need to read up on how CSS even works.

That code would be good raw material for the next dev taking it over and make a rant here about shitty code.

@Fast-Nop I resort to my last comment.

@ishank-dev that's not what I had in mine... but yea... I mean sure it works...😦

A simple onclick and add/remove theme name from body would have suffice based on my comment earlier.

! important force applies a new theme, and the attributes I am changing aren't present in the main stylesheet, so I don't think this should be a problem.
This css is separate from the main css file.

@ishank-dev !important is the goto of CSS, and about the ONLY justified use of that is if you need to apply styles from CSS e.g. when the media breakpoints change due to windows resizing, and you have set the attributes from JS before.

You just don't do it like your solution with a JS selector. You apply an overall class and have the styles in the CSS like @C0D4 said.

@ishank-dev I'll create an example of what I was talking about.

Based on this my assumption is you don't know css well?

@Fast-Nop Yes, earlier I couldn't figure out what he meant, his way is surely much easier.
Will try today
Thanks again :)

The project is about making an epub reader and allowing people with dyslexia read the books in the a special font that they understand.
if someone is interested feel free to give a PR here
https://github.com/ishank-dev/...

@ishank-dev You'll also notice that it has better performance because the browser can do CSS things in parallel while JS goes in the main thread and blocks.

The general approach should be to do as little as you can in JS and shift over as much as possible to CSS. That's not only for re-styling, but also e.g. for animations.

@ishank-dev Dyslexia? One really big help here is if you can disable fully justified paragraphs because dyslexic people get caught up in these "rivers of white".

@ishank-dev its a rough mockup to demonstrate what im talking about.

https://gist.github.com/C0D4-101/...

doesnt work in IE... but meh chrome, FF and Edge are fine.

@C0D4 Thanks a lott!
Its working like a charm, will mention the gist in acknowledgement section once the product is ready thanks a lot again :)