Nawet marka może stać się responsywną. Wygląd witryny można dostosować do preferencji użytkownika. Najpierw jednak warto dowiedzieć się, jak rozszerzyć elementy marki witryny, aby obejmowała ona 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 tabeli head na wszystkich stronach.
<meta name="theme-color" content="#00D494">
Wartość theme-color możesz zaktualizować za pomocą JavaScriptu. Ale rozsądnie korzystaj z tej mocy.
Zbyt częsta zmiana schematu kolorów w przeglądarce może być przytłaczająca dla użytkowników.
Pomyśl o subtelnych sposobach dostosowania koloru motywu. Jeśli zmiany będą zbyt rażące, użytkownicy będą irytować.
Kolor motywu możesz też określić w pliku manifestu aplikacji internetowej. Jest to plik JSON z metadanymi Twojej witryny.
Link do pliku manifestu (head) 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 za pomocą 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 wyświetli odpowiedni skrót na podstawie informacji z pliku manifestu.
Włącz tryb ciemny
Wiele systemów operacyjnych pozwala użytkownikom wybrać jasną lub ciemną paletę kolorów, co stanowi dobry pomysł na optymalizację witryny pod kątem preferencji użytkownika.
To ustawienie jest dostępne w funkcji multimediów prefers-color-scheme.
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
Kolory motywu możesz określać 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)">
W SVG możesz też użyć funkcji multimediów prefers-color-scheme.
Jeśli jako favikony używasz pliku SVG, możesz go dostosować w trybie ciemnym.
Thomas Steiner napisał o prefers-color-scheme favikonach SVG jako ikonach trybu ciemnego.
Motywowanie z właściwościami niestandardowymi
Jeśli używasz tych samych wartości kolorów w kilku miejscach w całym kodzie 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 aktualizowania jej nazwy.
Jeśli zaktualizujesz wartości właściwości niestandardowych w zapytaniu o media prefers-color-scheme, nie będziesz musiała 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);
}
Bardziej zaawansowane przykłady tworzenia motywów z użyciem właściwości niestandardowych znajdziesz w artykule o tworzeniu schematu kolorów.
zdjęcia;
Jeśli w kodzie HTML używasz obrazów SVG, możesz też zastosować w nich właściwości niestandardowe.
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
Teraz kolory ikon zmienią się 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 zdjęć możesz chcieć całkowicie zmienić je w trybie ciemnym.
Możesz na przykład wyświetlić mapę z ciemniejszym schematem kolorów.
W zapytaniu o media prefers-color-scheme użyj elementu <picture> zawierającego element <source>.
<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 zapewnić odpowiedni styl domyślny 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 ten element do sekcji 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, przycisków i niektórych innych pól formularza.
html {
accent-color: red;
}
Ciemne motywy często mają stonowane kolory marki. Możesz zmienić wartość accent-color 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 mieć 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);
}
Włączenie trybu ciemnego to tylko jeden z przykładów dostosowywania witryny do preferencji użytkowników. W kolejnym kroku dowiesz się, jak dostosować witrynę do różnych aspektów ułatwień dostępu.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat tworzenia motywów
Aby podać kolory motywu, które wpływają na działanie przeglądarki poza stroną internetową, użyj:
<meta> „theme-color”.manifest.json, który zawiera pola do określania kolorów motywu, aby dostosować wygląd aplikacji na ekranie głównym urządzenia mobilnego.<meta> „theme-color”<head>, dzięki czemu unikniesz niechcianych błysków.Aby zapoznać się z preferencjami systemowymi użytkownika dotyczącymi jasnego lub ciemnego motywu, wykonaj te czynności:
(prefers-color-scheme)Możesz więc korzystać z ciemnego motywu, ale wszystkie dane wejściowe w formularzu nadal mają jasny motyw. Co możesz zrobić?
html { color-scheme: light dark; } do usługi porównywania cen.<meta name="supported-color-schemes" content="light dark"> do tagu HTML <head>.