feat: first draft for dark mode support

main-old
Francesco Minnocci 3 years ago
parent a5f724d167
commit 219a966860

2
.gitignore vendored

@ -1,5 +1,3 @@
# Environment files
.env

@ -5,9 +5,6 @@
--bg: #eaeaea;
--fg: #333;
/* --bg-dark: #e0e0d6;
--bg-darker: #d6d6cc; */
--bg-dark: hsl(220, 5%, 93%);
--bg-darker: hsl(220, 5%, 90%);
--bg-darker-2: #dadada;
@ -15,6 +12,9 @@
--accent-1: #278542;
--accent-1-fg: #154d24;
--card-date: #666;
--card-content: #222;
--font-sf: 'Inter', sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
@ -24,6 +24,29 @@
--shadow-1: 0 0 16px 0 #00000018;
}
html.dark{
--bg: #282828;
--fg: #579f31;
--bg-dark: hsl(10, 10%, 20%);
--bg-darker: hsl(10, 10%, 17%);
--bg-darker-2: #1d2021;
--accent-1: #154d24;
--accent-1-fg: #278542;
--card-date: #928374;
--card-content: #d4be98;
--font-sf: 'Inter', sans-serif;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--shadow-1: 0 0 16px 0 #16182077;
}
* {
box-sizing: border-box;
}
@ -94,12 +117,12 @@ nav a:hover {
nav .nav-logo {
/* height: 3.5rem; */
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background: var(--bg-dark);
border-radius: 4px;
border: 1px solid var(--bg-darker-2);
@ -159,7 +182,7 @@ nav .nav-main .nav-item.dropdown .name {
justify-content: center;
background: var(--bg-dark);
z-index: 10;
}
@ -174,14 +197,14 @@ nav .nav-main .nav-item.dropdown .nav-items {
display: none;
background: var(--bg-dark);
border-radius: 4px;
border: 1px solid var(--bg-darker-2);
box-shadow: var(--shadow-1);
}
/*
/*
nav .nav-main .nav-item.dropdown .nav-items::before {
position: absolute;
content: '';
@ -272,14 +295,14 @@ section {
.card .date {
font-size: 15px;
color: #666;
color: var(--card-date);
margin-bottom: 0.75rem;
}
.card .description {
font-weight: var(--font-weight-light);
color: #222;
color: var(--card-content);
}
/* Typography */
@ -306,4 +329,4 @@ a {
a:hover {
color: var(--accent-1);
text-decoration: underline;
}
}

@ -30,6 +30,19 @@
]
});
});
<!-- [> WIP: Dark Mode <]
- document.documentElement.classList.toggle(
- 'dark',
- localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
- );
- document.addEventListener('DOMContentLoaded', () =>
- document.querySelectorAll('[toggle-dark-mode]').forEach((item) =>
- item.addEventListener('click', () => {
- localStorage.setItem('theme', localStorage.theme == 'dark' ? 'light' : 'dark');
- document.documentElement.classList.toggle('dark');
- })
- )
- ); -->
</script>
@ -88,6 +101,9 @@
<a href="/login">Accedi</a>
</div>
{{end}}
<div class="nav-item toggle-dark-mode">
<a href=""><i class="fa-moon"></i></a>
</div>
</div>
</nav>
@ -103,4 +119,4 @@
</body>
</html>
{{end}}
{{end}}

Loading…
Cancel
Save