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)
Image below is using color-scheme with value of dark