[Todo] Expose dark mode via CSS variables

[zaydek]

The most intuitive way to offer dark mode and make sure dark mode is customizable is to expose CSS variables that capture colors. By using a theme-aware selector, we can make sure theming is smooth.

[zaydek]

So those could be like

body {
  --prose-a: ...;
  --prose-b: ...;
  --prose-c: ...;
}
body[data-theme=dark] {
  --prose-a: ...;
  --prose-b: ...;
  --prose-c: ...;
}

Alternatively we could pass a theme-map that would build this for us, which is a nice alternative API.

[zaydek]

We may want to update the first selector to look more like this: body:not([data-theme=dark]) but that doesn’t solve for themes generally and doesn’t allow us to stack themes so nevermind.

[zaydek]

We can grab this code:

@at-root {
    body {
        @each $k1, $v1 in $theme-map {
            $got: map.get($v1, "light");
            @if $got {
                #{$k1}: #{$got};
            }
        }
        // prettier-ignore
        @if $duration and $timing-function {
            --theme-transition: background-color #{$duration} #{$timing-function}, border-color #{$duration} #{$timing-function}, box-shadow #{$duration} #{$timing-function}, color #{$duration} #{$timing-function}, fill #{$duration} #{$timing-function}, opacity #{$duration} #{$timing-function}, stroke #{$duration} #{$timing-function}, transform #{$duration} #{$timing-function};
        }
    }
    @each $theme in $themes {
        body[data-theme="#{"" + $theme}"] {
            @each $k1, $v1 in $theme-map {
                $got: map.get($v1, $theme);
                @if $got {
                    #{$k1}: #{$got};
                }
            }
        }
    }
}

And make it work for a theme-map, which is arguably more intuitive and supports n-many themes.