add dark theme

This commit is contained in:
yequari 2024-10-02 22:16:49 -07:00
parent ef773f34f3
commit a26b816e28
5 changed files with 6584 additions and 12 deletions

View File

@ -1,5 +1,9 @@
<p>
{{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
Site last updated <time id="last-update" datetime="{{ .PublishDate.Format "2006-01-02 15:04:05 -0700" }}">{{ .PublishDate.Format "January 2, 2006" }}</time>.
Made without AI tools using Hugo.
{{ range first 1 .Site.RegularPages.ByDate.Reverse }}
Last updated <time id="last-update" datetime="{{ .PublishDate.Format "2006-01-02 15:04:05 -0700" }}">{{ .PublishDate.Format "January 2, 2006" }}</time>.
{{ end }}
</p>
<p>
<button class="hidden" value="dark mode" id="theme-toggle">Button</button>
</p>

6435
static/images/waves-nobg.svg Normal file

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 210 KiB

View File

@ -15,9 +15,9 @@
<main>
{{- block "main" . }}{{- end }}
</main>
<!-- <footer> -->
<!-- {{- partial "footer.html" . -}} -->
<!-- </footer> -->
<footer>
{{- partial "footer.html" . -}}
</footer>
</div>
</div>
</body>

View File

@ -10,7 +10,15 @@
--blue: #284D9E;
--black: #342F23;
--main-bg: var(--bg);
--russian-violet: #1f0949;
--tea-rose: #f8c7cc;
--periwinkle: #BEB7DF;
--rose-quartz: #ABA9BF;
--eerie-black: #1D1E18;
--lavender: #E1E2EF;
--mardi-gras: #320F76;
--main-bg: linear-gradient(#0045df, #00d4ff);
--content-bg: var(--isabelline);
--primary-text: var(--black);
--secondary-text: var(--blue-gray);
@ -32,8 +40,44 @@
--heading-6: 0.25rem;
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg: linear-gradient(#28164B, 70%, #825ECA );
--content-bg: #1A181B;
--primary-text: #DCCBFF;
--secondary-text: #B89AF5;
--header: #825ECA;
--nav-link: #B89AF5;
--primary-link: #B89AF5;
--primary-link-hover: #E3D5FF;
--secondary-link: #E3D5FF;
--secondary-link-hover: #B89AF5;
--ternary-link: var(--blue);
--ternary-link-hover: var(--brown);
--shadow: #00000088;
}
}
@media (prefers-color-scheme: light) {
:root {
--main-bg: linear-gradient(#0045df, #00d4ff);
--content-bg: var(--isabelline);
--primary-text: var(--black);
--secondary-text: var(--blue-gray);
--header: var(--orange);
--nav-link: var(--orange);
--primary-link: var(--brown);
--primary-link-hover: var(--blue);
--secondary-link: var(--blue);
--secondary-link-hover: var(--brown);
--ternary-link: var(--blue);
--ternary-link-hover: var(--brown);
--shadow: #2F3E5E55;
}
}
body {
background: fixed no-repeat url('/images/waves.svg') var(--main-bg);
background: fixed no-repeat url('/images/waves-nobg.svg'), fixed no-repeat var(--main-bg);
background-size: cover;
color: var(--primary-text);
font-size: medium;
@ -166,7 +210,7 @@ header .profile {
flex-flow: row wrap;
justify-content: space-between;
margin: 10px;
text-shadow: 3px 3px 5px var(--blue-gray);
text-shadow: 3px 3px 5px var(--shadow);
}
header .profile img {
@ -234,7 +278,7 @@ nav li a {
nav li a:link,
nav li a:visited {
color: #de9b00;
color: var(--nav-link);
text-decoration: none;
border-left: 1px solid rgba(255, 255, 255, 0);
border-right: 1px solid rgba(255, 255, 255, 0);
@ -400,11 +444,21 @@ li.page-item {
}
footer {
border-top: 1px dotted var(--secondary-text);
text-align: center;
color: var(--secondary-text);
flex: 1 1 100%;
}
footer p {
font-size: 0.8rem;
}
#theme-toggle {
background: var(--content-bg);
color: var(--primary-text);
}
.metadata {
display: flex;
flex-flow: row;

View File

@ -1,14 +1,93 @@
const root = document.documentElement;
const root = document.querySelector(':root');
const themeToggle = document.getElementById('theme-toggle');
let mouseX = 0;
let mouseY = 0;
const darkMode = {
mainBg: "linear-gradient(#28164B, 70%, #825ECA )",
contentBg: "#1A181B",
primaryText: "#DCCBFF",
secondaryText: "#B89AF5",
header: "#825ECA",
navLink: "#B89AF5",
primaryLink: "#B89AF5",
primaryLinkHover: "#E3D5FF",
secondaryLink: "#E3D5FF",
secondaryLinkHover: "#B89AF5",
ternaryLink: "var(--blue)",
ternaryLinkHover: "var(--brown)",
shadow: "#00000088"
}
const lightMode = {
mainBg: "linear-gradient(#0045df, #00d4ff)",
contentBg: "#EEE5E5",
primaryText: "#342F23",
secondaryText: "#2F3E5E",
header: "#DE9B00",
navLink: "#DE9B00",
primaryLink: "#896D2E",
primaryLinkHover: "#284D9E",
secondaryLink: "#284D9E",
secondaryLinkHover: "#896D2E",
ternaryLink: "#284D9E",
ternaryLinkHover: "#896D2E",
shadow: "#2F3E5E55"
}
const applyTheme = (theme) => {
root.style.setProperty("--main-bg", theme.mainBg);
root.style.setProperty("--content-bg", theme.contentBg);
root.style.setProperty("--primary-text", theme.primaryText);
root.style.setProperty("--secondary-text", theme.secondaryText);
root.style.setProperty("--header", theme.header);
root.style.setProperty("--nav-link", theme.navLink);
root.style.setProperty("--primary-link", theme.primaryLink);
root.style.setProperty("--primary-link-hover", theme.primaryLinkHover);
root.style.setProperty("--secondary-link", theme.secondaryLink);
root.style.setProperty("--secondary-link-hover", theme.secondaryLinkHover);
root.style.setProperty("--ternary-link", theme.ternaryLink);
root.style.setProperty("--ternary-link-hover", theme.ternaryLinkHover);
root.style.setProperty("--shadow", theme.shadow);
}
const enableDarkMode = () => {
applyTheme(darkMode);
localStorage.setItem('theme', 'dark');
themeToggle.innerText = 'Light Mode';
}
const disableDarkMode = () => {
applyTheme(lightMode);
localStorage.setItem('theme', 'light');
themeToggle.innerText = 'Dark Mode';
}
const detectTheme = () => {
let theme = 'light';
let themeObj = lightMode;
if (localStorage.getItem('theme')) {
theme = localStorage.getItem('theme');
}
else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
}
theme === 'dark' ? enableDarkMode() : disableDarkMode();
}
document.addEventListener("mousemove", (evt) => {
mouseX = evt.clientX / innerWidth;
mouseY = evt.clientY / innerHeight;
root.style.setProperty("--mouse-x", `${mouseX}`);
root.style.setProperty("--mouse-y", `${mouseY}`);
console.log(root.style.getPropertyValue("--mouse-x"));
});
themeToggle.className = "";
detectTheme();
themeToggle.addEventListener('click', () => {
localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
});