✨ [Feature request]: Enable automatic dark mode for dark mode users

Petrosdevri commented 1 year ago

Is your feature request related to a problem? Please describe.

I use dark mode in my browser because it's better for my eyes and websites with dark mode look quite attractive. However, it would be even nicer if a website enabled a mode by default based on the user's mode settings. This is what I think we should do here as well.

Describe the solution you'd like.

A CSS selector which looks after the default mode and changes the variable colours to darker shades, as stated on the data-theme selector. It may also require work in the JS selectors to ensure data-theme can be later switched accordingly.

Describe alternatives you've considered.

A JS script that changes the mode based on user settings.

Screenshot / Screenshare

No response

Additional context

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct

Sachin-chaurasiya commented 1 year ago

Hi @Petrosdevri, we are using Docusaurus and we have the config to set the user system theme as the default theme by configuring the theme.

You can refer to this documentation: https://docusaurus.io/docs/api/themes/configuration.

Sachin-chaurasiya commented 1 year ago

Let us know if you want to work on this issue?

Petrosdevri commented 1 year ago

Yeah, I read a bit through the snippets and believe we could solve this by setting respectPrefersColorScheme as true in the docusaurus.config.js file. Probably something like that:

themeConfig: {
    colorMode: {
      defaultMode: 'light',
      respectPrefersColorScheme: true,
    },
  },

I can work on that and finish in no time as it's up to you to assign me. Also thanks for the documentation reference.

Sachin-chaurasiya commented 1 year ago

Yeah, I read a bit through the snippets and believe we could solve this by setting respectPrefersColorScheme as true in the docusaurus.config.js file. Probably something like that:
themeConfig: {
    colorMode: {
      defaultMode: 'light',
      respectPrefersColorScheme: true,
    },
  },
I can work on that and finish in no time as it's up to you to assign me. Also thanks for the documentation reference.

Go ahead @Petrosdevri, I have assigned this to you.

reactplay / docs