CSS / Dark mode

Dark mode

Харанхуй горим нь орчин үеийн вэбийн стандарт болжээ. CSS-д dark mode хэрэгжүүлэх хоёр арга байдаг: prefers-color-scheme media query ба CSS variable хосолсон toggle.

prefers-color-scheme media query

Хэрэглэгчийн үйлдлийн систем дэх тохиргоог унших:

css

/* Гэрэл горим — анхдагч */
body {
  background: #ffffff;
  color: #0f172a;
}

/* Үйлдлийн систем харанхуй горимд байвал */
@media (prefers-color-scheme: dark) {
  body {
    background: #0b1120;
    color: #f1f5f9;
  }
}

Гурван боломжит утга:

css

@media (prefers-color-scheme: dark) {
  /* харанхуй */
}
@media (prefers-color-scheme: light) {
  /* гэрэл */
}
/* no-preference — хэрэглэгч тодорхойлоогүй, анхдагч хэрэглэнэ */

CSS variable-аар theme — зөв арга

Шинж чанар бүрийг давтан бичихийн оронд өнгийг variable-д хадгалж, theme солих үед зөвхөн variable-ийг өөрчилнэ:

css

/* Гэрэл горим — анхдагч */
:root {
  --дэвсгэр: #ffffff;
  --гадаргуу: #f8fafc;
  --хил: #e2e8f0;
  --текст: #0f172a;
  --текст-бүдэг: #64748b;
  --accent: #7c3aed;
}

/* Харанхуй горим — OS тохиргоогоор */
@media (prefers-color-scheme: dark) {
  :root {
    --дэвсгэр: #0b1120;
    --гадаргуу: #0f172a;
    --хил: #1e293b;
    --текст: #f1f5f9;
    --текст-бүдэг: #94a3b8;
    --accent: #a78bfa;
  }
}

/* Компонентууд variable ашиглана — theme-ийн тухай мэдэхгүй */
body {
  background: var(--дэвсгэр);
  color: var(--текст);
}

.карт {
  background: var(--гадаргуу);
  border: 1px solid var(--хил);
}

.бүдэг-текст {
  color: var(--текст-бүдэг);
}

data attribute-аар theme — toggle-д зориулсан арга

JavaScript-ийн toggle товч хийхийн тулд media query биш data-theme attribute ашиглана:

css

/* Гэрэл горим */
[data-theme="light"] {
  --дэвсгэр: #ffffff;
  --гадаргуу: #f8fafc;
  --хил: #e2e8f0;
  --текст: #0f172a;
  --текст-бүдэг: #64748b;
  --accent: #7c3aed;
}

/* Харанхуй горим */
[data-theme="dark"] {
  --дэвсгэр: #0b1120;
  --гадаргуу: #0f172a;
  --хил: #1e293b;
  --текст: #f1f5f9;
  --текст-бүдэг: #94a3b8;
  --accent: #a78bfa;
}

HTML-д:

html

<html data-theme="dark"></html>

Хоёуланг хослуулсан бүрэн шийдэл

OS тохиргоог анхдагч болгож, гараар сэлгэх боломж нэмнэ:

css

/* 1. OS тохиргоог анхдагч болгох */
:root {
  --дэвсгэр: #ffffff;
  --гадаргуу: #f8fafc;
  --хил: #e2e8f0;
  --текст: #0f172a;
  --текст-бүдэг: #64748b;
  --accent: #7c3aed;
}

@media (prefers-color-scheme: dark) {
  :root {
    --дэвсгэр: #0b1120;
    --гадаргуу: #0f172a;
    --хил: #1e293b;
    --текст: #f1f5f9;
    --текст-бүдэг: #94a3b8;
    --accent: #a78bfa;
  }
}

/* 2. Гараар сэлгэхэд data-theme давамгайлна */
[data-theme="light"] {
  --дэвсгэр: #ffffff;
  --гадаргуу: #f8fafc;
  --хил: #e2e8f0;
  --текст: #0f172a;
  --текст-бүдэг: #64748b;
  --accent: #7c3aed;
}

[data-theme="dark"] {
  --дэвсгэр: #0b1120;
  --гадаргуу: #0f172a;
  --хил: #1e293b;
  --текст: #f1f5f9;
  --текст-бүдэг: #94a3b8;
  --accent: #a78bfa;
}

/* 3. Компонентууд */
body {
  background: var(--дэвсгэр);
  color: var(--текст);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

Toggle товч — JavaScript

html

<button id="theme-toggle" aria-label="Горим солих">🌙</button>

javascript

const toggle = document.getElementById("theme-toggle");
const html = document.documentElement;

// Хадгалагдсан тохиргоог уншина
const хадгалагдсан = localStorage.getItem("theme");
if (хадгалагдсан) {
  html.setAttribute("data-theme", хадгалагдсан);
  toggle.textContent = хадгалагдсан === "dark" ? "☀️" : "🌙";
}

toggle.addEventListener("click", () => {
  const одоогийн = html.getAttribute("data-theme");
  const шинэ = одоогийн === "dark" ? "light" : "dark";

  html.setAttribute("data-theme", шинэ);
  localStorage.setItem("theme", шинэ);
  toggle.textContent = шинэ === "dark" ? "☀️" : "🌙";
});

css

/* Toggle товчны загвар */
#theme-toggle {
  background: var(--гадаргуу);
  border: 1px solid var(--хил);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.2s ease;
}

#theme-toggle:hover {
  background: var(--хил);
}

Зургийн тохиргоо

Зургийг dark mode-д тохируулах:

css

/* Dark mode-д зургийн гэрлийг бууруулах */
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.85);
  }
}

/* Эсвэл data-theme-аар */
[data-theme="dark"] img {
  filter: brightness(0.85);
}

/* SVG дүрс */
[data-theme="dark"] .дүрс {
  filter: invert(1);
}

color-scheme property

Хөтчийн анхдагч UI элементүүдэд (input, select, scrollbar) мэдэгдэнэ:

css

:root {
  color-scheme: light dark; /* хоёуланг дэмждэг */
}

[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

Бодит жишээ: ulaanbaatar.app-ийн theme систем

css

:root {
  /* Харанхуй горим — анхдагч (энэ сайтын стиль) */
  --bg-base: #0b1120;
  --bg-surface: #0f172a;
  --bg-elevated: #1e293b;
  --text-primary: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #475569;
  --border: #1e293b;
  --accent: #a78bfa;
}

/* Хэрэв гэрэл горим хэрэгтэй болвол */
[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg-surface: #ffffff;
  --bg-elevated: #f1f5f9;
  --text-primary: #0f172a;
  --text-muted: #475569;
  --text-dim: #94a3b8;
  --border: #e2e8f0;
  --accent: #7c3aed;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
}

.карт {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

Дараагийн хичээлд:

BEM methodology — CSS классуудыг системтэй нэрлэх арга барилыг судална.

← Өмнөх хичээлCSS функцүүд (calc, clamp, min)Дараах хичээл →BEM methodology