🏠 back to Observable

Allow users to create notebook themes


#1

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

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.


#3

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 :slight_smile: Thank you for taking the time to respond to the original post.


#4

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.


#5

cool!

a little issue: “reshare?” is black on black
08


#6

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!


#7

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.


#8
  • @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 currentColor from 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.

#9

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.


#10

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).


#11

Update: we’ve spotted the problem with empty bios and deployed a fix!


#12

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?


#13

md lines should have contrasting colors in darkmode


#14

:+1: Good catch. hrs are now more visible in dark mode, and I’ve also tweaked the text selection color to be more readable.