user-preferences.md

User Preferences

browserux.css detects and respects system user preferences via CSS media queries, without JavaScript. This section covers all applied adaptations.

---

Theme: dark mode (prefers-color-scheme)

When the user has enabled dark mode at the system or browser level, color variables are automatically replaced:

@media (prefers-color-scheme: dark) {
  :root {
    --bux-page-bg: #121212;
    --bux-page-color: #eaeaea;
    --bux-valid-bg-color: #0d2e18;
    --bux-invalid-bg-color: #2e0d0d;
    --bux-scrollbar-track: #1a2535;
  }
}

• No JavaScript required.
• The theme automatically follows system preferences.
• Validation colors and scrollbar are also covered.
• To manage the theme manually (toggle button), see Customization.

Smooth transition between themes

A 0.3s fade is applied to background-color and color on body when switching between light and dark themes. This transition is only enabled if the user has not requested reduced motion:

@media (prefers-reduced-motion: no-preference) {
  body {
    transition: background-color 0.3s, color 0.3s;
  }
}

---

Animations: reduced motion (prefers-reduced-motion)

Smooth scroll

Enabled only if the user has not requested reduced motion:

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

Full animation disable

If the user has enabled the reduced motion preference, all animations and transitions are cancelled throughout the document:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
  }
}

Property	Effect
animation-duration: 0s	Removes all animations
animation-iteration-count: 1	Stops infinite loops
scroll-behavior: auto	Disables smooth scrolling
transition-duration: 0s	Removes all transition effects

---

High contrast (prefers-contrast)

Improves readability of visually muted elements when the user has requested enhanced contrast:

@media (prefers-contrast: more) {
  ::placeholder {
    color: rgba(16, 16, 16, 0.8);
    opacity: 1;
  }

  [disabled] {
    color: rgba(16, 16, 16, 0.8);
  }

  ::selection {
    text-shadow: none;
  }

  em, i, small {
    font-weight: bold;
  }
}

• ::placeholder : hint text becomes more contrasted and fully opaque.
• [disabled] : disabled elements remain readable.
• ::selection : removes shadows that reduce readability of selected text.
• em, i, small : visually reinforced with font-weight: bold.

Dark mode + high contrast

The near-black colors above would be invisible on a dark background. This combined block replaces them with near-white values:

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  ::placeholder {
    color: rgba(239, 239, 239, 0.9);
    opacity: 1;
  }

  [disabled] {
    color: rgba(239, 239, 239, 0.9);
  }
}

---

Reduced transparency (prefers-reduced-transparency)

Adjusts semi-transparent elements for users who prefer a display without transparency:

@media (prefers-reduced-transparency: reduce) {
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.9);
  }

  ::-webkit-scrollbar {
    background: var(--bux-page-bg);
  }
}

• dialog::backdrop : becomes nearly opaque to hide background content.
• ::-webkit-scrollbar : scrollbar background aligns with the page color.

---

Forced colors: Windows High Contrast (forced-colors)

In Windows High Contrast mode (or any forced-colors environment), custom CSS colors are replaced by system colors. This block restores critical visual cues:

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  button,
  input,
  select,
  textarea {
    border: 1px solid ButtonText;
  }

  [disabled],
  [aria-disabled="true"] {
    opacity: 0.5;
  }
}

• :focus-visible : focus outline is restored using the Highlight system color.
• button, input, select, textarea : a ButtonText border is added to fields whose border was removed by the reset.
• [disabled] : opacity: 0.5 clearly communicates the disabled state when colors are controlled by the OS.