A theme compiled to a stylesheet (spec/04 §6): custom properties scoped by a class,
.mw-theme-<name>, so every element under that class draws in the theme and a page
switches theme by its class alone. Adopters emit the same class and properties, so a
visualize chart standalone and on a page reads the same properties.
Macaw.Layers.Theme.Sheet.stylesheet(
[Macaw.Layers.Theme.default(), Macaw.Layers.Theme.dark()],
auto: {Macaw.Layers.Theme.default(), Macaw.Layers.Theme.dark()}
)The sheet's bytes are a pure function of its themes, so it is cached and served by its
digest. There is never a <style> element per component.
Ported from visualize's Visualize.Theme.stylesheet/1 and color_scheme/2.
Summary
Functions
The rule .mw-theme-auto: light's properties, and dark's under
@media (prefers-color-scheme: dark), then the forced-colors block.
The theme's rule: .mw-theme-<name> declaring every slot, then each of the theme's own
colors that is not a slot and each step it pins other than 500, then the forced-colors
block. A theme name that is not lower-case words raises ArgumentError.
The whole static sheet: one rule per theme, in order, then, with auto: {light, dark},
the auto rule.
Functions
@spec auto(Macaw.Layers.Theme.t(), Macaw.Layers.Theme.t()) :: String.t()
The rule .mw-theme-auto: light's properties, and dark's under
@media (prefers-color-scheme: dark), then the forced-colors block.
@spec rule(Macaw.Layers.Theme.t()) :: String.t()
The theme's rule: .mw-theme-<name> declaring every slot, then each of the theme's own
colors that is not a slot and each step it pins other than 500, then the forced-colors
block. A theme name that is not lower-case words raises ArgumentError.
iex> Macaw.Layers.Theme.Sheet.rule(Macaw.Layers.Theme.default()) |> String.split("\n") |> Enum.take(2)
[".mw-theme-default {", " --mw-series-1: #3b6fa8;"]@spec stylesheet([Macaw.Layers.Theme.t()], keyword()) :: String.t()
The whole static sheet: one rule per theme, in order, then, with auto: {light, dark},
the auto rule.