My Dark Mode Setup for Kinopio

Hello, Kinopio Club Club! Here’s what you can do while you’re waiting for an official dark mode.

Result:

I use two extensions to achieve this. The first is a wonderful extension called Dark Reader, which automatically converts some light themed websites into dark themes.

The result on Kinopio:


(I also kicked up the brightness and contrast a notch via Dark Reader settings)

Erm… It’s neat, but definitely needs some work. You can’t see the black icons, some of the text is still black and unreadable, and worst of all the squiggly background - which is normally lovely - looks like a pinworm infestation :S

We can tweak it a bit by adding some custom CSS using the Stylus extension. Firefox or Chrome (P.S. don’t use Stylish).

This is the style I apply to the Kinopio domain:

* {
    color: #fff;
}

body {
    background-image: none;
}

.inline-button {
    background-color: #bcbcbc;
}

button, 
.segmented-buttons > button,
label,
.narrow,
.button-wrap > button {
    background-color: #565656;
}

Yay! I think it looks great. I really love how the colourful strings contrast against the dark background.ヽ(・∀・)ノ

Let me know if you try it out!

3 Likes

this looks rad (⌐ ͡■ ͜ʖ ͡■) thanks for sharing. welcome to the forums!

– ben

2 Likes

that’s super sick, it looks like dark reader just does a simple color invert that gets most of the way there and is does the right thing to icon images.

here’s some impromptu documentation for those who want to try creating a sharable theme. All the colors in kinopio are css variables, which you can change w js in the webconsole

  --primary black
  --primary-background white
  --text-link #143997

  --secondary-background #e3e3e3
  --secondary-hover-background #d8d8d8
  --secondary-active-background #cdcdcd

  --light-shadow rgba(0,0,0,0.20)
  --heavy-shadow rgba(0,0,0,0.25)

  --danger-background #ffb8b3
  --danger-hover-background #ffa49e
  --danger-active-background #ff928b

  --info-background #90ffff
  --success-background #98f49f

2 Likes

added this thread as a reference to the ‘dark mode’ card in the roadmap

1 Like