All of our favourite text editors (and also Jupyter to an extent) allows different themes to be set up.
Customizing background and text colours for the code as well as font sizes would help reduce the strain on users’ eyes.
Background colour customization would also help in finetuning the colour palettes for vizzes.
2 Likes
Just to clarify - styling the output of notebooks is already completely flexible, you can just use CSS like you would in any other webpage.
As far as the text editor component - we’ll keep the possibility open, but the scope of our work is really focused on the editor experience, interoperability, and creating great defaults first. You’re welcome to use something like userstyles to tweak things if you want a certain color scheme / font right now, but it’s relatively far-future in terms of a product potential.
1 Like
I understand this feature is far from being a basic need for most users. I am aware of the CSS option for the output but my suggestion is more focused on the editor.
The current white theme can be fairly hard on the eye, especially after extended periods of work. I’ll probably end up using Stylish once my level of frustration/eyesore gets to a level where I invest time to set up a custom theme for the site.
My viz colour palette comment also refers to the inability of changing the margins’ white colour as it makes the development of vizzes intended later for dark backgrounds harder.
To reiterate: I understand this is in no way a priority feature, it would just be a delight to have it 
Thank you for taking the time to respond to the original post.
Dark mode is now available! Head over to your settings page (through the user menu or just by going to https://beta.observablehq.com/settings )
And then:
After that, the site and the notebook editor will adopt an eye-friendly dark color scheme.
3 Likes
cool!
a little issue: “reshare?” is black on black
1 Like
Think I found a minor bug with turning dark mode on. After turning dark mode on and saving, I would get “Oops, an unexpected error occurred.” across all browsers. Dark mode would not turn on. I finally got it working by filling out my previously empty bio text box and saving. Checking dark mode then and saving again worked. I can’t reproduce by deleting the bio text and retrying.
Thanks for the great feature!
Is everyone supposed to produce notebooks which look acceptable under a dark theme? That probably takes some kind of theme detector variable visible to notebook cells. Or is this just supposed to be a way for people to edit notebooks at night without getting too much screen backlight?
Personally I would rather just assume everyone is reading with a white background. Making two copies of every diagram / graphical element is a lot of extra work.
Side note: you should lighten the hyperlink color in dark mode. It has low contrast vs. the dark gray background.
- @Fil cool - fixed
- @kemper - I haven’t had any luck replicating that issue, but will keep an eye on the logs to see if it crops up again.
-
@jrus - Here’s a quick guide for the ways to make notebooks cross-design-compatible: the simplest technique is just a line of code to set svg backgrounds to white or adopt the
currentColorfrom context. Nobody’s required to publish notebooks that work with dark mode, and we might adjust things so that it’s even easier to toggle between themes.
1 Like
I feel like if (document.body.classList.contains("observablehq--dark")) is not the most obvious way of indicating this.
I guess someone can add a cell to any notebook with …
darktheme = document.body.classList.contains("observablehq--dark")
… or whatever.
Hi @tom and @kemper. I am having the same issue as @kemper. I have never had content in my bio box and haven’t yet tried adding and removing content to get dark theme working… just in case it somehow helps you to bug check (not sure the audit capacity you have over user accounts).
Update: we’ve spotted the problem with empty bios and deployed a fix!
2 Likes
can we just load dark-theme css for some notebooks selectively? since not all or most users will pick Dark mode in Settings.
Is there a static dark-theme.css url we can just import and use for those better viewed in ‘dark mode’ notebook overrides?
Good catch. hrs are now more visible in dark mode, and I’ve also tweaked the text selection color to be more readable.
3 Likes
Hi tom, I have an empty bio and don’t have a dark theme option. The only option available is advanced settings and an auto-close checkbox. You mentioned earlier that a bug was fixed. Is filling out a bio required to see the options in settings? If so, no problem, I’ll add some stuff. Thanks for your help.
Sorry, I should have updated this thread: see
In short, we removed dark mode because it made life harder for notebook authors.
1 Like
Would it be possible to do it only for the code editor? i.e. some sort of config we can put in settings page for the prettier part, I know its not going to be a priority for lots of people, but I got used to a Monokai theme for years that looking at JS in other colors makes me slower in parsing code somehow. Or is it already possible by adding our own css to a notebook somehow?
Thanks!
You can already do that through user styles:
- Get an extension that allows you to add them (e.g. Stylus for Chrome - stay away from Stylish).
- Import this user stylesheet in which I’ve renamed the Monokai theme classes (
cm-s-monokai) to Observable’s theme (cm-s-observable): Monokai for ObservableHQ · GitHub - Tweak the CSS to better match the Observable environment.
Out of the box it will look like this:
If you want to play around with CodeMirror within a notebook, check out
By the way: This user style adds cell names to the left side bar:
6 Likes
Would it be possible to put dark mode back in, and allow notebook authors to lock their notebook in light or dark when published? That way, we could still use it when working to develop a notebook.
Just wanted to share a custom style that I’ve been using and experimenting with a bit recently. I was trying to get it to match my Monokai-themed editors, and I think it turned out pretty well! The css is up here - I think the classes have changed a little since the initial post. I also styled the selection and autocomplete. I’d love to see a dark editor as an option, but as long as I can do this, I’ll be happy 
Screenshot is from jszip / Fil / Observable
Thanks for sharing this method!