DEV Community

Discussion on: Previewing dev.to's Upcoming Night Mode

Collapse
 
link2twenty profile image
Andrew Bone • Edited

I've started a couple of pull requests to move styles over to CSS variables so a custom theme can be imported per user (if they wanted to go that far).

So far I've only added --theme-background and --theme-top-bar-background, appending this CSS to the end of the current CSS will simulate the affect, though who knows my pull request might have been merged by now.

.stories-show {
    background:var(--theme-background);
}

.org-publish-check-wrapper {
    background:var(--theme-background);
}

.chat_chatconfig {
    background:var(--theme-background);
}

code {
    background:var(--theme-background);
}

body {
    background:var(--theme-background);
}

.top-bar {
    background: var(--theme-top-bar-background);
}

Then you can change the values of the variables by adding them to :root

:root {
    --theme-background: #303030;
    --theme-top-bar-background: #1c1c1c;
}

Working out which styles to group together under one name is the hard part but if we get this out there theming the whole site will suddenly be very easy.

Collapse
 
somedood profile image
Basti Ortiz • Edited

This is great! For one, it does not cause any issues with the server-side caching (as mentioned by Ben here) because the variables are computed client-side. The use of custom properties is also much more maintainable, which is good. 👍

The only problem we face with using CSS Custom Properties is the fact that not all browsers fully support it. As of writing this comment, Can I Use estimates that only 87.6% of global users support this feature. Frankly, it's good enough in my opinion, but I think the dev.to team wants to support as much browsers as possible.

Collapse
 
link2twenty profile image
Andrew Bone

I do agree with keeping it working for as many people as possible but that being said 87% is pretty much everyone and I imagine people that use this site are more likely to have more modern browsers.

@ben anything to add?