Is there a dark theme for TiddlyHost available or indevelopment?

#1

Title says it all, I was just curious because there is some css in the website from looking with the inspector for some support for it, and I am a fan of dark themes for things :smiley:

Clarification, I forgot to include “TiddlyHost” in the title and/or body, that is completely my bad!

#2

You could start with GitHub - dracula/tiddlywiki: 🧛🏻‍♂️ Dark theme for TiddlyWiki
À Nice theme.

1 Like
#3

There are several dark “themes” that are available by default in the TWCore.

Go to $:/ControlPanel > Appearance > Palette, and select any of the following:

  • Contrast (Dark)
  • Cupertino Dark
  • Gruvbox Dark
  • Nord
  • Solarized Dark
  • Spartan Night
  • Twilight

I’ve also created my own “dark theme”, here:

As well as some tools for selecting and constructing custom palettes:

  • TiddlyTools/Palettes/Chooser
    adds a TopLeftToolbar item for quickly switching between palettes
  • TiddlyTools/Palettes/Manager
    provides an improved $:/PaletteManager with extra features including:
    • “find matching classnames/colornames/colorvalues”
    • a “color map” for adjusting multiple palette entries at once
    • keyboard navigation (home,end,up,down,ctrl-up,ctrl-down,enter,escape)
    • undo (revert to previously saved palette color)
    • more compact layout
  • TiddlyTools/Settings/Colors/X11
    adds droplist support to TiddlyTools/Palettes/Manager for selecting colors by X11 Color Name (instead of entering RGB hex codes)
  • TiddlyTools/Palettes/Backgrounds and TiddlyTools/Stylesheet/Backgrounds
    adds support for assigning background images and extra styles to selected CSS classes/elements (e.g., .tc-body, .tc-tiddler-frame, pre, etc.)

enjoy,
-e

1 Like
#5

Apologies everybody, I should have clarified in the title, I had meant a dark theme for TiddlyHost, I tagged it but never meantioned that :sweat_smile:

#6

Actually yes, I have used the dracula theme, it’s pretty appealing, I like it a lot on VSCode

#7

For Tiddlyhost itself, I have an open issue for it, see #40.

1 Like
#8

Awesome! I hope it’s fairly straight forward for you to implement :smiley:

#9

In the meantime you could use an addon to apply a custom theme to tiddlyhost: Stylus :: add0n.com

EDIT: @Justin_H Here’s a quick and dirty dark mode I made for tiddlyhost using this plugin:

/* ==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 domain("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;
    }
    

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


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

image
image1893×429 33.2 KB

image
image1902×619 112 KB

#10

That looks pretty good, I did something similar by downloading a browser plugin called Dark Mode, and choosing Color inversion #5, which made it pretty suitable to look at.

DarkTWHost
DarkTWHost1920×1031 204 KB