website/public/theme-dark.css

body.dark-mode {
    --bg: #282828;
    --fg: #a6cc92;
    /* --fg: #6eac4d; */
    /* Magari questo: */
    /* --fg: #a3b09c; */

    --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);
    --text-input-readonly-bg: hsl(10, 10%, 22%);
    --text-input-readonly-fg: hsl(10, 10%, 40%);

    --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;
}

.dark-mode input[type='text']:read-only,
.dark-mode input[type='password']:read-only {
    background: var(--text-input-readonly-bg);
    color: var(--text-input-readonly-fg);
    box-shadow: 0 0 8px 0 #00000010;
}

.dark-mode input[type='text'].error,
.dark-mode input[type='password'].error {
    background: #633;
    color: #faa;
}

.dark-mode pre {
    background: var(--bg-darker);
    border: 1px solid var(--bg-darker-2);
}

/* Trick molto molto malvagio per non dover rendere il colorscheme dei blocchi di codice dinamici rispetto alla dark mode */
.dark-mode pre > code > span {
    filter: invert(1);
}

.dark-mode table td,
.dark-mode table th {
    border-color: var(--fg);
}