DEV Community

New Feature: Personal Configuration (sans serif fonts/night mode beta)

Ben Halpern on March 15, 2019

Update: Night mode is coming along nicely and looks awesome! It was not as far along when I first wrote this. We just shipped a new feature: Displ...
Collapse
 
ben profile image
Ben Halpern

@link2twenty if you want to make a PR to provide a better path towards our ideal state with themes, go for it. Or we can chat more in the issue. We may want to tweak this approach a bit but I wanted to get something out there as a tangible proof of concept and some momentum in this direction.

Collapse
 
link2twenty profile image
Andrew Bone

I'm about to be busy for a while, starting a new job (very exciting), but I think more discussion is needed. I don't know much about the backend so would need to hear from some people with some ideas on how to do it there. @rhymes maybe?

As for the front end simply having a style block at the top of the body with the correct style information would be enough.

<style>
    :root {
        --theme-background: #243447;
        --theme-color: #fff;
        --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: #c51f5d;
        --theme-top-bar-write-color: #fff;
        --theme-container-background: #324761;
        --theme-container-color: #fff;
        --theme-container-box-shadow: none;
        --theme-container-border: 1px solid #141d26;
    }
</style>

Provided that doesn't run into the caching issue.

Collapse
 
ben profile image
Ben Halpern

Putting that directly into the HTML wouldn't work per se, but along the lines of my initial implementation, this should work if done along the lines of how this has been implemented.

How this currently works:

  • User has stored config as attributes on the model's table
  • Config is served async and stored in localstorage, same as how we do other stuff like user profile
  • Inline script modifies html (render-blocking, but no network latency because inline).

Currently I quick-and-dirty did it via the body class. I should have waited but I was pretty excited to get something out and I was slightly confused about this part but have more clarity now. I'll modify this to use :root and explain how it's done.

I'll make a detailed DEV post once this is in place.

Thread Thread
 
ben profile image
Ben Halpern

And congrats on the new job Andrew!

Thread Thread
 
link2twenty profile image
Andrew Bone

Another question we need to ask is will users be able to set all the variables themselves or just have a few premade themes to choose from?

There are bits that won't look quite right with this implementation but if people raise issues saying, 'this bit looks off', it will be easy enough to track down the style and sort it.

Thank you, it's my first 'real' development job, better late than never 😀

Thread Thread
 
ben profile image
Ben Halpern

I think we can build towards letting folks set their own variables, but let's start by collectively working towards a shared concept of night mode and open things up once we've crossed that bridge.

Thread Thread
 
rhymes profile image
rhymes

A full fledged theme editor! DEV brings back Myspace 🤣

Thread Thread
 
link2twenty profile image
Andrew Bone • Edited

Is the dark theme somewhere on github, so I can edit it?

Oh, found it

github.com/thepracticaldev/dev.to/...

Collapse
 
andypiper profile image
Andy Piper

Works ok in the DEV iOS app, but needs the app itself to also then switch the status bar, nav bar and keyboard dark too :-)

Collapse
 
ben profile image
Ben Halpern

Yeah, we'll have to get that lining up. Will make it happen soon

Collapse
 
andypiper profile image
Andy Piper

👌🏻

Collapse
 
sergio profile image
deleteme deleteme • Edited

Night mode very much welcome! Although when I scroll too fast on a long post, I get a blinding screen of white before the content renders.

Here's a video:

d.pr/free/v/nyfEpq

This is on Firefox Developer Edition 66.0b12 (64-bit)

Collapse
 
elmuerte profile image
Michiel Hendriks

Rather "disappointing" there is no option to use the user's environment to transition to night mode.

Things like Ambient Light Events. Or browser local time to shift from white to sepia to night.

Collapse
 
ben profile image
Ben Halpern

This is definitely the groundwork for anything like that. We now have an established approach for any future unique config or features like that. 😄

Collapse
 
uddeshjain profile image
Uddesh

Night mode look awesome. But emoji colours also inverted please fix it if possible. 😍😍

Collapse
 
mfahlandt profile image
Mario

Soo beautiful dark! Nightmode +1
Already amazing

Collapse
 
davidbradbury profile image
David Bradbury 🐧

I stopped reading at "night mode" and turned it on immediately. My eyes thank you all! 🌙

Collapse
 
dowenb profile image
Ben Dowen

The new font is more helpful then I thought it would be! Nice work.

Collapse
 
nektro profile image
Meghan (she/her)

Night mode is just inverted colors.

Collapse
 
link2twenty profile image
Andrew Bone

Not anymore.

Collapse
 
chiangs profile image
Stephen Chiang

Love the idea of having a night mode feature...not so sure I like this iteration of it.

Collapse
 
mortoray profile image
edA‑qa mort‑ora‑y

Oh boy, I can't wait for the classic blue background IDE programming theme. I don't even care if you label it "Old Folks". :D

Collapse
 
jrfrazier profile image
WebDevQuest

Loving night-mode!

Collapse
 
daveskull81 profile image
dAVE Inden

Very awesome. I’m looking forward to continued improvements towards customizing the look and feel of the site.

Collapse
 
sebby profile image
Seb

Yay for night mode! 🌚🌃