The Future of Creator Documentation - Docs Site Beta

The website is great at this point. However, it is missing some features like automatic theme switching, improved accessibility, and using dark theme scrollbars.

Theme switching

Simply using the prefers-color-scheme media query to automatically change the theme to what the user has set their device theme to is the most accessible and simplest way.

Related article: prefers-color-scheme (web.dev)

Reduced motion accessibility

An accessibility issue I noticed is that website has a lot of animated transitions but doesn’t use the prefers-reduced-motion media query to disable it the user has reduced motion enabled on their device.

Improved dark mode

Lastly for improved dark mode support by specifying the color-scheme as dark light with the default scheme being the one listed first would mean that in dark mode the browser style sheet supports dark and light appearance (defaulting to dark), so native elements like scrollbars, inputs, etc will use a dark appearance if that’s what the user has their device set to. If there is no light theme planned, using just dark as the value should be used instead.

Related article: Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag (web.dev)

No color-scheme

Image below is using color-scheme with value of dark

color-scheme using dark

1 Like