63 lines
1.7 KiB
Typst
63 lines
1.7 KiB
Typst
#import "./custom_html.typ" as chtml
|
|
|
|
/// Buttons to chose the theme to use (Light/Dark)
|
|
/// label is the aria-label of the html element (for screenreader).
|
|
/// label-auto, label-light and label-dark are the content of each button.
|
|
#let theme_picker(
|
|
label: "Theme Picker",
|
|
label-auto: [Auto],
|
|
label-light: [Light],
|
|
label-dark: [Dark],
|
|
) = {
|
|
```raw-css
|
|
/* Thanks to Lyra Rebane for no-js theme picker implementation: https://lyra.horse/blog/2025/08/you-dont-need-js/ */
|
|
theme-picker {
|
|
display: flex;
|
|
padding: 5px;
|
|
label {
|
|
transition: background 0.08s;
|
|
&:first-child { border-radius: 8px 0 0 8px; }
|
|
&:last-child { border-radius: 0 8px 8px 0; }
|
|
&:has(input:checked) {
|
|
box-shadow: inset 0px 0px 8px 0px var(--color-button-shadow);
|
|
}
|
|
&:has(input:focus-visible) {
|
|
outline: 2px solid var(--color-button-focus);
|
|
}
|
|
&:hover { background: #0004; }
|
|
&:active { background: #0006; }
|
|
box-shadow: inset 0px 0px 1.2px 0px #000;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
background: #0002;
|
|
}
|
|
input {
|
|
/* To allow screen reader to still access these. */
|
|
opacity: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
/* Typst like to insert unecessary <p> elements */
|
|
p {
|
|
margin: 0px;
|
|
}
|
|
}
|
|
```
|
|
chtml.theme-picker(
|
|
label: label,
|
|
{
|
|
html.label({
|
|
html.input(type: "radio", name: "theme", id: "theme-auto", checked: true)
|
|
label-auto
|
|
})
|
|
html.label({
|
|
html.input(type: "radio", name: "theme", id: "theme-light")
|
|
label-light
|
|
})
|
|
html.label({
|
|
html.input(type: "radio", name: "theme", id: "theme-dark")
|
|
label-dark
|
|
})
|
|
}
|
|
)
|
|
}
|