add dark theme
This commit is contained in:
parent
ef773f34f3
commit
a26b816e28
|
@ -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>
|
||||
|
|
File diff suppressed because it is too large
Load Diff
After Width: | Height: | Size: 210 KiB |
|
@ -15,9 +15,9 @@
|
|||
<main>
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
<!-- <footer> -->
|
||||
<!-- {{- partial "footer.html" . -}} -->
|
||||
<!-- </footer> -->
|
||||
<footer>
|
||||
{{- partial "footer.html" . -}}
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue