Czasami są takie chwile, kiedy wypada przygasić kolory na stronie – np. z powodu żałoby narodowej czy innego wydarzenia, które wymaga powagi. W świecie frontendu to wcale nie musi jest skomplikowane. Wersję żałobną można zrobić jedną linijką. Przedstawię też banalne rozwiązanie dla WordPressa.
Jeden prosty trik w CSS
W CSS mamy coś takiego jak filtry. Można dzięki nim robić cuda z grafiką, a także… wyciszyć całą stronę, robiąc z niej szaro-bury krajobraz.
Wystarczy, że dodasz to:
body {
filter: grayscale(100%);
}
I tyle! Cała strona staje się czarno-biała. Prosto, szybko i z efektem wow (albo raczej: wow, ale smutno).
Czy da się to zrobić inaczej?
Oczywiście. Oto kilka alternatywnych sposobów:
1. Klasa CSS „żałoba”
Możesz stworzyć klasę .mourning i dodać ją dotylko wtedy, kiedy trzeba:
body.mourning {
filter: grayscale(100%);
}
A potem w kodzie HTML strony zmodyfikować tag body:
<body class="mourning">
To rozwiązanie daje nam większą kontrolę – możesz łatwo włączać i wyłączać tryb żałobny np. przez JavaScript albo CMS.
2. Tryb żałoby przez JavaScript
Chcesz, żeby strona sama „wiedziała”, kiedy się smucić? Możesz ustawić warunek w JS, np. na konkretną datę:
const mourningDates = ['2025-11-01', '2025-12-10']; // przykładowe daty
const today = new Date().toISOString().slice(0, 10);
if (mourningDates.includes(today)) {
document.body.classList.add('mourning');
}
To działa jak zegarek żałoby. Raz ustawiasz daty i zapominasz – strona sama się dostosuje.
Zobacz tryb żałobny w akcji na moim blogu!
3. Strona WordPress
Jeśli działasz na WordPressie, możesz stworzyć trywialną i kilkulijkową wtyczkę, która dodaje odpowiedni styl na stronie. Przykład:
<?php
/*
Plugin Name: Tryb Żałoby
Description: Dodaje czarno-biały filtr do strony w określone dni.
*/
add_action('wp_head', function () {
$mourning_days = ['2025-11-01', '2025-12-10'];
$today = date('Y-m-d');
if (in_array($today, $mourning_days)) {
echo '<style>body { filter: grayscale(100%); }</style>';
}
});
Wtyczka może być jeszcze prostsza. Wystarczy zostawić samą komendę echo.
Zapisujesz to jako np. mourning-mode.php i wrzucasz do folderu wp-content/plugins/mourning-mode/. Potem tylko aktywujesz wtyczkę z panelu wordpressa.
Jak widać na powyższych przykładach żałobna wersja strony to nie rocket science. Możesz to zrobić:
- jedną linijką CSS,
- dynamicznie przez JavaScript,
- albo totalnie wygodnie jako wtyczkę WordPressa.
To drobny gest, ale pokazuje szacunek. Moje rozwiązanie nie wymaga przerabiania całego frontu. Bez względu jaki to CMS.
