Motywy

Nawet branding może być elastyczny. Możesz dostosować sposób wyświetlania witryny do preferencji użytkownika. Najpierw jednak dowiedz się, jak rozszerzyć branding witryny na samą przeglądarkę.

Dostosowywanie interfejsu przeglądarki

Niektóre przeglądarki umożliwiają sugerowanie koloru motywu na podstawie palety kolorów witryny. Interfejs przeglądarki dostosuje się do sugerowanego koloru. Dodaj kolor w elemencie meta o nazwie theme-color w sekcji head na stronach.

<meta name="theme-color" content="#00D494">

Wartość theme-color możesz zaktualizować za pomocą JavaScriptu. Ale korzystaj z tej mocy mądrze. Jeśli schemat kolorów przeglądarki zmienia się zbyt często, może to być dla użytkowników przytłaczające. Zastanów się, jak subtelnie dostosować kolor motywu. Jeśli zmiany będą zbyt drastyczne, użytkownicy zrezygnują z usługi.

Możesz też określić kolor motywu w pliku manifestu aplikacji internetowej. Jest to plik JSON z metadanymi dotyczącymi Twojej witryny.

Link do pliku manifestu z head dokumentów. Użyj elementu link z wartością rel równą manifest.

<link rel="manifest" href="/manifest.json">

W pliku manifestu podaj metadane w postaci par klucz/wartość.

{
  "short_name": "Clearleft",
  "name": "Clearleft design agency",
  "start_url": "/",
  "background_color": "#00D494",
  "theme_color": "#00D494",
  "display": "standalone"
}

Jeśli użytkownik zdecyduje się dodać Twoją witrynę do ekranu głównego, przeglądarka użyje informacji z pliku manifestu, aby wyświetlić odpowiedni skrót.

Udostępnianie trybu ciemnego

Wiele systemów operacyjnych umożliwia użytkownikom określenie preferencji dotyczących jasnej lub ciemnej palety kolorów. Warto zoptymalizować witrynę pod kątem preferencji użytkowników dotyczących motywu. To ustawienie jest dostępne w funkcji multimedialnej o nazwie prefers-color-scheme.

@media (prefers-color-scheme: dark) {
  // Styles for a dark theme.
}

Określ kolory motywu za pomocą funkcji multimedialnej prefers-color-scheme w elemencie meta.

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

W SVG możesz też użyć funkcji multimedialnej prefers-color-scheme. Jeśli używasz pliku SVG jako favikony, można go dostosować do trybu ciemnego. Thomas Steiner napisał artykuł prefers-color-scheme w SVG favicons for dark mode icons.

Motywy z użyciem właściwości niestandardowych

Jeśli używasz tych samych wartości kolorów w wielu miejscach w CSS, powtarzanie wszystkich selektorów w zapytaniu o media prefers-color-scheme może być dość żmudne.

body {
  background-color: white;
  color: black;
}
input {
  background-color: white;
  color: black;
  border-color: black;
}
button {
  background-color: black;
  color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  input {
    background-color: black;
    color: white;
    border-color: white;
  }
  button {
    background-color: white;
    color: black;
  }
}

Używaj niestandardowych właściwości CSS do przechowywania wartości kolorów. Właściwości niestandardowe działają jak zmienne w języku programowania. Możesz zaktualizować wartość zmiennej bez zmiany jej nazwy.

Jeśli zaktualizujesz wartości właściwości niestandardowych w prefers-color-scheme zapytaniu o media, nie musisz pisać wszystkich selektorów dwa razy.

html {
  --page-color: white;
  --ink-color: black;
}
@media (prefers-color-scheme: dark) {
  html {
    --page-color: black;
    --ink-color: white;
  }
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}
input {
  background-color: var(--page-color);
  color: var(--ink-color);
  border-color: var(--ink-color);
}
button {
  background-color: var(--ink-color);
  color: var(--page-color);
}

Bardziej zaawansowane przykłady tworzenia motywów za pomocą właściwości niestandardowych znajdziesz w artykule Tworzenie schematu kolorów.

Obrazy

Jeśli w kodzie HTML używasz plików SVG, możesz w nich też stosować właściwości niestandardowe.

svg {
  stroke: var(--ink-color);
  fill: var(--page-color);
}

Teraz ikony będą zmieniać kolory wraz z innymi elementami na stronie.

Jeśli chcesz zmniejszyć jasność zdjęć wyświetlanych w trybie ciemnym, możesz zastosować filtr w CSS.

@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}

W przypadku niektórych obrazów możesz chcieć całkowicie je zastąpić w trybie ciemnym. Możesz na przykład wyświetlić mapę z ciemniejszym schematem kolorów. Użyj elementu <picture> zawierającego element <source> z zapytaniem o multimedia prefers-color-scheme.

<picture>
  <source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
  <img src="lightimage.png" alt="A description of the image.">
</picture>

Formularze

Przeglądarki udostępniają domyślną paletę kolorów dla pól formularza. Poinformuj przeglądarkę, że Twoja witryna oferuje zarówno tryb ciemny, jak i jasny. Dzięki temu przeglądarka może zastosować odpowiednie domyślne style do formularzy.

Dodaj do CSS:

html {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

Możesz też używać HTML-a. Dodaj te informacje w sekcji head dokumentów:

<meta name="supported-color-schemes" content="light dark">

Użyj właściwości accent-color w CSS, aby określić styl pól wyboru, przycisków opcji i niektórych innych pól formularza.

html {
  accent-color: red;
}

W przypadku ciemnych motywów często stosuje się stonowane kolory marki. Możesz zaktualizować wartość accent-color dla trybu ciemnego.

html {
  accent-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    accent-color: pink;
  }
}

Warto w tym celu użyć właściwości niestandardowej, aby wszystkie deklaracje kolorów były w jednym miejscu.

html {
  color-scheme: light;
  --page-color: white;
  --ink-color: black;
  --highlight-color: red;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --page-color: black;
    --ink-color: white;
    --highlight-color: pink;
  }
}
html {
  accent-color: var(--highlight-color);
}
body {
  background-color: var(--page-color);
  color: var(--ink-color);
}

Tryb ciemny to tylko jeden z przykładów dostosowywania witryny do preferencji użytkowników. Następnie dowiesz się, jak dostosować witrynę do różnych wymagań dotyczących dostępności.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o motywach