Dark mode CSS for Tiddlyhost

[simonbaird]

No description provided.

[simonbaird]

There's support in Bootstrap now IIUC, so perhaps it's fairly easy to enable.

https://getbootstrap.com/docs/5.3/customize/color-modes/

[Telumire]

Thanks a lot for adding a dark mode ! I prefer to have more contrast so I made my own (using the stylus browser addon):

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

It could be a cool feature to allow user to set their own theme / pick a theme from a community list of theme, but I don't know how hard it would be to do ..

[simonbaird]

Nice, thanks for sharing. Yeah, a theme selector would be fun.

[simonbaird]

I might rework the tag colors, I think yours look better.

[simonbaird]

f0519d0 & 94e2dc8 mainly.