Skip to content

Commit 8e5015a

Browse files
howbizarrehowbizarre
committed
ADD: Dark Theme Support
1 parent eefcd9b commit 8e5015a

File tree

2 files changed

+45
-93
lines changed

2 files changed

+45
-93
lines changed

‎index.html‎

Lines changed: 1 addition & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -7,90 +7,10 @@
77

88
<title>Starter template for Vue 3 with Bootstrap 5, SASS and Bootstrap Icons on TypeScript!</title>
99

10-
<style>
11-
body,
12-
html {
13-
width: 100%;
14-
height: 100%;
15-
}
16-
17-
.aside {
18-
position: fixed;
19-
bottom: 5px;
20-
right: 5px;
21-
}
22-
23-
.hidden { display: none; }
24-
</style>
10+
<style>body, html { width: 100%; height: 100%; }</style>
2511
</head>
2612
<body class="d-flex flex-column">
2713
<div id="app" class="d-flex flex-column h-100"></div>
28-
29-
<aside class="aside">
30-
<span id="theme-toggle" type="button">
31-
<svg id="light-icon" width="20" height="20" class="hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
32-
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
33-
</svg>
34-
<svg id="dark-icon" width="20" height="20" class="hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
35-
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
36-
</svg>
37-
</span>
38-
</aside>
39-
40-
<script>
41-
const docElm = document.documentElement;
42-
const themeToggleBtn = docElm.querySelector("#theme-toggle");
43-
const darkIcon = themeToggleBtn.querySelector("#dark-icon");
44-
const lightIcon = themeToggleBtn.querySelector("#light-icon");
45-
46-
if (localStorage.getItem("color-theme") === "dark") {
47-
darkIcon.classList.remove("hidden");
48-
docElm.classList.remove("light");
49-
docElm.classList.add("dark");
50-
docElm.dataset.bsTheme = "dark";
51-
} else {
52-
if ((!('color-theme' in localStorage)) && (window.matchMedia('(prefers-color-scheme: dark)').matches)) {
53-
darkIcon.classList.remove("hidden");
54-
docElm.classList.remove("light");
55-
docElm.classList.add("dark");
56-
docElm.dataset.bsTheme = "dark";
57-
localStorage.setItem("color-theme", "dark");
58-
} else {
59-
lightIcon.classList.remove("hidden");
60-
docElm.classList.remove("dark");
61-
docElm.classList.add("light");
62-
docElm.dataset.bsTheme = "light";
63-
localStorage.setItem("color-theme", "light");
64-
}
65-
}
66-
67-
themeToggleBtn.addEventListener("click", function () {
68-
darkIcon.classList.toggle("hidden");
69-
lightIcon.classList.toggle("hidden");
70-
71-
if (localStorage.getItem("color-theme")) {
72-
if (localStorage.getItem("color-theme") === "light") {
73-
docElm.classList.add("dark");
74-
docElm.dataset.bsTheme = "dark";
75-
localStorage.setItem("color-theme", "dark");
76-
} else {
77-
docElm.classList.remove("dark");
78-
docElm.dataset.bsTheme = "light";
79-
localStorage.setItem("color-theme", "light");
80-
}
81-
} else {
82-
if (docElm.classList.contains("dark")) {
83-
docElm.classList.remove("dark");
84-
docElm.dataset.bsTheme = "light";
85-
localStorage.setItem("color-theme", "light");
86-
} else {
87-
docElm.classList.add("dark");
88-
docElm.dataset.bsTheme = "dark";
89-
localStorage.setItem("color-theme", "dark");
90-
}
91-
}
92-
});
93-
</script>
9414
<script type="module" src="./src/main.ts"></script>
9515
</body>
9616
</html>

‎src/components/Footer.vue‎

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,52 @@
11
<template>
2-
<div class="border-top py-3 d-flex justify-content-between align-items-center">
3-
<div>
4-
<Refs /> <a href="https://bizarre.how/" class="text-decoration-none" title="Starter by How Bizarre">How Bizarre</a>
5-
</div>
6-
<a href="https://github.com/howbizarre/starter-template_vue-3-vite-bootstrap-5-with-icons" class="text-decoration-none" title="Boilerplate for Vue 3 with Vite and Bootstrap 5 with Icons">
7-
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
2+
<div class="border-top py-3 d-flex justify-content-between align-items-center">
3+
<section>
4+
<Refs /> <a href="https://bizarre.how/" class="text-decoration-none" title="Starter by How Bizarre">How Bizarre</a>
5+
<a href="https://github.com/howbizarre/starter-template_vue-3-vite-bootstrap-5-with-icons"
6+
class="text-decoration-none ms-1" title="Boilerplate for Vue 3 with Vite and Bootstrap 5 with Icons">
7+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
88
<g id="feGithub0" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
99
<g id="feGithub1" fill="currentColor">
10-
<path id="feGithub2" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10Z" />
10+
<path id="feGithub2"
11+
d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10Z" />
1112
</g>
1213
</g>
1314
</svg>
1415
</a>
15-
</div>
16-
</template>
16+
</section>
17+
18+
<section class="d-flex">
19+
<a href="#" @click="(event) => changeTheme(event)" class="text-decoration-none">
20+
<div v-if="themeToggler" class="d-flex justify-content-between align-items-center">
21+
<small class="me-1">Light Up</small>
22+
<svg class="p-0" width="20" height="20" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
23+
<path
24+
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
25+
fill-rule="evenodd" clip-rule="evenodd"></path>
26+
</svg>
27+
</div>
28+
<div v-else class="d-flex justify-content-between align-items-center">
29+
<small class="me-1">Darken</small>
30+
<svg class="pa-0 ma-0" width="20" height="20" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
31+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
32+
</svg>
33+
</div>
34+
</a>
35+
</section>
36+
</div>
37+
</template>
1738

18-
<script lang="ts" setup>
19-
import Refs from "@/components/Refs.vue";
20-
</script>
39+
<script lang="ts" setup>
40+
import { ref } from "vue";
41+
import Refs from "@/components/Refs.vue";
42+
43+
const themeToggler = ref(false);
44+
const docElm = document.documentElement;
45+
46+
const changeTheme = (e: Event) => {
47+
e.preventDefault();
48+
49+
themeToggler.value = !themeToggler.value;
50+
docElm.dataset.bsTheme = themeToggler.value ? "dark" : "light";
51+
};
52+
</script>

0 commit comments

Comments
 (0)