Czy o coś takiego, Tobie chodziło?
<body class="color-theme-white">
<div class="color-theme-container">
<button class="button button-white">Biały</button>
<button class="button button-orange">Pomarańczowy</button>
<button class="button button-green">Zielony</button>
<button class="button button-red">Czerwony</button>
<button class="button button-yellow">Żółty</button>
</div>
<div>
<h2>Czym jest Lorem Ipsum?</h2>
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</div>
<div>
<h2>Skąd się to wzięło?</h2>
<p>W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. Ma ono korzenie w klasycznej łacińskiej literaturze z 45 roku przed Chrystusem, czyli ponad 2000 lat temu! Richard McClintock, wykładowca łaciny na uniwersytecie Hampden-Sydney w Virginii, przyjrzał się uważniej jednemu z najbardziej niejasnych słów w Lorem Ipsum – consectetur – i po wielu poszukiwaniach odnalazł niezaprzeczalne źródło: Lorem Ipsum pochodzi z fragmentów (1.10.32 i 1.10.33) „de Finibus Bonorum et Malorum”, czyli „O granicy dobra i zła”, napisanej właśnie w 45 p.n.e. przez Cycerona. Jest to bardzo popularna w czasach renesansu rozprawa na temat etyki. Pierwszy wiersz Lorem Ipsum, „Lorem ipsum dolor sit amet...” pochodzi właśnie z sekcji 1.10.32.</p><p> Standardowy blok Lorem Ipsum, używany od XV wieku, jest odtworzony niżej dla zainteresowanych. Fragmenty 1.10.32 i 1.10.33 z „de Finibus Bonorum et Malorum” Cycerona, są odtworzone w dokładnej, oryginalnej formie, wraz z angielskimi tłumaczeniami H. Rackhama z 1914 roku.</p></div>
<div>
<h2>Do czego tego użyć?</h2>
Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu i wpisanie w internetowej wyszukiwarce ‘lorem ipsum’ spowoduje znalezienie bardzo wielu stron, które wciąż są w budowie. Wiele wersji tekstu ewoluowało i zmieniało się przez lata, czasem przez przypadek, czasem specjalnie (humorystyczne wstawki itd).</div>
</body>
* {
box-sizing: border-box;
}
:root {
--color-2: black;
--color-3: gray;
}
body {
margin: 0;
padding: 0;
background-color: var(--color-2);
color: var(--color-1);
transition: color 0.5s;
}
div {
width: 70vw;
margin: 1em auto;
font: 1.1em/1.6em monospace;
}
.color-theme-container button {
width: 8em;
cursor: pointer;
color: black;
border: 2px solid gray;
font: 0.9em/1.4em monospace;
font-weight: bold;
}
.color-theme-container .button-white {
background-color: white;
}
.color-theme-container .button-orange {
background-color: orange;
}
.color-theme-container .button-green {
background-color: limegreen;
}
.color-theme-container .button-red {
background-color: orangered;
}
.color-theme-container .button-yellow {
background-color: yellow;
}
.color-theme-white {
--color-1: white;
}
.color-theme-orange {
--color-1: orange;
}
.color-theme-green {
--color-1: limegreen;
}
.color-theme-red {
--color-1: orangered;
}
.color-theme-yellow {
--color-1: yellow;
}
body::-webkit-scrollbar {
width: 0.5em;
}
body::-webkit-scrollbar-track {
border: 0.18em solid var(--color-2);
background-color: var(--color-3);
}
body::-webkit-scrollbar-thumb {
width: 0.35em;
background-color: var(--color-1);
border-radius: 0.2em;
}
window.onload = () => {
const buttons = document.querySelectorAll('.color-theme-container button');
const colors = ['white', 'orange', 'green', 'red', 'yellow'];
buttons.forEach((button, index) => {
button.addEventListener('click', () => {
document.body.className = `color-theme-${colors[index]}`;
})
})
}
