Discussion on: Have you ever contributed to DEV?

[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 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;
}

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

View on GitHub

[Madza]

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

[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.