DEV Community

Have you ever contributed to DEV?

Madza on November 06, 2020

Have you ever contributed some PRs to DEV's codebase or technical docs? If so, what's something you have been most proud of? Still on the way to m...

Read full post

Andrew Bone • Nov 6 '20

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 • Nov 6 '20

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

Ben Halpern • Nov 6 '20

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.

Emma Goto 🍙 • Nov 6 '20

Yes! I've made a couple of contributions. My favourite is something I added in DEV's notification settings - "Send notifications when someone reacts to my comments or posts".

Madza • Nov 6 '20

So awesome to see you guys contributing 👍 Must be an awesome feeling to use the service knowing some features in it is just cause of you ❤

Thomas Bnt • Nov 6 '20

Yeah I've modified the badges page and created some good issues 🙂

Madza • Nov 6 '20

This is awesome! 👌 You guys are making it better one step at a time 🙏❤

Rafi • Nov 7 '20 • Edited

Like every other Javascript developer I have been doing only Javascript for a while so I decided to learn Ruby on rails for a change. I tried to learn through tutorials but it was too much time consuming and also there was a gap compared to real world code. So I decided to learn both ruby and rails by diving into some codebase. So I started contributing to Dev. After 37 merged Pr's so far and going through code other people have written I have gotten quite comfortable with rails and learned lot about other things like web accessibility, testing... thanks to the awesome folks at dev.to.

Madza • Nov 9 '20

Thanks for the awesome you, for contributing 🙏❤

Andrew Bone • Nov 9 '20

Thank you 😊

Jacob Herrington (he/him) • Nov 6 '20

Yeah. :)

powerfuldruid • Nov 6 '20

Hey Madza, I've been seeing a lot of your posts recently, and tbh it looks like most of your posts are intended to be discussions. Could you please add the #discuss tag to your posts if so?

Madza • Nov 6 '20

I usually categorize them between the topic of the discussion 😉 Some of the common ones I use include #discuss, #watercooler and #meta 😉

Rafi • Nov 9 '20

Thank you @citizen428

Madza • Nov 9 '20

All the great things happen one step at a time! 😉
Thanks a lot for the contribution 🙏❤