Theming guide: default dark theme

[nicolasr75]

As far as I understand, Material has default styles for both light and dark themes. The current version of the theming guide explains how to alter a theme via CSS variables. As I am interested in using a dark theme, I would like to start with a default dark theme without having to set each an every CSS variable myself.

Is there a way to change the theme easily from light to dark?

If so, could this be explained in the docs?

[nicolasr75]

I want to add: I'd like to have a default dark theme not so much because I'm lazy but because, as demonstrated in the Material docs, designing a dark theme is far from trivial! So I think it's a good idea to have the default theme as a first start and for comparison with my own design attempts.

[taylor-vann]

Hey there @nicolasr! Thanks for submitting this issue.

Currently, other than setting CSS Custom Properties variables yourself, there isn't a great "one stop shop" to switch from light to dark themes.

There are a few reasons behind this. But the main one is (as of today) there isn't a standardized "dark theme".

The bad news: Material provides guidelines for themes but not the implementation. And Material Components provides default styles for components but does not provide the themes.

The good news: We agree. There should be a way to help users create and switch between themes. And after reviewing this with the teammates, I'll be working on a solution next quarter. Unfortunately, we are currently focused on creating components this quarter.

I'm going to assign this to myself and keep the issue open. I'll post updates here as we make progress.

Thanks again!

(and by the way, we would never assume users are lazy :) We're very excited y'all are using Material Components and we want to help!)

[bravius]

Great to hear, @taylor-vann.

I also attempted to implement a dark theme via css variables and ran into stumbling blocks.

For example, the mwc-drawer surface wasn't customizable (though this seems to have been fixed in a recent commit).

Working on an app for cataract sufferers and patients, dark themes help a great deal with accessibility.

Look forward to seeing this supported.

[taylor-vann]

Hey y'all!

Progress is being made! The Material team has released "dark theme" conventions at Material.io

Next steps are implementing the dark color scheme. So this bug is not closed yet but close!

Thanks everyone for being supportive.

[treeder]

Hi all, any updates on this?

[treeder]

I think this issue is resolved with the material 3 stuff.

[asyncliz]

Yup!