Jak opracować nowy motyw CSS do Bootstrap 5.3 z obsługą trybów light i dark
Tworzenie niestandardowego motywu do Bootstrap 5.3 to świetny sposób na wyróżnienie swojej aplikacji, jednocześnie zachowując spójność i dostępność. W tym artykule pokażemy krok po kroku, jak opracować motyw z obsługą wyłącznie dwóch trybów kolorystycznych: jasnego (light) i ciemnego (dark). Szczególną uwagę poświęcimy doborowi kolorów i zgodności z WCAG (Web Content Accessibility Guidelines).
1. Wstęp – Co nowego w Bootstrap 5.3?
Bootstrap 5.3 rozszerzył wsparcie dla trybu ciemnego i wprowadził nowy system kolorów oparty na CSS Variables (zmiennych). Dzięki temu możliwe jest łatwe przełączanie motywów bez konieczności przepisywania stylów.
2. Podstawowe założenia motywu
- Tylko dwa tryby: light i dark
- Bez automatycznego przełączania (np. przez media query
prefers-color-scheme) – kontrola trybu odbywa się ręcznie (np. przyciskiem). -
Zgodność z WCAG 2.1 AA – kontrasty tekstów i tła muszą spełniać minimalne wymagania:
- Tekst normalny: kontrast min. 4.5:1
- Tekst pogrubiony lub powiększony: 3:1
3. Struktura kolorów w Bootstrap 5.3
Bootstrap 5.3 pozwala na nadpisywanie kolorów poprzez zmienne CSS w dwóch kontekstach:
[data-bs-theme="light"] {
--bs-body-bg: #ffffff;
--bs-body-color: #212529;
/* inne zmienne */
}
[data-bs-theme="dark"] {
--bs-body-bg: #121212;
--bs-body-color: #f8f9fa;
/* inne zmienne */
}Możesz nadać atrybut data-bs-theme na elemencie <html> lub <body> i dynamicznie przełączać motyw.
4. Dobór kolorów – praktyczne wskazówki
Jasny motyw (data-bs-theme="light")
| Element | Kolor | Uwaga |
|---|---|---|
Tło (--bs-body-bg) |
#ffffff |
Klasyczne białe tło |
Tekst (--bs-body-color) |
#212529 |
Głęboka szarość dla czytelności |
Linki (--bs-link-color) |
#0d6efd |
Bootstrapowy niebieski |
Akcent (--bs-primary) |
np. #0d6efd |
Powinien mieć kontrast ≥ 4.5:1 względem --bs-body-bg |
Ciemny motyw (data-bs-theme="dark")
| Element | Kolor | Uwaga |
|---|---|---|
| Tło | #121212 |
Bardzo ciemne tło (popularne w Material Design) |
| Tekst | #f8f9fa |
Jasny tekst dla kontrastu (kontrast z tłem ~15:1) |
| Linki | #66b2ff |
Delikatniejszy niebieski – wyraźny, ale nie razi |
| Akcent | np. #0dcaf0 |
Jasny, żywy kolor – zwróć uwagę na kontrast z ciemnym tłem |
Narzędzia do sprawdzania kontrastu
5. Przykładowy plik CSS motywu
/* Light Theme */
[data-bs-theme="light"] {
--bs-body-bg: #ffffff;
--bs-body-color: #212529;
--bs-primary: #0d6efd;
--bs-link-color: #0d6efd;
}
/* Dark Theme */
[data-bs-theme="dark"] {
--bs-body-bg: #121212;
--bs-body-color: #f8f9fa;
--bs-primary: #0dcaf0;
--bs-link-color: #66b2ff;
}6. Przełącznik trybu (JavaScript)
<button id="theme-toggle">Zmień motyw</button>
<script>
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', () => {
const html = document.documentElement;
const current = html.getAttribute('data-bs-theme');
html.setAttribute('data-bs-theme', current === 'light' ? 'dark' : 'light');
});
</script>7. Testowanie i dostępność
- Testuj z czytnikami ekranu (NVDA, VoiceOver)
- Sprawdzaj kontrasty każdego elementu interfejsu
- Upewnij się, że kolory nie niosą samodzielnie informacji (np. nie polegaj wyłącznie na kolorze, by oznaczyć błąd)
8. Nowe motywy na mojej stronie
Przedstawiam dwa nowe motywy: golden oraz twilight obrazujące tzw. złotą i niebieską godzinę. Moja strona ma możliwość automatycznego przełączania między czterema motywami: light, golden, twilight oraz dark w zależności od pory dnia i nocy. Więcej informacji znajdziesz w tym artykule.
[data-bs-theme=golden] {
color-scheme: light;
--bs-dark: #4a2f1b;
--bs-dark-rgb: 74, 47, 27;
--bs-body-color: #4a2f1b;
--bs-body-color-rgb: 74, 47, 27;
--bs-body-bg: #fff3e0;
--bs-body-bg-rgb: 255, 243, 224;
--bs-emphasis-color: #3b220f;
--bs-emphasis-color-rgb: 59, 34, 15;
--bs-secondary-color: rgba(74, 47, 27, 0.75);
--bs-secondary-color-rgb: 74, 47, 27;
--bs-secondary-bg: #ffe0b2;
--bs-secondary-bg-rgb: 255, 224, 178;
--bs-tertiary-color: rgba(74, 47, 27, 0.5);
--bs-tertiary-color-rgb: 74, 47, 27;
--bs-tertiary-bg: #ffcc80;
--bs-tertiary-bg-rgb: 255, 204, 128;
--bs-warning-border-subtle: #e5ce8e;
--bs-heading-color: inherit;
--bs-dark-text-emphasis: #4a2f1b;
--bs-light-text-emphasis: #3b220f;
--bs-dark-bg-subtle: #d7cfc5;
--bs-secondary-border-subtle: #c8b8a8;
--bs-link-color: #0c68f0;
--bs-link-color-rgb: 12, 104, 240;
--bs-link-hover-color: #0a58ca;
--bs-link-hover-color-rgb: 10, 88, 202;
--bs-code-color: #bf360c;
--bs-highlight-color: #4a2f1b;
--bs-highlight-bg: #fff3e0;
--bs-border-color: #d6bfa7;
--bs-border-color-translucent: rgba(0, 0, 0, 0.15);
--bs-form-valid-color: #8bc34a;
--bs-form-valid-border-color: #8bc34a;
--bs-form-invalid-color: #e64a19;
--bs-form-invalid-border-color: #e64a19;
}
[data-bs-theme=twilight] {
color-scheme: dark;
--bs-light: #d0d9ff;
--bs-light-rgb: 208, 217, 255;
--bs-body-color: #d0d9ff;
--bs-body-color-rgb: 208, 217, 255;
--bs-body-bg: #0d1b2a;
--bs-body-bg-rgb: 13, 27, 42;
--bs-emphasis-color: #f0f4ff;
--bs-emphasis-color-rgb: 240, 244, 255;
--bs-secondary-color: rgba(208, 217, 255, 0.75);
--bs-secondary-color-rgb: 208, 217, 255;
--bs-secondary-bg: #1b263b;
--bs-secondary-bg-rgb: 27, 38, 59;
--bs-tertiary-color: rgba(208, 217, 255, 0.5);
--bs-tertiary-color-rgb: 208, 217, 255;
--bs-tertiary-bg: #2a3c5a;
--bs-tertiary-bg-rgb: 42, 60, 90;
--bs-primary-text-emphasis: #6ea8fe;
--bs-secondary-text-emphasis: #a7acb1;
--bs-success-text-emphasis: #75b798;
--bs-info-text-emphasis: #6edff6;
--bs-warning-text-emphasis: #f5e273;
--bs-danger-text-emphasis: #ea868f;
--bs-light-text-emphasis: #f8f9fa;
--bs-dark-text-emphasis: #dee2e6;
--bs-primary-bg-subtle: #031633;
--bs-secondary-bg-subtle: #161719;
--bs-success-bg-subtle: #051b11;
--bs-info-bg-subtle: #032830;
--bs-warning-bg-subtle: #3a3602;
--bs-danger-bg-subtle: #2c0b0e;
--bs-light-bg-subtle: #343a40;
--bs-dark-bg-subtle: #1a1d20;
--bs-primary-border-subtle: #084298;
--bs-secondary-border-subtle: #41464b;
--bs-success-border-subtle: #0f5132;
--bs-info-border-subtle: #087990;
--bs-warning-border-subtle: #997404;
--bs-danger-border-subtle: #842029;
--bs-light-border-subtle: #495057;
--bs-dark-border-subtle: #343a40;
--bs-heading-color: inherit;
--bs-link-color: #90caf9;
--bs-link-hover-color: #bbdefb;
--bs-link-color-rgb: 144, 202, 249;
--bs-link-hover-color-rgb: 187, 222, 251;
--bs-code-color: #82b1ff;
--bs-highlight-color: #d0d9ff;
--bs-highlight-bg: #283e57;
--bs-border-color: #3a506b;
--bs-border-color-translucent: rgba(255, 255, 255, 0.1);
--bs-form-valid-color: #81c784;
--bs-form-valid-border-color: #81c784;
--bs-form-invalid-color: #ef5350;
--bs-form-invalid-border-color: #ef5350;
}9. Podsumowanie
Tworzenie własnego motywu CSS w Bootstrap 5.3 z obsługą tylko jasnego i ciemnego trybu to świetny sposób na kontrolowanie stylu aplikacji bez nadmiernej komplikacji. Kluczem do sukcesu jest:
- spójny i dostępny dobór kolorów,
- respektowanie zasad WCAG,
- i użycie CSS Variables oraz
data-bs-themedo płynnego przełączania stylów.
Dobrze zaprojektowany motyw nie tylko wygląda nowocześnie, ale też zwiększa użyteczność Twojej aplikacji dla wszystkich użytkowników.