|
|
|
|
|
|
|
|
|
body.dark-mode {
|
|
|
|
|
--bg: #282828;
|
|
|
|
|
--fg: #a6cc92;
|
|
|
|
|
/* --fg: #6eac4d; */
|
|
|
|
|
|
|
|
|
|
--bg-dark: hsl(10, 10%, 20%);
|
|
|
|
|
--bg-darker: hsl(10, 10%, 17%);
|
|
|
|
|
--bg-darker-2: #1d2021;
|
|
|
|
|
--bg-darker-3: #101111;
|
|
|
|
|
|
|
|
|
|
--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;
|
|
|
|
|
|
|
|
|
|
--text-input-bg: var(--bg-darker);
|
|
|
|
|
|
|
|
|
|
--bg-darker-2-1: #c8c8c8;
|
|
|
|
|
--accent-2-lighter: #5cc969;
|
|
|
|
|
--accent-2: #4eaa59;
|
|
|
|
|
--accent-2-darker: #2e974c;
|
|
|
|
|
--accent-2-darkest: #002d0d;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-mode button {
|
|
|
|
|
border: 1px solid var(--bg-darker-2);
|
|
|
|
|
background: var(--bg-darker);
|
|
|
|
|
color: #afafaf;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-mode button:hover {
|
|
|
|
|
background: var(--bg-dark);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-mode button.primary {
|
|
|
|
|
border: 1px solid #113a1c;
|
|
|
|
|
background: #1e6732;
|
|
|
|
|
color: #b7e3c3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-mode button.primary:hover {
|
|
|
|
|
background: #23773a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-mode nav .nav-logo img {
|
|
|
|
|
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dark-mode input[type] {
|
|
|
|
|
background: #4b4342;
|
|
|
|
|
}
|
