html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #101018;
  --color-surface: #171521;
  --color-text: #f7f3fb;
  --color-muted: #b7aec7;
  --color-icon: #f7f3fb;
  --color-chevron: rgba(153, 138, 180, 0.7);
  --color-border: #302b3c;
  --color-accent: var(--x-7c-5-0c-8);
  --color-accent-soft: #393147;
  --color-primary: var(--color-accent);
  --color-primary-text: #111018;
}

html[data-theme="dark"] .settings-screen,
html[data-theme="dark"] .settings-frame {
  background-color: var(--color-bg);
}

html[data-theme="dark"] .settings-title-row h1,
html[data-theme="dark"] .settings-menu-item,
html[data-theme="dark"] .settings-menu-label,
html[data-theme="dark"] .settings-menu-icon,
html[data-theme="dark"] .settings-back .ti-chevron-left {
  color: var(--color-text);
}

html[data-theme="dark"] .settings-chevron {
  color: var(--color-chevron);
}

html[data-theme="dark"] .settings-switch {
  background-color: var(--color-accent-soft);
}

html[data-theme="dark"] .settings-menu-item[aria-pressed="true"] .settings-switch,
html[data-theme="dark"] .settings-switch.is-on {
  background-color: var(--color-accent);
}