html.black {
    /* built-in theme */
    --color-scheme: dark;

    /* color */
    --hue: 220;
    --sat: 10%;
    --bg-lum: 4%;
    --text-lum: 64%;
    --bg: hsl(var(--hue), var(--sat), var(--bg-lum));
    --bg-dark: hsl(from var(--bg) h s calc(l - 4));
    --bg-light: hsl(from var(--bg) h s calc(l + 4));
    --text: hsl(var(--hue), var(--sat), var(--text-lum));
    --text-dark: hsl(from var(--text) h s calc(l - 24));
    --text-light: hsl(from var(--text) h s calc(l + 12));
    --input: hsl(from var(--text) h s calc(l + 8));
    --input-bg: hsl(from var(--text) h s calc(l - 58));
    --input-border: hsl(from var(--text) h s calc(l - 48));
    --border-color: hsl(from var(--bg) h s calc(l + 20));

    /* other colors */
    --red: hsl(5, 48%, 76%);
    --orange: hsl(30, 48%, 76%);
    --yellow: hsl(60, 48%, 76%);
    --green: hsl(130, 48%, 76%);
    --cyan: hsl(180, 48%, 76%);
    --blue: hsl(220, 48%, 76%);
    --purple: hsl(265, 48%, 76%);
    --pink: hsl(320, 48%, 76%);
    --hover-luminance-change: 4;
    --active-luminance-change: 2;
    --accent: var(--text);
    --accent: var(--purple);
}