Motywy

Nawet budowanie marki działa elastycznie. Możesz dostosować wygląd swojej witryny do preferencji użytkownika. Zacznijmy od pokazania, jak wzbogacić elementy marki witryny o przeglądarkę.

Dostosowywanie interfejsu przeglądarki

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

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

Możesz zaktualizować wartość theme-color za pomocą JavaScriptu. Używaj tej mocy z rozwagą. Jeśli schemat kolorów przeglądarki zbyt często się zmienia, może być przytłaczający. Zastanów się, jak w subtelny sposób dostosować kolor motywu. Jeśli zmiany będą zbyt rażące, użytkownicy przestaną być irytowani.

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

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

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

W pliku manifestu wymień metadane przy użyciu 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ć witrynę do ekranu głównego, przeglądarka użyje informacji z pliku manifestu, aby wyświetlić odpowiedni skrót.

Włącz tryb ciemny

Wiele systemów operacyjnych umożliwia użytkownikom określenie preferencji dotyczących jasnej lub ciemnej palety kolorów. , co pozwala zoptymalizować witrynę zgodnie z preferencjami użytkownika dotyczącymi tematyki. Dostęp do tego ustawienia możesz uzyskać w funkcji multimediów o nazwie prefers-color-scheme.

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

Określ kolory motywu za pomocą funkcji multimediów 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)">

Możesz też użyć funkcji multimediów prefers-color-scheme w SVG. Jeśli jako favikony używasz pliku SVG, możesz dostosować go do trybu ciemnego. Thomas Steiner pisze o prefers-color-scheme w favikonach SVG dla ikon trybu ciemnego.

Motywy z właściwościami niestandardowymi

Jeśli używasz tych samych wartości kolorów w kilku miejscach w kodzie CSS, powtórzenie wszystkich selektorów w zapytaniu o multimedia prefers-color-scheme może być dość uciążliwe.

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. Wartość zmiennej możesz zaktualizować bez aktualizowania jej nazwy.

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

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);
}

Zobacz Tworzenie schematu kolorów, aby zobaczyć bardziej zaawansowane przykłady motywów z właściwościami niestandardowymi.

Obrazy

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

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

Ikony zostaną zmienione tak samo, jak inne elementy 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 zamienić je całkowicie 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 media 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 umożliwia korzystanie z trybu ciemnego i jasnego. Dzięki temu przeglądarka może określać odpowiedni domyślny styl formularzy.

Dodaj to do swojej usługi porównywania cen:

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

Możesz też użyć kodu HTML. Dodaj to w polu head w swoich dokumentach:

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

Użyj właściwości accent-color w CSS, aby dostosować styl pól wyboru, opcji i kilku innych pól formularza.

html {
  accent-color: red;
}

Ciemne motywy często mają 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 użyć do tego właściwości niestandardowej, by przechowywać wszystkie deklaracje kolorów 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 dostosowania witryny do preferencji użytkowników. W następnej kolejności dowiesz się, jak dostosować witrynę do różnych aspektów ułatwień dostępu.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat tworzenia tematów