TiddlyWiki

Dracula

Dark theme for TiddlyWiki and 135+ apps

StarFork

TiddlyWiki Theme Preview

TiddlyWiki

Install manually

Open the Control Panel > Appereance > Palette, scroll down and clone a platte, rename it to Dracula and copy this code inside the editor:

background: #282a36
untagged-background: #6272a4
foreground: #f8f8f2
tiddler-border: #44475a
page-background: #282a36
primary: #8be9fd
tag-background: #bd93f9
muted-foreground: rgba(255,255,255,0.5)
alert-background: <<colour tag-background>>
alert-border: <<colour tag-background>>
alert-highlight: <<colour primary>>
alert-muted-foreground: <<colour muted-foreground>>
blockquote-bar: <<colour muted-foreground>>
button-background: <<colour tag-background>>
button-foreground: <<colour foreground>>
button-border: <<colour tag-background>>
code-background: <<colour page-background>>
code-border: <<colour page-background>>
code-foreground: <<colour muted-foreground>>
dirty-indicator: <<colour primary>>
download-background: <<colour tag-background>>
download-foreground: <<colour background>>
dragger-background: <<colour foreground>>
dragger-foreground: <<colour background>>
dropdown-background: <<colour background>>
dropdown-border: <<colour background>>
dropdown-tab-background-selected: <<colour background>>
dropdown-tab-background: <<colour background>>
dropzone-background: <<colour primary>>
external-link-background-hover: inherit
external-link-background-visited: inherit
external-link-background: inherit
external-link-foreground-hover: inherit
external-link-foreground-visited: <<colour tag-background>>
external-link-foreground: <<color primary>>
message-background: <<colour tag-background>>
message-border: <<colour tag-background>>
message-foreground: <<colour foreground>>
modal-backdrop: <<colour page-background>>
modal-background: <<colour background>>
modal-border: <<colour background>>
modal-footer-background: <<colour background>>
modal-footer-border: <<colour background>>
modal-header-border: <<colour muted-foreground>>
notification-background: <<colour tag-background>>
notification-border: <<colour tag-background>>
pre-background: <<colour page-background>>
pre-border: <<colour page-background>>
sidebar-button-foreground: <<colour foreground>>
sidebar-controls-foreground-hover: <<colour primary>>
sidebar-controls-foreground: <<colour muted-foreground>>
sidebar-foreground-shadow: transparent
sidebar-foreground: <<colour foreground>>
sidebar-muted-foreground-hover: <<colour primary>>
sidebar-muted-foreground: <<colour muted-foreground>>
sidebar-tab-background-selected: <<colour page-background>>
sidebar-tab-background: transparent
sidebar-tab-border-selected: <<colour tiddler-border>>
sidebar-tab-border: <<colour tiddler-border>>
sidebar-tab-divider: <<colour tiddler-border>>
sidebar-tab-foreground-selected: <<colour primary>>
sidebar-tab-foreground: <<colour foreground>>
sidebar-tiddler-link-foreground-hover: <<colour primary>>
sidebar-tiddler-link-foreground: <<colour primary>>
site-title-foreground: <<colour foreground>>
static-alert-foreground: <<colour foreground>>
tab-background-selected: <<colour background>>
tab-background: transparent
tab-border-selected: <<colour tiddler-border>>
tab-border: <<colour tiddler-border>>
tab-divider: <<colour tiddler-border>>
tab-foreground-selected: <<colour primary>>
tab-foreground: <<colour muted-foreground>>
table-border: <<colour page-background>>
table-footer-background: rgba(0, 0, 0, 0.1)
table-header-background: rgba(0, 0, 0, 0.2)
tag-foreground: <<colour foreground>>
tiddler-background: <<colour background>>
tiddler-controls-foreground-hover: inherit
tiddler-controls-foreground-selected: <<colour foreground>>
tiddler-controls-foreground: <<colour forground>>
tiddler-editor-background: <<colour background>>
tiddler-editor-border-image: <<colour background>>
tiddler-editor-border: rgba(255,255,255,0.1)
tiddler-editor-fields-even: <<colour tiddler-border>>
tiddler-editor-fields-odd: <<colour page-background>>
tiddler-info-background: <<colour background>>
tiddler-info-border: <<colour page-background>>
tiddler-info-tab-background: <<colour background>>
tiddler-link-background: <<colour background>>
tiddler-link-foreground: <<colour primary>>
tiddler-subtitle-foreground: <<colour muted-foreground>>
tiddler-title-foreground: <<colour primary>>
toolbar-new-button:
toolbar-options-button:
toolbar-save-button:
toolbar-info-button:
toolbar-edit-button:
toolbar-close-button:
toolbar-delete-button:
toolbar-cancel-button:
toolbar-done-button:
very-muted-foreground: rgba(255,255,255,0.2)

Activating theme

  1. Open the Control Panel > Appereance > Palette
  2. Scroll down and select Dracula
  3. Boom! It's working

Stay up to date

Receive updates about this theme and more about Dracula.

Contributors

This theme wouldn't exist without these people. Wanna help too? Check the repository on GitHub.

  • SlyBouhafs
  • zenorocha

Made with by Zeno Rocha
under MIT license