:root {
    color-scheme: dark;
    --color-page: #111827;
    --color-card: #1f2937;
    --color-muted: #374151;
    --color-hover: #4b5563;
    --color-line: #374151;
    --color-fg: #e5e7eb;
    --color-heading: #ffffff;
    --color-subtle: #9ca3af;
    --color-input: #374151;
    --color-inputline: #4b5563;
    --color-popup: #2d3748;
    --color-footer: #6b7280;
}

html.light {
    color-scheme: light;
    --color-page: #e2e8f0;
    --color-card: #f1f5f9;
    --color-muted: #e2e8f0;
    --color-hover: #cbd5e1;
    --color-line: #cbd5e1;
    --color-fg: #1f2937;
    --color-heading: #111827;
    --color-subtle: #475569;
    --color-input: #f1f5f9;
    --color-inputline: #94a3b8;
    --color-popup: #f1f5f9;
    --color-footer: #64748b;
}

html, body {
    background-color: var(--color-page);
    color: var(--color-fg);
}

#theme-toggle {
    background-color: var(--color-muted);
    color: var(--color-fg);
}

#theme-toggle:hover {
    background-color: var(--color-hover);
}