tiddlyhost.com - telumire's darkmode by telumire

/* ==UserStyle==
@name           tiddlyhost.com - 1/13/2023, 4:15:26 PM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document url-prefix("tiddlyhost.com") {

    :root {
        --bs-light-rgb: var(--dark-background);
        --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;
    }


    .btn-light {
        --bs-btn-bg: transparent;
        color: var(--dark-foreground);
    }

    svg {
        fill: 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;
    }

    .bg-light header {
        --dark-background: var(--dark-header-background);
    }

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