Replace "Clown" in with Hotdog stand
This is for the "creating a theme switch" post
by steve0greatness, Sunday, 16 June 2024, 06:34:48 (1718519688), pushed by steve0greatness, Monday, 15 July 2024, 15:49:10 (1721058550)
Author identity: Steve0Greatness <steve0greatnessiscool@gmail.com>
e680d2757666a033bec9804e68bb071a9a4fadb3
blog-posts/creating_a_theme_switch.md
@@ -21,12 +21,12 @@ html[data-theme=dark] {
--buttonBorder: #333;
--buttonColor: #fff;
}
html[data-theme=clown] {
html[data-theme=hotdogstand] {
background: #f00;
color: #00f;
--buttonBackground: #050;
--buttonBorder: #0a0;
--buttonColor: #0f0;
color: #fff;
--buttonBackground: #ff0;
--buttonBorder: #000;
--buttonColor: #000;
}
button {
background: var(--buttonBackground);
@@ -44,7 +44,7 @@ Now we need to create a button that we will use to change the `[data-theme]` att
Now, it is time to write the JavaScript. First, you'll want to make a constant with the themes you filled into your CSS, for me, that was `dark`, `light`, and `clown`. I'll name this `themes`.
```javascript
const themes = ["light", "dark", "clown"];
const themes = ["light", "dark", "hotdogstand"];
```
We now need to query the <abbr title="Document Object Model">DOM</abbr> for our theme switch button. This can be done in 2 ways: `document.querySelector` or `document.getElementById`; personally, I prefer `querySelector`, as it allows you to write a CSS selector to get an element from the DOM, allowing for shorter, more digestible, code.
static/blog-files/theme-change-final.html
@@ -17,12 +17,12 @@
--buttonBorder: #333;
--buttonColor: #fff;
}
html[data-theme=clown] {
html[data-theme=hotdogstand] {
background: #f00;
color: #00f;
--buttonBackground: #050;
--buttonBorder: #0a0;
--buttonColor: #0f0;
color: #fff;
--buttonBackground: #ff0;
--buttonBorder: #000;
--buttonColor: #000;
}
button {
background: var(--buttonBackground);
@@ -36,7 +36,7 @@
<button id="theme-switch">Switch Theme</button>
This is epic!
<script type="text/javascript">
const themes = ["light", "dark", "clown"];
const themes = ["light", "dark", "hotdogstand"];
const ThemeSwitchButton = document.querySelector("#theme-switch");
const HTML = document.documentElement;
ThemeSwitchButton.addEventListener("click", SwitchTheme);
@@ -51,4 +51,4 @@
</script>
</body>
</html>
</html>
static/blog-files/theme-change-final.txt
@@ -17,12 +17,12 @@
--buttonBorder: #333;
--buttonColor: #fff;
}
html[data-theme=clown] {
html[data-theme=hotdogstand] {
background: #f00;
color: #00f;
--buttonBackground: #050;
--buttonBorder: #0a0;
--buttonColor: #0f0;
color: #fff;
--buttonBackground: #ff0;
--buttonBorder: #000;
--buttonColor: #000;
}
button {
background: var(--buttonBackground);
@@ -36,7 +36,7 @@
<button id="theme-switch">Switch Theme</button>
This is epic!
<script type="text/javascript">
const themes = ["light", "dark", "clown"];
const themes = ["light", "dark", "hotdogstand"];
const ThemeSwitchButton = document.querySelector("#theme-switch");
const HTML = document.documentElement;
ThemeSwitchButton.addEventListener("click", SwitchTheme);
@@ -51,4 +51,4 @@
</script>
</body>
</html>
</html>