Why Teachable has no dark mode

"Can we have dark mode?" is one of the questions I'm asked most. Teachable doesn't offer it as a setting. It can be built, though, and this section shows how, using the one running on this page.

Why it isn't a setting

Teachable's theme gives a school one set of colours: a few you choose, and a lot Teachable chooses for you. Those colours are set in many separate places, across pages that were built at different times. A true dark mode needs every one of them to have a second, dark version, and a way to switch between the two.

That's a big job for a platform serving thousands of schools with different brands. It's a much smaller job for one school that controls its own code, which is why it's a custom build and not a checkbox.

What a proper dark mode needs

  1. A colour system. Every colour defined once, by what it's for ("text", "background"), not what it looks like.
  2. A dark version of that system. Same names, different values.
  3. Respect for the visitor's device. If their phone is set to dark, the school should start dark.
  4. A switch for people who want the other one, which remembers their choice.
  5. Details that survive the switch: logos, images, code examples.

That's the rest of this section, one lesson each.

Is it worth it?

Not for every school. It's worth doing if your students spend a long time reading, study in the evening, or simply ask for it. It's also a clear signal that a school has been looked after, which is part of why this school has one.

Where it works

Dark mode reaches everywhere your code does: your pages, through custom code blocks, and lesson pages, through a code snippet. It doesn't reach checkout, which only uses your theme's colours.

Running on this page

Try it now

  • Press the sun or moon in the top bar. The whole page switches, including the sidebar, the buttons and this box.
  • Open the home page afterwards. It remembers what you chose here.

In short

  • Teachable has no dark mode setting, but a school can build its own.
  • It needs a colour system, a dark version of it, and a switch that remembers.
  • It works on your pages and lessons. Checkout keeps your theme's colours.
Complete and Continue