36 lines
1.4 KiB
JavaScript
36 lines
1.4 KiB
JavaScript
// Handle setting and changing the site's color scheme (light/dark)
|
|
|
|
"use strict";
|
|
|
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)")
|
|
|
|
const getColourScheme = () => document.documentElement.dataset.colour_scheme
|
|
const setColourScheme = (colourScheme = getColourScheme()) => {
|
|
document.documentElement.dataset.colour_scheme = colourScheme
|
|
localStorage.setItem("colour_scheme", colourScheme)
|
|
setPygments(colourScheme)
|
|
}
|
|
|
|
// Map system theme to a cycle of steps
|
|
const cycles = {
|
|
dark: ["auto", "light", "dark"], // auto (dark) → light → dark
|
|
light: ["auto", "dark", "light"], // auto (light) → dark → light
|
|
}
|
|
|
|
const nextColourScheme = (colourScheme = getColourScheme()) => {
|
|
const cycle = cycles[prefersDark.matches ? "dark" : "light"]
|
|
return cycle[(cycle.indexOf(colourScheme) + 1) % cycle.length]
|
|
}
|
|
|
|
const setPygments = (colourScheme = getColourScheme()) => {
|
|
const pygmentsDark = document.getElementById("pyg-dark")
|
|
const pygmentsLight = document.getElementById("pyg-light")
|
|
pygmentsDark.disabled = colourScheme === "light"
|
|
pygmentsLight.disabled = colourScheme === "dark"
|
|
pygmentsDark.media = colourScheme === "auto" ? "(prefers-color-scheme: dark)" : ""
|
|
pygmentsLight.media = colourScheme === "auto" ? "(prefers-color-scheme: light)" : ""
|
|
}
|
|
|
|
// Update Pygments state (the page theme is initialised inline, see page.html)
|
|
document.addEventListener("DOMContentLoaded", () => setColourScheme())
|