Implement Responsive Light/Dark Theme

GarrettS commented 3 months ago

Implement responsive CSS with light-dark themes.

GarrettS commented 3 months ago

Added light-dark CSS — woo hoo!

GarrettS commented 3 months ago

The color-scheme: light dark; on root and associated light-dark values works on desktop but not only any mobile browser.

The following doesn't work on desktop (not tested on mobile):

@media (prefers-color-scheme: light) {
    --body-background-color: #331F1B;
    --body-color: #111111cc;
    --body-border-color: #DDDDDDcc;
}

@media (prefers-color-scheme: dark) {
    --body-background-color: #331F1B;
    --body-color: #ffffffc2;
    --body-border-color: #330500cc;
}
:root {
    color-scheme: light dark;
}

html {
    margin: 0;
    padding: 0;
    font-size: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;

}

body {
    background-color: var(--body-background-color);
    color: var(--body-color);
    border-color: var(--body-border-color);

GarrettS commented 3 months ago

Changed from using light-dark() to @media (prefers-color-scheme: dark) resolved the issue of not working in mobile.

This is because @media (prefers-color-scheme: dark) with var() is more widely supported.

Unfortunately, it adds some code bloat, but the cost of that was outweighed by better mobile support.

GarrettS / parkinsons-guide

Implement Responsive Light/Dark Theme #4