DEV Community

Discussion on: Have you ever contributed to DEV?

View post
Collapse
 
link2twenty profile image
Andrew Bone •

I've submitted a few (43 but who's counting 😉) but I'd say the one/set I'm most proud of was moving Dev/Forem over to CSS variables so we could implement an actual dark/night mode. This was later expanded and is now how all Dev/Forem themes work 😁

[WIP] Theme-able CSS Variables #1377

Link2Twenty avatar
Link2Twenty posted on Dec 20, 2018

I thought we ought to have a place where we keep a note of the current CSS Variables and also propose different variables that should be included.

Currently included:

Variable Description Default
--theme-background Background color of the main body #f9f9fa
--theme-color Text color for the main body #0a0a0a
--theme-secondary-color Secondary text color for the main body #557de8
--theme-top-bar-background Background color of the top bar #fdf9f3
--theme-top-bar-color Text and icon color for the top bar #0a0a0a
--theme-top-bar-search-background Background color of the search box in the top bar #e8e7e7
--theme-top-bar-search-color Text color for the search box, and its placeholder, in the top bar #0a0a0a
--theme-top-bar-write-background Background color of the write button in the top bar #66e2d5
--theme-top-bar-write-color Text and border color for the write button in the top bar #0a0a0a
--theme-container-box-shadow Box shadow settings for articles and nav-elements 3px 3px 0px #bababa
--theme-container-border border settings for articles and nav-elements 1px solid #d6d6d6
--theme-container-background Background color of the articles and nav-elements #ffffff
--theme-container-background-hover Hover background for nav-elements #f5f6f7
--theme-container-color Text color for the articles and nav-elements #0a0a0a

Pull request pending:

Variable Description Default

Proposed:

Variable Description Default

I think the best thing to do is leave a comment below of further proposals and I will update the main post.

Test theme:

Dark:

:root {
    --theme-background: #161f2b;
    --theme-color: #fff;
    --theme-secondary-color: #cedae2;
    --theme-top-bar-background: #141d26;
    --theme-top-bar-color: #fff;
    --theme-top-bar-search-background: #424a54;
    --theme-top-bar-search-color: #fff;
    --theme-top-bar-write-background: #00af81;
    --theme-top-bar-write-color: #fff;
    --theme-container-background: #27374c;
    --theme-container-background-hover: #37475c;
    --theme-container-color: #fff;
    --theme-container-box-shadow: none;
    --theme-container-border: 1px solid #141d26;
}
Enter fullscreen mode Exit fullscreen mode

Also, feel free to do pull requests to help roll these out.

View on GitHub
Collapse
 
madza profile image
Madza •

That's massive, man 💯 Feature it's hard to imagine the platform without 🎨 Thank you for your input 🙏❤

Collapse
 
ben profile image
Ben Halpern •

It's also how further Forem configuration works, like custom brand colors— and is an approach I anticipate we'll continue to build on to great success.

People wanted dark mode for a while, but we needed the right technical approach and Andrew came in big with this contributing leadership in the matter.