Dark mode with elm-css

[SIGUSR97]

I’m trying to recreate the “dark:” variant in tailwindcss/unocss with elm-css. I’d expect it to look something like this:

css
    [ color (rgb 0 0 0)
    , dark
        [ color (rbg 255 255 255)
        , ... -- more css rules
        ]
    , ... -- more css rules
    ]

Is this doable with elm-css? How should I implement this dark function?

[Confidenceman02]

elm-css exposes a withMediaQuery that you could use to create that media query.

Something like this might work:

css
    [ color (rgb 0 0 0)
    , withMediaQuery [ "(prefers-color-scheme: dark)" ]
        [ color (rbg 255 255 255)
        , ... -- more css rules
        ]
    ]

Moving this to a utility function you could do something like:

dark : List Style -> Style
dark styles =
    withMediaQuery [ "(prefers-color-scheme: dark)" ] styles

[SIGUSR97]

@Confidenceman02

elm-css exposes a withMediaQuery that you could use to create that media query.

I understand that you can use withMediaQuery to write custom media queries. But what I’m trying to accomplish here is actually the class strategy as described here. This would allow you to toggle dark mode on and off, which translates to css that looks like this:

.class-name {
    color : rgb(0 0 0);
}
.dark .class-name {
    color : rbg(255 255 255);
}