Dark mode CSS for Tiddlyhost about tiddlyhost HOT 5 CLOSED

    :root {
        --bs-light-rgb: var(--dark-background);
        --bs-secondary-color: var(--dark-foreground);
        --bs-body-color: var(--dark-foreground);

        /* $:/palettes/CupertinoDark */
        --dark-background: 40, 40, 40;
        --dark-foreground: white;
        --dark-link-foreground: #32D74B;
        --dark-link-foreground-visited: #BF5AF2;
        --dark-header-background: #111;
        --dark-table-header: #0a84ff;
        --dark-important-color: #FF9F0A;
        --dark-tag-foreground: black;
    }

    a:is(.btn,[class*="nav"]){
        background: transparent!important;
        color: var(--dark-foreground)!important;
    }

    a svg {
        --bs-body-color:var(--dark-foreground);
    }


    .bg-light *:not([class*="tag"] *) {
        background: var(--dark-background)!important;
        color: var(--dark-foreground)!important;
    }

    [class*="tag"] * {
        font-size: .7em!important;
        color: var(--dark-tag-foreground)!important;
    }


    .hub .site .name a,
    .sites-grid .site .name a {
        color: var(--dark-link-foreground)!important;
    }

    :is(.hub .site .name a, .sites-grid .site .name a):visited {
        color: var(--dark-link-foreground-visited)!important;
    }

    .navbar {
        background: var(--dark-header-background)!important;
    }

    .table.admin th,
    .table.sites th {
        --dark-foreground: var(--dark-table-header);
    }

    .create-buttons .bg-gradient:hover,
    .sites-menu-container .bg-gradient:hover {
        background: transparent!important;
    }

    table.sites td .sitelink a:hover {
        --dark-foreground: var(--dark-important-color);
    }

    /*     Other tweaks */
    table.sites td .sitelink a {
        text-decoration: none;
        font-weight: bold;
        font-size: medium;
    }