Як створити темну тему інтерфейсу?
10 найкращих практик для темної теми
- Темний режим не означає чистий чорний. …
- Уникайте насиченості. …
- Ніколи не використовуйте Pure White. …
- Створіть свій власний бренд Dark. …
- Інвертування колірної схеми недостатньо. …
- Передайте глибину без використання тіней. …
- Використовуйте палітри насичених кольорів для тексту. …
- Індикатори фокусування мають бути видимими.
Поверхня темної теми створена розміщення напівпрозорого накладення на поверхні компонента. З нанесенням напівпрозорого білого покриття поверхня стає світлішою. Накладання на поверхню також полегшує розрізнення висоти між компонентами та бачення тіней.
Лише темний режим Додавання <CssBaseline /> до компонента <ThemeProvider> також увімкне темний режим для фону програми. Налаштування темного режиму таким чином працює, лише якщо ви використовуєте палітру за замовчуванням. Якщо у вас є спеціальна палітра, переконайтеся, що у вас є правильні значення на основі режиму.
Кроки для створення веб-сайтів у темному режимі за допомогою HTML, CSS і JavaScript:
- Створіть документ HTML.
- Додайте властивості CSS до тіла та додайте властивості класу темного режиму в CSS.
- Додайте кнопки для перемикання між темним і світлим режимами.
- Додайте функції до кнопок для перемикання між темним і світлим режимами за допомогою JavaScript.
Керуйте темним режимом у Chrome
- Унизу праворуч на сторінці нової вкладки виберіть Налаштувати Chrome .
- У розділі «Вигляд» виберіть одне з: Світлий : Chrome матиме світлу тему. Темний : Chrome працюватиме в темній темі. Пристрій : Chrome дотримуватиметься теми вашого пристрою.
Більшість дизайнерів вважають, що використання чорного кольору буде оптимальним для досягнення сильного контрасту. Однак краще не використовувати справжній чорний (#000000) для кольорів фону чи поверхні. Чорний найкраще використовувати для інших елементів інтерфейсу і використовувати його економно. Наприклад, справжній чорний можна використовувати для невеликих елементів інтерфейсу користувача або рамки навколо.