rsschouwenaar
rsschouwenaar
/ dark-mode-switcher.js
Created
May 1, 2020 07:05
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const button = document.querySelector(".color-switch"); | |
| button.addEventListener("click", function() { | |
| const body = document.querySelector("body"); | |
| body.classList.toggle("lightmode"); | |
| body.classList.toggle("darkmode"); | |
| if (button) { | |
| button.innerText = body.classList.contains("lightmode") ? "Dark" : "Light"; | |
| } |
rsschouwenaar
/ dark-mode-switcher.ts
Created
May 1, 2020 07:05
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const button: HTMLButtonElement = document.querySelector(".color-switch"); | |
| button.addEventListener("click", function() { | |
| const body: HTMLBodyElement = document.querySelector("body"); | |
| body.classList.toggle("lightmode"); | |
| body.classList.toggle("darkmode"); | |
| if (button) { | |
| button.innerText = body.classList.contains("lightmode") ? "Dark" : "Light"; | |
| } |
rsschouwenaar
/ dark-mode.html
Created
May 1, 2020 07:03
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body class="darkmode"> | |
| <header> | |
| <button class="color-switch">Light</button> | |
| </header> | |
| <h1>CSS Variable Dark Mode Switcher</h1> | |
| </body> |
rsschouwenaar
/ background-css-variable.css
Created
May 1, 2020 07:03
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-size: 1.2rem; | |
| background: var(-background-fallback); | |
| background: var(-background-gradient-webkit); | |
| background: var(-background-gradient); | |
| color: var(-text); | |
| } | |
| a { | |
| color: var(-links-dark); | |
| } |
rsschouwenaar
/ dark-color-scheme.css
Created
May 1, 2020 07:02
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .darkmode { | |
| --text: #fff; | |
| --links: #66e387; | |
| --bg-start: #2c5364; | |
| --bg-middle: #203a43; | |
| --bg-end: #0f2027; | |
| --background-fallback: #0f2027; /* fallback for old browsers */ | |
| --background-gradient-webkit: -webkit-linear-gradient( | |
| to bottom, | |
| var(--bg-start), |
rsschouwenaar
/ change-css-variable-context.js
Created
May 1, 2020 07:00
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.querySelector('.wrapper').style.setProperty("--textcolor","pink"); |
rsschouwenaar
/ change-css-variable-root.js
Created
May 1, 2020 06:58
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.documentElement.style.setProperty("--textcolor","pink"); |
rsschouwenaar
/ css-variables-context.css
Created
May 1, 2020 06:57
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .wrapper { | |
| --textcolor: #66e387; | |
| } |
rsschouwenaar
/ css-variables-root.css
Created
May 1, 2020 06:38
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --textcolor: #ffc845; | |
| } |
rsschouwenaar
/ css-variables-root-and-context.css
Created
May 1, 2020 06:37
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --textcolor: #ffc845; | |
| } | |
| div { | |
| color: var(--textcolor); | |
| } | |
| .wrapper { | |
| --textcolor: #66e387; | |
| } |
NewerOlder