butiran

dark mode js elems css

· 1 min read · edit

notes

  • CSS advancement is based on a coversation with AI assistant 1.
  • See 25j66 for source of test-1.
  • Therea are various types of input as shown in a reference 2.
  • Each type of input has different properties. Each property must be set up differently.

main.css (current version)

Location assets/css/

:root {
  color-scheme: light dark;

  /* Light theme */
  --bg: #ffffff;
  --fg: #222222;
  --border: #222222;
  --muted-border: #dddddd;
  --link: #0000ee;
  --box-bg: #ffffff;
  --accent: #4f81bd;
  --hover-bg: #f0f0f0;

  /* Scrollbar (Firefox) */
  scrollbar-color: var(--accent) var(--hover-bg);

  /* Form / JS-created elements */
  --control-bg: var(--box-bg);
  --control-fg: var(--fg);
  --control-border: var(--border);
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #c9d1d9;
    --border: #30363d;
    --muted-border: #30363d;
    --link: #58a6ff;
    --box-bg: #161b22;
    --accent: #58a6ff;
    --hover-bg: #21262d;

    /* Scrollbar (Firefox) */
    scrollbar-color: var(--accent) var(--hover-bg);
    
    /* Form / JS-created elements */
    --control-bg: var(--box-bg);
    --control-fg: var(--fg);
    --control-border: var(--border);
  }

  .logo-container svg {
    filter: brightness(0.8) saturate(0.85);
  }  
}

/* JS elements */
canvas,
textarea,
input,
select {
  background-color: var(--control-bg);
  color: var(--control-fg);
  border: 1px solid var(--control-border);
}

button {
}

test-1

test-2

test-3

test-4

refs

  1. GPT-5.2, “Dark Mode JS Elements”, ChatGPT, 4 Jan 2026, 05:29, url https://chatgpt.com/share/69599a0a-ded4-800a-9b81-c31f9f06e2b5 [20260104]. ↩︎

  2. -, “HTML Input Types”, W3Schools, url https://www.w3schools.com/html/html_form_input_types.asp [20260104]. ↩︎