doka-guide · TatianaFokina · Jun 19, 2024 · Jun 7, 2024 · Jun 8, 2024 · Jun 8, 2024
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Цветовая схема для сайта — color-scheme — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+    }
+
+    :root {
+      color-scheme: dark;
+    }
+
+    html {
+      height: 100%;
+    }
+
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      background-color: #dfdfdf;
+      font-family: "Roboto", sans-serif;
+    }
+
+    .one {
+      color: rgb(234, 234, 243);
+      background-color: rgb(2, 7, 12);
+      padding: 5px 10px;
+    }
+    .two {
+      color: rgb(61, 9, 61);
+      background-color: rgb(177, 177, 237);
+    }
+  </style>
+</head>
+<body>
+  <div class="one">Темную сторону силы в тебе ощущаю.</div>
+  <div class="two">Люк, я твой отец!</div>
+</body>
+</html>
@@ -0,0 +1,39 @@
+---
+title: "`color-scheme`"
+description: "Темная или светлая ~сторона~ тема? Вы сами можете её задать!"
+authors:
+  - nasty23-star
+keywords:
+  - цветовые схемы
+  - тема сайта
+related:
+  - css/color
+  - css/media
+tags:
+  - doka
+---
+
+## Кратко
+
+Свойство `color-scheme` позволяет определять и указывать цветовые схемы, которые поддерживает их веб-сайт, это помогает веб-браузерам корректировать визуальное отображение страницы. Также это свойство помогает создать более контрастные режимы для пользователей с нарушениями зрения.
+
+## Пример
+
+```css
+:root {
+  color-scheme: dark;
+}
+```
+
+## Как пишется
+
+В качестве значения можно указать `normal`, это показывает, что используется значение по умолчанию. Соответственно, `light` и `dark` это светлая и темные схемы. Если установлено значение `light dark`, это означает, что возможен как светлый, так и темный режим. Применение значения `color-scheme` зависит от значения медиа-условия `prefers-color-scheme`. Свойство наследуется.
+
+Кроме этих значений, `color-scheme` поддерживает глобальные значения: `initital`, `revert`, `revert-layers`, `unset`.
+
+Если мы хотим обозначить, что наш сайт работает только со светлой темой, нужно прописать свойство как `only light`. И наоборот.
+
+Свойство `color-scheme` поддерживается во всех основных браузерах, при использовании в старых браузерах поддержку свойства лучше проверить. Также можно использовать метатег `<meta name="color-scheme">`, это позволяет задать несколько цветовых схем через пробел `<meta name="color-scheme" content="light dark">`.
+
+Главное, для чего нужно свойство `color-scheme` — более комфортное взаимодействие с сайтом для пользователей, независимо от их устройств или настроек браузера.
+