Discussion on: Firefox Add-on to Turn On Dev.to's Night Mode 🔥🔥

[Andrew Bone]

I've been playing with CSS variables to theme the site.

Currently, there are 2 live --theme-background and --theme-top-bar-background but I have a few more waiting to be pulled.

If the awaiting styles get accepted you'd be able to do something like this.

:root {
  --theme-background: antiquewhite;
  --theme-top-bar-background: cadetblue;
  --theme-top-bar-color: darkslategray;
  --theme-top-bar-search-background: darkslategray;
  --theme-top-bar-search-color: gainsboro;
}

A browser extension that let you pick colours for these variables and then remembered them each time you came to the site would be awesome! 😀

If you did want to look at the rollout or even help with it here's the place to look.

[WIP] Theme-able CSS Variables #1377

Link2Twenty commented 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-top-bar-background	Background color of the top bar	#fdf9f3

Pull request pending:

Variable	Description	Default
--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

Proposed:

Variable	Description	Default
--theme-color	Text color for the main body	#0a0a0a
--theme-container-background	Background color of the articles and nav-elements	#ffffff
--theme-container-color	Text color for the articles and nav-elements	#0a0a0a

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

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

View on GitHub

[Basti Ortiz]

The possibilities are endless with this one!