Light and dark theming for the XMarkdown renderer.
The compiler turns CompilerParameters into a RenderSettings
record with makeSettings, and the Render.* modules read
their sizes and colors from it. Applications that embed the editor (see the
DemoTOC+Sync example) additionally read the raw ThemedStyles
palettes — lightTheme / darkTheme — and the
themedColor helper to keep their own chrome in step with the
document's current theme.
The fully-resolved bundle of sizes and colors handed to every renderer.
Resolve a CompilerParameters into a RenderSettings:
scale the font/title sizes, parse the highlight color (falling back to the
theme), and pull the theme's colors for the chosen theme.
Scale a design-time font size by the document's fontSize, preserving the
proportion the design size had to the reference body size. Use this in place of
a hardcoded Font.size n so all text scales with settings.fontSize.
ThemedStyles is a raw color palette; lightTheme and darkTheme are the two
built-in instances, and themedColor looks up one field for a given theme,
returning a CSS color string.
A raw color palette for one theme. Each field is an
avh4/elm-color
Color. See lightTheme and darkTheme for the
built-in instances, and themedColor to read a field as a CSS
string.
A light theme with a white background and dark text.
A dark theme with a near-black background and light text.
Look up one palette field for a theme and render it as a CSS color string
(rgb(...) or rgba(...)). Pass a ThemedStyles field accessor:
themedColor .background model.theme --> "rgb(230, 230, 230)"
Everything a renderer needs to lay out and color a document: sizes (
width,fontSize,titleSize, spacing, margins), the resolved theme colors (textColor,backgroundColor,linkColor, …), and the current selection/theme. Build one withmakeSettings.