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
- A colour system. Every colour defined once, by what it's for ("text", "background"), not what it looks like.
- A dark version of that system. Same names, different values.
- Respect for the visitor's device. If their phone is set to dark, the school should start dark.
- A switch for people who want the other one, which remembers their choice.
- 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.
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.
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.