Dracula Icon

TiddlyWiki

Dracula Theme for TiddlyWiki

tiddlywiki - Theme Preview

§TiddlyWiki

§Install option 1: import palette

  1. Download sample/Dracula.tid file.
  2. Drag and drop the downloaded file into the TiddlyWiki, or use the Import button (under the Tools tab in the sidebar) and choose the file to import.
  3. Click Import.

§Install option 2: create palette yourself

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

alert-background: #bd93f9 alert-border: #bd93f9 alert-highlight: <<colour primary>> alert-muted-foreground: <<colour muted-foreground>> background: #282a36 blockquote-bar: <<colour muted-foreground>> button-background: <<colour page-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: #bd93f9 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>> foreground: #f8f8f2 highlight-background: #44475a highlight-foreground: #f1fa8c message-background: #bd93f9 message-border: #bd93f9 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>> muted-foreground: rgba(255,255,255,0.5) notification-background: #bd93f9 notification-border: #bd93f9 page-background: #282a36 pre-background: #343746 pre-border: <<colour page-background>> primary: #8be9fd 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 foreground>> sidebar-tab-background-selected: <<colour page-background>> sidebar-tab-background: transparent sidebar-tab-border-selected: #44475a sidebar-tab-border: #44475a sidebar-tab-divider: #44475a sidebar-tab-foreground-selected: <<colour primary>> sidebar-tab-foreground: <<colour muted-foreground>> sidebar-tiddler-link-foreground-hover: inherit sidebar-tiddler-link-foreground: <<colour muted-foreground>> site-title-foreground: <<colour foreground>> static-alert-foreground: <<colour foreground>> tab-background-selected: <<colour background>> tab-background: transparent tab-border-selected: #44475a tab-border: #44475a tab-divider: #44475a 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-background: #bd93f9 tag-foreground: <<colour foreground>> tiddler-background: <<colour background>> tiddler-border: #44475a 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: #44475a 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: untagged-background: #44475a very-muted-foreground: rgba(255,255,255,0.2)

§Activate palette

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