Lakes The Guy

lakestheguy.neocities.org

234,814 views
309 followers
3,591 updates
0 tips
does anyone know how to apply a theme switcher just to a specific div class? i'm trying and all my attempts are failing
draggianuniverse's avatar draggianuniverse 1 year ago

I use raw Javascript changing CSS for my dark / light mode -- you should be able to do Javascript that affects a specific div ID, so if you turn your class into an ID maybe that would work? Here's a paste of what I have for my very bare bones dark / light mode JS. (disclaimer, I know very little abt JS.)

1 like
1 like
lakestheguy's avatar lakestheguy 1 year ago

apparently i can't change the div class into an id without screwing up how the windows 7 style windows look? maybe i can put a div id around it though?

draggianuniverse's avatar draggianuniverse 1 year ago

Huh, as far as I know div classes and IDs aren't really mechanically different? You should be able to just change the CSS from .whatever to #whatever, but I'm not sure what is specifically under the hood on your end. You should be able to do an internal div ID you can apply dark mode to even if the outside window is a class?

1 like
lakestheguy's avatar lakestheguy 1 year ago

thanks again. i'll do it tomorrow. rn i gotta sleep

chattable's avatar chattable 1 year ago

Sounds like you're encountering CSS specificity issues. This is pretty common. By specificity, elements styled with their IDs will be considered more important than rules written under their class.

1 like
chattable's avatar chattable 1 year ago

Using the theme wizard tool I suggested the other day can resolve this. Remove your CSS stylesheet from your HTML document and use it as the default theme using theme Wizard.

1 like
chattable's avatar chattable 1 year ago

Then you can copy that CSS file and modify it to however you want your next theme to render. Theme Wizard will remove the default theme before applying a custom theme if the default was set using Theme Wizard.

1 like
chattable's avatar chattable 1 year ago

Otherwise, if you just want to overwrite existing CSS code, using the !important keyword in CSS will set that rule to have the highest specificity.

1 like

Website Stats

Last updated 3 weeks ago
CreatedJan 12, 2025
Site Traffic Stats

Tags

2000s personal skeuomorphism blogs art