From 7175f1cbf1f9966d718b99f294425f17b8a31ac9 Mon Sep 17 00:00:00 2001 From: Jermolene Date: Wed, 27 Nov 2013 12:38:03 +0000 Subject: [PATCH] Split a basic Vanilla theme out of Snow White And add a new Night-Time theme for the /dev wiki. The idea is that the Vanilla theme will make a more convenient base for retheming. --- core/modules/themes.js | 2 +- editions/dev/tiddlers/system/theme.tid | 3 + editions/dev/tiddlywiki.info | 3 +- .../tw5.com/tiddlers/Release 5.0.0alpha16.tid | 2 + .../tiddlers/concepts/DataTiddlers.tid | 2 +- .../tw5.com/tiddlers/system/save-empty.tid | 2 +- editions/tw5.com/tiddlers/system/theme.tid | 3 + .../tiddlers/talkytalky/TalkyTalky.tid | 2 +- editions/tw5.com/tiddlywiki.info | 1 + readme.md | 2 +- themes/tiddlywiki/nighttime/base.tid | 8 + themes/tiddlywiki/nighttime/plugin.info | 9 + themes/tiddlywiki/snowwhite/ThemeTweaks.tid | 40 - themes/tiddlywiki/snowwhite/base.tid | 859 ---------------- .../tiddlywiki/snowwhite/colourmappings.tid | 10 - themes/tiddlywiki/snowwhite/plugin.info | 3 +- themes/tiddlywiki/vanilla/ThemeTweaks.tid | 40 + themes/tiddlywiki/vanilla/base.tid | 923 ++++++++++++++++++ themes/tiddlywiki/vanilla/colourmappings.tid | 10 + .../{snowwhite => vanilla}/colours.tid | 2 +- .../{snowwhite => vanilla}/metrics.tid | 2 +- themes/tiddlywiki/vanilla/plugin.info | 8 + .../{snowwhite => vanilla}/reset.tid | 2 +- .../{snowwhite => vanilla}/settings.tid | 2 +- 24 files changed, 1020 insertions(+), 920 deletions(-) create mode 100644 editions/dev/tiddlers/system/theme.tid create mode 100644 editions/tw5.com/tiddlers/system/theme.tid create mode 100644 themes/tiddlywiki/nighttime/base.tid create mode 100644 themes/tiddlywiki/nighttime/plugin.info delete mode 100644 themes/tiddlywiki/snowwhite/ThemeTweaks.tid delete mode 100644 themes/tiddlywiki/snowwhite/colourmappings.tid create mode 100644 themes/tiddlywiki/vanilla/ThemeTweaks.tid create mode 100644 themes/tiddlywiki/vanilla/base.tid create mode 100644 themes/tiddlywiki/vanilla/colourmappings.tid rename themes/tiddlywiki/{snowwhite => vanilla}/colours.tid (74%) rename themes/tiddlywiki/{snowwhite => vanilla}/metrics.tid (78%) create mode 100644 themes/tiddlywiki/vanilla/plugin.info rename themes/tiddlywiki/{snowwhite => vanilla}/reset.tid (99%) rename themes/tiddlywiki/{snowwhite => vanilla}/settings.tid (71%) diff --git a/core/modules/themes.js b/core/modules/themes.js index e9400ecba..15c8b000a 100644 --- a/core/modules/themes.js +++ b/core/modules/themes.js @@ -13,7 +13,7 @@ Manages themes and styling. "use strict"; var THEME_PLUGIN_TITLE = "$:/theme", // This tiddler contains the title of the current theme plugin - DEFAULT_THEME_PLUGIN = "$:/themes/tiddlywiki/snowwhite"; + DEFAULT_THEME_PLUGIN = "$:/themes/tiddlywiki/vanilla"; function ThemeManager(wiki) { this.wiki = wiki; diff --git a/editions/dev/tiddlers/system/theme.tid b/editions/dev/tiddlers/system/theme.tid new file mode 100644 index 000000000..679b32310 --- /dev/null +++ b/editions/dev/tiddlers/system/theme.tid @@ -0,0 +1,3 @@ +title: $:/theme + +$:/themes/tiddlywiki/nighttime \ No newline at end of file diff --git a/editions/dev/tiddlywiki.info b/editions/dev/tiddlywiki.info index 7ed409b16..dadd4ab1c 100644 --- a/editions/dev/tiddlywiki.info +++ b/editions/dev/tiddlywiki.info @@ -5,7 +5,8 @@ "tiddlywiki/github-fork-ribbon" ], "themes": [ - "tiddlywiki/snowwhite" + "tiddlywiki/nighttime", + "tiddlywiki/vanilla" ], "includeWikis": [ "../tw5.com" diff --git a/editions/tw5.com/tiddlers/Release 5.0.0alpha16.tid b/editions/tw5.com/tiddlers/Release 5.0.0alpha16.tid index 05529caa4..442b98b1f 100644 --- a/editions/tw5.com/tiddlers/Release 5.0.0alpha16.tid +++ b/editions/tw5.com/tiddlers/Release 5.0.0alpha16.tid @@ -13,6 +13,8 @@ tags: releasenote !! Improvements +* Separated developer content into new wiki at http://five.tiddlywiki.com/dev/ +* Split ''Snow White'' theme into a base ''Vanilla'' theme with all the basic formatting, leaving the decorative bits to ''Snow White'' * The page building blocks are now driven by the system tag `$:/tags/PageTemplate` ** [[$:/TopSideBar]] and [[$:/LeftSideBar]] are no longer specially treated; use the new tag instead * Fixed problem that prevented tag configured items from shadow tiddlers interleaving with items from ordinary tiddlers diff --git a/editions/tw5.com/tiddlers/concepts/DataTiddlers.tid b/editions/tw5.com/tiddlers/concepts/DataTiddlers.tid index 6f9623af1..bd685207f 100644 --- a/editions/tw5.com/tiddlers/concepts/DataTiddlers.tid +++ b/editions/tw5.com/tiddlers/concepts/DataTiddlers.tid @@ -27,7 +27,7 @@ The tiddler dictionary format is an alternative syntax for data tiddlers: * The ContentType field `type` is set to `application/x-tiddler-dictionary` * The `text` field consists of one or more lines of the form `:` -For example, the [[metrics of the Snow White theme|$:/themes/tiddlywiki/snowwhite/metrics]] are a tiddler dictionary. +For example, the [[metrics of the Vanilla theme|$:/themes/tiddlywiki/vanilla/metrics]] are a tiddler dictionary. ! Accessing data within data tiddlers diff --git a/editions/tw5.com/tiddlers/system/save-empty.tid b/editions/tw5.com/tiddlers/system/save-empty.tid index 21f61d3b4..e2db30ae3 100644 --- a/editions/tw5.com/tiddlers/system/save-empty.tid +++ b/editions/tw5.com/tiddlers/system/save-empty.tid @@ -1,6 +1,6 @@ title: $:/editions/tw5.com/save-empty \define saveTiddlerFilter() -[[$:/core]] [[$:/isEncrypted]] [[$:/plugins/tiddlywiki/fullscreen]] [[$:/themes/tiddlywiki/snowwhite]] -[type[text/css]] -[type[application/javascript]has[module-type]] -[type[application/javascript]library[yes]] -[[$:/boot/boot.js]] -[[$:/boot/bootprefix.js]] +[sort[title]] +[[$:/core]] [[$:/isEncrypted]] [[$:/plugins/tiddlywiki/fullscreen]] [[$:/themes/tiddlywiki/snowwhite]] [[$:/themes/tiddlywiki/vanilla]] -[type[text/css]] -[type[application/javascript]has[module-type]] -[type[application/javascript]library[yes]] -[[$:/boot/boot.js]] -[[$:/boot/bootprefix.js]] +[sort[title]] \end {{$:/core/templates/tiddlywiki5.html}} diff --git a/editions/tw5.com/tiddlers/system/theme.tid b/editions/tw5.com/tiddlers/system/theme.tid new file mode 100644 index 000000000..58690c397 --- /dev/null +++ b/editions/tw5.com/tiddlers/system/theme.tid @@ -0,0 +1,3 @@ +title: $:/theme + +$:/themes/tiddlywiki/snowwhite \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/talkytalky/TalkyTalky.tid b/editions/tw5.com/tiddlers/talkytalky/TalkyTalky.tid index 27e780137..3fbb729fb 100644 --- a/editions/tw5.com/tiddlers/talkytalky/TalkyTalky.tid +++ b/editions/tw5.com/tiddlers/talkytalky/TalkyTalky.tid @@ -28,7 +28,7 @@ Store your tiddlers in a single HTML file along with the JS # Create tiddlers, show links, missing, orphans, tags, tagging, references # Use missing tiddlers to find a typo # Show shadow tiddlers and system tiddlers -# Show stylesheet handling - [[$:/themes/tiddlywiki/snowwhite/base]] +# Show stylesheet handling - [[$:/themes/tiddlywiki/vanilla/base]] # Drag an image from the file system # Use the image in a tiddler # Edit the image diff --git a/editions/tw5.com/tiddlywiki.info b/editions/tw5.com/tiddlywiki.info index 00c423503..ddc5123a2 100644 --- a/editions/tw5.com/tiddlywiki.info +++ b/editions/tw5.com/tiddlywiki.info @@ -5,6 +5,7 @@ "tiddlywiki/github-fork-ribbon" ], "themes": [ + "tiddlywiki/vanilla", "tiddlywiki/snowwhite", "tiddlywiki/starlight", "tiddlywiki/stickytitles", diff --git a/readme.md b/readme.md index 44a038f71..06c71d9b5 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,4 @@ -

Welcome to TiddlyWiki5

This is the developer documentation hub for TiddlyWiki. This site contains all of the end user documentation that appears at http://five.tiddlywiki.com/.

Overview

Developer Cookbooks

Using TiddlyWiki for GitHub Pages project documentation

Internal Objects and Mechanisms

BootMechanism
DraftMechanism
EncryptionMechanism
LazyLoadingMechanism
ParsingMechanism
PluginMechanism
RenderingMechanism

Getting started with TiddlyWiki under Node.js

TiddlyWiki5 can be used on the command line to perform an extensive set of operations based on tiddlers, TiddlyWikiFolders, TiddlerFiles and TiddlyWikiFiles. For example, the following command loads the tiddlers from a TiddlyWiki HTML file and then saves one of them in HTML:

node tiddlywiki.js --verbose --load mywiki.html --rendertiddler ReadMe ./readme.html

In order to use TiddlyWiki5 on the command line you must first install node.js from http://nodejs.org/

Usage

Running tiddlywiki.js from the command line boots the TiddlyWiki kernel, loads the core plugins and establishes an empty wiki store. It then sequentially processes the command line arguments from left to right. The arguments are separated with spaces.

The first argument is the optional path to the TiddlyWikiFolder to be loaded. If not present, then the current directory is used.

The commands and their individual arguments follow, each command being identified by the prefix --.

node tiddlywiki.js [<wikipath>] [--<command> [<arg>[,<arg>]]]

Script Files

For trying TiddlyWiki5 out under Node.js, several scripts are provided (.sh for *nix and .cmd for Windows):

bld: builds tw5.com

This script builds several variants of TiddlyWiki5 for deployment on tiddlywiki.com.

By default, files are output to a folder called jermolene.github.com, sibling to the TiddlyWiki5 source directory. For example:

/TiddlyWork/ - Directory for working with TiddlyWiki5
+
Welcome to TiddlyWiki5
This is the developer documentation hub for TiddlyWiki. For convenience, it also contains all of the end user documentation that appears at http://five.tiddlywiki.com/.
Overview
Developer Cookbooks
Using TiddlyWiki for GitHub Pages project documentation
Internal Objects and Mechanisms
BootMechanism
DraftMechanism
EncryptionMechanism
LazyLoadingMechanism
ParsingMechanism
PluginMechanism
RenderingMechanism
Getting started with TiddlyWiki under Node.js
TiddlyWiki5 can be used on the command line to perform an extensive set of operations based on tiddlers, TiddlyWikiFolders, TiddlerFiles and TiddlyWikiFiles. For example, the following command loads the tiddlers from a TiddlyWiki HTML file and then saves one of them in HTML:
node tiddlywiki.js --verbose --load mywiki.html --rendertiddler ReadMe ./readme.html
In order to use TiddlyWiki5 on the command line you must first install node.js from http://nodejs.org/
Usage
Running tiddlywiki.js from the command line boots the TiddlyWiki kernel, loads the core plugins and establishes an empty wiki store. It then sequentially processes the command line arguments from left to right. The arguments are separated with spaces.
The first argument is the optional path to the TiddlyWikiFolder to be loaded. If not present, then the current directory is used.
The commands and their individual arguments follow, each command being identified by the prefix --.
node tiddlywiki.js [<wikipath>] [--<command> [<arg>[,<arg>]]]
Script Files
For trying TiddlyWiki5 out under Node.js, several scripts are provided (.sh for *nix and .cmd for Windows):
bld: builds tw5.com
This script builds several variants of TiddlyWiki5 for deployment on tiddlywiki.com.
By default, files are output to a folder called jermolene.github.com, sibling to the TiddlyWiki5 source directory. For example:
/TiddlyWork/ - Directory for working with TiddlyWiki5
 	/TiddlyWiki5/ - Directory containing the TiddlyWiki5 repo from GitHub
 	/jermolene.github.com/ - Directory for output files
You can override the build output directory by defining the environment variable TW5_BUILD_OUTPUT. The easiest way to do this is to create a personal batch file to invoke TiddlyWiki5 that first sets the environment variable and then invokes bld.
The files output by bld are:
  • readme.md main readme file, output to the TiddlyWiki5 directory
  • index.html TiddlyWiki5 standalone HTML file with content from the tw5.com edition
  • empty.html TiddlyWiki5 standalone HTML file with no content
  • encrypted.html TiddlyWiki5 standalone HTML file encrypted with the password password
  • test.html TiddlyWiki5 browser-based test suite (see TestingMechanism)
  • static.html static HTML version of the DefaultTiddlers of the tw5.com edition
  • static/*.html and static/static.css static HTML versions of individual tiddlers
bld also runs the TiddlyWiki5 Node.js-based test suite (see TestingMechanism)
serve.sh <username> or serve.cmd <username>: serves tw5.com
This script starts TiddlyWiki5 running as an HTTP server with the content from the clientserver edition. By default, the Node.js serves on port 8080. If the optional username parameter is provided, it is used for signing edits.
To experiment with this configuration, run the script and then visit http://0.0.0.0:8080 in a browser.
Changes made in the browser propagate to the server over HTTP (use the browser developer console to see these requests). The server then syncs changes to the file system (and logs each change to the screen).
wbld: builds TiddlyWiki5 for TiddlyWeb
This script builds and deploys the code for TiddlyWiki5 in the Sky for TiddlyWeb. If you want to experiment with your own builds of TiddlyWiki5 for TiddlyWeb you could use this batch file as a base.
2bld: builds TiddlyWiki 2.6.5
This script builds TiddlyWiki 2.6.5 from the original source and then displays the differences between them (diff is used for *nix, fc for Windows).
Commands
The following commands are available:
LoadCommand
Load tiddlers from 2.x.x TiddlyWiki files (.html), .tiddler, .tid, .json or other files 
--load <filepath>
PasswordCommand
Set a password for subsequent crypto operations
--password <password>
PrintCommand
The print command outputs specified information. 
print tiddlers
Output the titles of the tiddlers in the wiki store
--print tiddlers
print tiddler
Print the fields of an individual tiddler 
--print tiddler <title>
print system
Print the titles of the system tiddlers in the wiki store 
--print system
print config
Print the current core configuration 
--print config
RenderTiddlerCommand
Render an individual tiddler as a specified ContentType, defaults to text/html and save it to the specified filename 
--rendertiddler <title> <filename> [<type>]
RenderTiddlersCommand
Render a set of tiddlers matching a filter to separate files of a specified ContentType (defaults to text/html) and extension (defaults to .html).
--rendertiddlers <filter> <template> <pathname> [<type>] [<extension>]
For example:
--rendertiddlers [!is[system]] $:/core/templates/static.tiddler.html ./static text/plain
ServerCommand
The server built in to TiddlyWiki5 is very simple. Although compatible with TiddlyWeb it doesn't support many of the features needed for robust Internet-facing usage - in particular, TiddlyWiki5 is an old-school wiki in the sense that it offers no authentication.
At the root, it serves a rendering of a specified tiddler. Away from the root, it serves individual tiddlers encoded in JSON, and supports the basic HTTP operations for GET, PUT and DELETE.
--server <port> <roottiddler> <rendertype> <servetype> <username>
The parameters are:
  • port - port number to serve from (defaults to "8080")
  • roottiddler - the tiddler to serve at the root (defaults to "$:/core/tiddlywiki5.template.html") 
  • rendertype - the content type to which the root tiddler should be rendered (defaults to "text/plain")
  • servetype - the content type with which the root tiddler should be served (defaults to "text/html")
  • username - the default username for signing edits
For example:
--server 8080 $:/core/tiddlywiki5.template.html text/plain text/html MyUserName
VerboseCommand
Triggers verbose output, useful for debugging 
--verbose
VersionCommand
Displays the version number of TiddlyWiki.
--version
This readme file was automatically generated by TiddlyWiki5
 

\ No newline at end of file
diff --git a/themes/tiddlywiki/nighttime/base.tid b/themes/tiddlywiki/nighttime/base.tid
new file mode 100644
index 000000000..71c25738b
--- /dev/null
+++ b/themes/tiddlywiki/nighttime/base.tid
@@ -0,0 +1,8 @@
+title: $:/themes/tiddlywiki/nighttime/base
+tags: [[$:/tags/stylesheet]]
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
+
+html body.tw-body {
+	background-color: #5C5D8E;
+}
diff --git a/themes/tiddlywiki/nighttime/plugin.info b/themes/tiddlywiki/nighttime/plugin.info
new file mode 100644
index 000000000..50b5824d1
--- /dev/null
+++ b/themes/tiddlywiki/nighttime/plugin.info
@@ -0,0 +1,9 @@
+{
+	"title": "$:/themes/tiddlywiki/nighttime",
+	"name": "Night-time",
+	"author": "JeremyRuston",
+	"core-version": ">=5.0.0",
+	"plugin-type": "theme",
+	"description": "A darker theme",
+	"dependents": ["$:/themes/tiddlywiki/vanilla"]
+}
diff --git a/themes/tiddlywiki/snowwhite/ThemeTweaks.tid b/themes/tiddlywiki/snowwhite/ThemeTweaks.tid
deleted file mode 100644
index cb51d2d75..000000000
--- a/themes/tiddlywiki/snowwhite/ThemeTweaks.tid
+++ /dev/null
@@ -1,40 +0,0 @@
-title: $:/themes/tiddlywiki/snowwhite/themetweaks
-tags: $:/tags/ControlPanel
-caption: Theme Tweaks
-
-You can tweak certain aspects of the ''Snow White'' theme.
-
-//Currently, you need to toggle to a different theme and back (or save and restart TiddlyWiki) before these changes take effect. Also take care to preserve any backticks (`) in the settings//
-
-! Colours
-
-* Primary colour: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colours" index="primary" default="" tag="input" type="color"/>
-* Background colour: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colours" index="background" default="" tag="input" type="color"/>
-* Foreground colour: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colours" index="foreground" default="" tag="input" type="color"/>
-* Page background colour: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colours" index="pagebackground" default="" tag="input" type="color"/>
-* Medium contrast color: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colours" index="medium" default="" tag="input" type="color"/>
-
-! Colour mappings
-
-* Tiddler background colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colourmappings" index="tiddlerbackground" default="" tag="input"/>
-* Tiddler foreground colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colourmappings" index="foreground" default="" tag="input"/>
-* Page background colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colourmappings" index="pagebackground" default="" tag="input"/>
-* Link background colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colourmappings" index="linkbackground" default="" tag="input"/>
-* Link foreground colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colourmappings" index="linkforeground" default="" tag="input"/>
-* Dropdown background colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colourmappings" index="dropdownbackground" default="" tag="input"/>
-* Dropdown border colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/colourmappings" index="dropdownborder" default="" tag="input"/>
-
-! Settings
-
-* Font family: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/settings" index="fontfamily" default="" tag="input"/>
-
-! Sizes
-
-* Font size: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/metrics" index="fontsize" default="" tag="input"/>
-* Line height: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/metrics" index="lineheight" default="" tag="input"/>
-* Story left position //(the distance between the left of the screen and the left margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/metrics" index="storyleft" default="" tag="input"/>
-* Story top position //(the distance between the top of the screen ad the top margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/metrics" index="storytop" default="" tag="input"/>
-* Story right //(the distance between the left side of the screen and the left margin of the sidebar area)//: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/metrics" index="storyright" default="" tag="input"/>
-* Story width //(the width of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/metrics" index="storywidth" default="" tag="input"/>
-* Tiddler width //(the width of individual tiddlers -- used for zoomin storyview)//: <$edit-text tiddler="$:/themes/tiddlywiki/snowwhite/metrics" index="tiddlerwidth" default="" tag="input"/>
-
diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid
index 377250531..bdba7f0bb 100644
--- a/themes/tiddlywiki/snowwhite/base.tid
+++ b/themes/tiddlywiki/snowwhite/base.tid
@@ -47,417 +47,18 @@ background-image: -ms-linear-gradient($gradient$);
 ```
 \end
 
-/*
-** Start with the normalize CSS reset, and then belay some of its effects
-*/
-
-{{$:/themes/tiddlywiki/snowwhite/reset}}
-
-*, input[type="search"] {
-	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-}
-
-/*
-** Basic element styles
-*/
-
-html {
-	font-family: {{$:/themes/tiddlywiki/snowwhite/settings##fontfamily}};
-}
-
-body.tw-body {
-	font-size: {{$:/themes/tiddlywiki/snowwhite/metrics##fontsize}};
-	line-height: {{$:/themes/tiddlywiki/snowwhite/metrics##lineheight}};
-	color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##foreground}};
-	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##pagebackground}};
-	word-wrap: break-word;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	line-height: 1em;
-	font-weight: 300;
-}
-
-pre {
-	display: block;
-	padding: 14px;
-	margin: 0 0 14px;
-	word-break: normal;
-	word-wrap: break-word;
-	white-space: pre;
-	white-space: pre-wrap;
-	background-color: #f5f5f5;
-	border: 1px solid #ccc;
-	padding: 0 3px 2px;
-	<>
-}
-
-code {
-	color: #d14;
-	background-color: #f7f7f9;
-	border: 1px solid #e1e1e8;
-    white-space: pre-wrap;
-	padding: 0 3px 2px;
-	<>
-}
-
-/*
-Markdown likes putting code elements inside pre elements
-*/
-pre > code {
-	padding: 0;
-	border: none;
-	background-color: inherit;
-	color: inherit;
-}
-
-table {
-	border: 1px solid #ddd;
-	width: auto;
-	max-width: 100%;
-	caption-side: bottom;
-}
-
-table th, table td {
-	padding: 0 7px 0 7px;
-	border-top: 1px solid #ddd;
-	border-left: 1px solid #ddd;
-}
-
-table thead tr td, table th {
-	background-color: #f0f0f0;
-	font-weight: bold;
-}
-
-table tfoot tr td {
-	background-color: #a8a8a8;
-}
-
-.tw-tiddler-frame img, .tw-tiddler-frame svg, .tw-tiddler-frame canvas, .tw-tiddler-frame embed {
-	max-width: 100%;
-}
-
-.tw-tiddler-frame embed {
-	width: 100%;
-	height: 600px;
-}
-
-/*
-** Links
-*/
-
-a.tw-tiddlylink {
-	text-decoration: none;
-	font-weight: normal;
-	color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}};
-	-webkit-user-select: inherit; /* Otherwise the draggable attribute makes links impossible to select */
-}
-
-.tw-sidebar-lists a.tw-tiddlylink {
-	color: #999;
-}
-
-.tw-sidebar-lists a.tw-tiddlylink:hover {
-	color: #444;
-}
-
-a.tw-tiddlylink:hover {
-	text-decoration: underline;
-}
-
-a.tw-tiddlylink-resolves {
-}
-
-a.tw-tiddlylink-shadow {
-	font-weight: bold;
-}
-
-a.tw-tiddlylink-shadow.tw-tiddlylink-resolves {
-	font-weight: normal;
-}
-
-a.tw-tiddlylink-missing {
-	font-style: italic;
-}
-
-a.tw-tiddlylink-external {
-	text-decoration: underline;
-}
-
-/*
-** Drag and drop styles
-*/
-
-.tw-tiddler-dragger {
-	position: relative;
-	z-index: -10000;
-}
-
-.tw-tiddler-dragger-inner {
-	position: absolute;
-	display: inline-block;
-	padding: 8px 20px;
-	font-size: 16.9px;
-	font-weight: bold;
-	line-height: 20px;
-	color: #fff;
-	text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
-	white-space: nowrap;
-	vertical-align: baseline;
-	background-color: #000;
-	<>
-}
-
-.tw-tiddler-dragger-cover {
-	position: absolute;
-	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##pagebackground}};
-}
-
-.tw-dropzone {
-	position: relative;
-}
-
-.tw-dropzone.tw-dragover:before {
-	z-index: 10000;
-	display: block;
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	background: rgba(0,200,0,0.7);
-	text-align: center;
-	content: "Drop here";
-}
-
-/*
-** Buttons
-*/
-
-.btn-invisible {
-	padding: 0;
-	margin: 0;
-	background: none;
-	border: none;
-}
-
-.btn-big-green {
-	padding: 8px;
-	margin: 8px;
-	background: #34C734;
-	color: #fff;
-	fill: #fff;
-	border: none;
-	font-size: 1.2em;
-	line-height: 1.4em;
-}
-
-.btn-mini {
-	color: #e0e0e0;
-}
-
-.btn-mini:hover {
-	color: #444;
-}
-
-/*
-** Tags and missing tiddlers
-*/
-
-.tw-tag-list-item {
-	display: inline-block;
-	margin-right: 7px;
-}
-
-.tw-tags-wrapper {
-	margin: 4px 0 14px 0;
-}
-
-.tw-missing-tiddler-label {
-	font-style: italic;
-	font-weight: normal;
-	display: inline-block;
-	font-size: 11.844px;
-	line-height: 14px;
-	white-space: nowrap;
-	vertical-align: baseline;
-}
-
-.tw-tag-label {
-	display: inline-block;
-	padding: 2px 9px;
-	font-size: 0.9em;
-	font-weight: 300;
-	line-height: 1.2em;
-	color: #fff;
-	white-space: nowrap;
-	vertical-align: baseline;
-	background-color: #D5AD34;
-	<>
-}
-
-.tw-untagged-label {
-	background-color: #999;
-}
-
-.tw-tag-label svg {
-	height: 1em;
-	width: 1em;
-	fill: #fff;
-}
-
-/*
-** Page layout
-*/
-
 .sidebar-header {
-	color: #acacac;
 	text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
 }
 
-.sidebar-header .title a.tw-tiddlylink-resolves {
-	font-weight: 300;
-}
-
-.sidebar-header .tw-sidebar-lists p {
-	margin-top: 3px;
-	margin-bottom: 3px;
-}
-
-.tw-search a svg {
-	height: 0.75em;
-}
-
-.tw-search-results {
-	padding-top: 14px;
-}
-
-.tw-page-controls {
-	margin-top: 14px;
-}
-
-.tw-page-controls a.tw-tiddlylink:hover {
-	text-decoration: none;
-}
-
 .tw-page-controls svg {
-	height: 1.75em;
-	min-width: 1px;
-	padding-right: 0.5em;
-	fill: #fff;
 	<>
 }
 
-.tw-page-controls svg:hover {
-	fill: #000;
-}
-
-.tw-menu-list-item {
-	white-space: nowrap;
-}
-
-.tw-menu-list-count {
-	font-weight: bold;
-}
-
-.tw-open-tiddler-list {
-	<>
-}
-
-.tw-menu-list-subitem {
-	padding-left: 7px;
-}
-
-.story-river {
-	position: relative;
-}
-
-.tw-story-spacer {
-	position: absolute;
-	min-height: 100%;
-}
-
-@media (max-width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}}) {
-	.sidebar-header {
-		padding: 14px;
-	}
-
-	.story-river {
-		position: relative;
-		padding: 0;
-	}
-}
-
-@media (min-width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}}) {
-	.sidebar-header {
-		position: fixed;
-		top: {{$:/themes/tiddlywiki/snowwhite/metrics##storytop}};
-		left: {{$:/themes/tiddlywiki/snowwhite/metrics##storyright}};
-		bottom: 0;
-		right: 0;
-		overflow-y: auto;
-		overflow-x: auto;
-		-webkit-overflow-scrolling: touch;
-		margin: 0 0 0 -42px;
-		padding: 70px 0 28px 42px;
-	}
-
-	.story-river {
-		position: relative;
-		left: {{$:/themes/tiddlywiki/snowwhite/metrics##storyleft}};
-		top: {{$:/themes/tiddlywiki/snowwhite/metrics##storytop}};
-		width: {{$:/themes/tiddlywiki/snowwhite/metrics##storywidth}};
-		padding: 56px 42px 42px 42px;
-	}
-}
-
-@media print {
-	.sidebar-header {
-		display: none;
-	}
-
-	.story-river {
-		margin-left: 14px;
-	}
-}
-
-/*
-** Tiddler styles
-*/
-
-.tw-tiddler-frame {
-	width: {{$:/themes/tiddlywiki/snowwhite/metrics##tiddlerwidth}};
-	margin-bottom: 28px;
-	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##tiddlerbackground}};
-}
-
 .tw-tiddler-info {
-	padding: 14px 42px 14px 42px;
-	background-color: #f8f8f8;
-	border-top: 1px solid #ddd;
-	border-bottom: 1px solid #ddd;
 	<>
 }
 
-.tw-tiddler-info .tw-tab-buttons button.tw-tab-selected {
-	background-color: #f8f8f8;
-	border-bottom: 1px solid #f8f8f8;
-}
-
-.tw-view-field-table {
-	width: 100%;
-}
-
-.tw-view-field-name {
-	width: 1%; /* Makes this column be as narrow as possible */
-	text-align: right;
-	font-style: italic;
-}
-
-.tw-view-field-value {
-}
-
 @media screen {
 	.tw-tiddler-frame {
 		<>
@@ -466,520 +67,60 @@ a.tw-tiddlylink-external {
 
 @media (max-width: 770px) {
 	.tw-tiddler-frame {
-		padding: 14px 14px 14px 14px;
 		<>
 	}
-
-	.tw-tiddler-info {
-		margin: 0 -14px 0 -14px;
-	}
-}
-
-@media (min-width: 770px) {
-	.tw-tiddler-frame {
-		padding: 28px 42px 42px 42px;
-	}
-
-	.tw-tiddler-info {
-		margin: 0 -42px 0 -42px;
-	}
-}
-
-.titlebar {
-	font-weight: 300;
-	font-size: 2.35em;
-	line-height: 1.2em;
-	color: #182955;
-}
-
-.titlebar img {
-	height: 1em;
-}
-
-.tw-subtitle {
-	font-size: 0.9em;
-	color: #c0c0c0;
-	font-weight: 300;
-}
-
-.tw-tiddler-missing .title {
-  font-style: italic;
-  font-weight: normal;
-}
-
-.tw-tiddler-frame .tw-tiddler-controls {
-	float: right;
-}
-
-.tw-tiddler-controls button {
-	margin: 0 0 0 5px;
-	vertical-align: baseline;
 }
 
 .tw-tiddler-controls button svg {
-	height: 0.75em;
-	fill: #ccc;
 	<>
 }
 
 .tw-tiddler-controls button.tw-selected svg {
-	fill: #444;
 	<>
 }
 
-.tw-tiddler-controls svg:hover {
-	fill: #888;
-}
-
-@media print {
-	.tw-tiddler-controls {
-		display: none;
-	}
-}
-
-.tw-tiddler-help { /* Help prompts within tiddler template */
-	color: #999;
-	margin-top: 14px;
-}
-
-.tw-tiddler-help a.tw-tiddlylink {
-	color: #888888;
-}
-
-.tw-tiddler-frame input.tw-edit-texteditor, .tw-tiddler-frame textarea.tw-edit-texteditor {
-	width: 100%;
-	padding: 3px 3px 3px 3px;
-	border: 1px solid #ccc;
-	line-height: 1.3em;
-	-webkit-appearance: none;
-	margin: 4px 0 4px 0;
-}
-
 .tw-tiddler-frame input.tw-edit-texteditor {
-	background-color: #f8f8f8;
 	<>
 }
 
 canvas.tw-edit-bitmapeditor  {
-	border: 6px solid #fff;
-	cursor: crosshair;
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
 	<>
-	margin-top: 6px;
-	margin-bottom: 6px;
-}
-
-.tw-edit-bitmapeditor-width {
-	display: block;
-}
-
-.tw-edit-bitmapeditor-height {
-	display: block;
-}
-
-/*
-** Tiddler edit mode
-*/
-
-.tw-tiddler-edit-frame em {
-	color: #999;
-	font-style: normal;
-}
-
-.tw-edit-type-dropdown a.tw-tiddlylink-missing {
-	font-style: normal;
-}
-
-.tw-edit-tags-list {
-	margin: 14px 0 14px 0;
-}
-
-.tw-tag-editor-label {
-	display: inline-block;
-	margin-right: 7px;
-}
-
-.tw-remove-tag-button {
-	padding-left: 4px;
-}
-
-.tw-add-tag-name {
-	display: inline-block;
-	width: 15%;
-}
-
-.tw-tiddler-preview {
-	overflow: auto;
-}
-
-.tw-tiddler-preview-preview {
-	float: right;
-	width: 48%;
-	border: 1px solid #ccc;
-	margin: 4px 3px 3px 3px;
-	padding: 3px 3px 3px 3px;
-}
-
-.tw-tiddler-preview-edit {
-	width: 48%;
-}
-
-.tw-edit-fields {
-	width: 100%;
-}
-
-
-.tw-edit-fields table, .tw-edit-fields tr, .tw-edit-fields td {
-	border: none;
-	padding: 4px;
-}
-
-.tw-edit-fields > tbody > .tw-edit-field:nth-child(odd) {
-	background-color: #f0f4f0;
-}
-
-.tw-edit-fields > tbody > .tw-edit-field:nth-child(even) {
-	background-color: #e0e8e0;
-}
-
-.tw-edit-field-name {
-	text-align: right;
-}
-
-.tw-edit-field-value input {
-	width: 100%;
-}
-
-.tw-edit-field-remove {
-}
-
-.tw-edit-field-remove svg {
-	height: 1em;
-	width: 1em;
-	fill: #888;
-	vertical-align: middle;
-}
-
-.tw-edit-field-add-name {
-	display: inline-block;
-	width: 15%;
-}
-
-.tw-edit-field-add-button {
-	display: inline-block;
-	width: 10%;
-}
-
-/*
-** Dropdowns
-*/
-
-.btn-dropdown svg {
-	height: 1em;
-	width: 1em;
-	fill: #999;
 }
 
 .tw-drop-down {
-	min-width: 280px;
-	border: 1px solid {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownborder}};
-	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownbackground}};
 	<>
 	<>
-	padding: 7px 0 7px 0;
-	margin: 4px 0 0 0;
-	white-space: nowrap;
-}
-
-.tw-drop-down a {
-	display: block;
-	padding: 0 14px 0 14px;
-}
-
-.tw-drop-down a:hover {
-	color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkbackground}};
-	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}};
-	text-decoration: none;
-}
-
-.tw-drop-down .tw-tab-buttons button {
-	background-color: #ececec;
-}
-
-.tw-drop-down .tw-tab-buttons button.tw-tab-selected {
-	background-color: #fff;
-	border-bottom: 1px solid #fff;
-}
-
-.tw-drop-down .tw-tab-contents a {
-	padding: 0 0.5em 0 0.5em;
-}
-
-.tw-block-dropdown-wrapper {
-	position: relative;
 }
 
 .tw-block-dropdown {
-	position: absolute;
-	min-width: 280px;
-	border: 1px solid {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownborder}};
-	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownbackground}};
 	<>
 	<>
-	padding: 0 0 0 0;
-	margin: 4px 0 0 0;
-	white-space: nowrap;
-	z-index: 1000;
-}
-
-.tw-block-dropdown a {
-	display: block;
-	padding: 4px 14px 4px 14px;
-}
-
-.tw-block-dropdown a:hover {
-	color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkbackground}};
-	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}};
-	text-decoration: none;
-}
-
-/*
-** Modals
-*/
-
-.tw-modal-displayed {
-	-webkit-filter: blur(4px);
-}
-
-.modal-backdrop {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	z-index: 1000;
-	background-color: #000;
 }
 
 .modal {
-	z-index: 1100;
-	background-color: #fff;
-	border: 1px solid #999;
-	border: 1px solid rgba(0,0,0,.3);
 	<>
 	<>
 }
 
-@media (max-width: 55em) {
-	.modal {
-		position: absolute;
-		top: 1em;
-		left: 1em;
-		right: 1em;
-	}
-
-	.modal-body {
-		overflow-y: auto;
-		max-height: 400px;
-	}
-}
-
-@media (min-width: 55em) {
-	.modal {
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		width: 560px;
-		margin: -250px 0 0 -280px;
-	}
-}
-
-.modal-header {
-	padding: 9px 15px;
-	border-bottom: 1px solid #eee;
-}
-
-.modal-header h3 {
-	margin: 0;
-	line-height: 30px;
-}
-
-.modal-body {
-	padding: 15px;
-}
-
 .modal-footer {
-	padding: 14px 15px 15px;
-	margin-bottom: 0;
-	text-align: right;
-	background-color: #f5f5f5;
-	border-top: 1px solid #ddd;
 	<>
 	<>;
 }
 
-/*
-** Notifications
-*/
-
 .tw-notification {
-	position: fixed;
-	top: 14px;
-	right: 14px;
-	z-index: 1000;
-	max-width: 280px;
-	padding: 0 14px 0 14px;
-	background-color: #ffd;
-	border: 1px solid #999;
-	border: 1px solid rgba(0,0,0,.3);
 	<>
 	<>
 	text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
 }
 
-/*
-** Tabs
-*/
-
-.tw-tab-set {
-}
-
-.tw-tab-buttons {
-	font-size: 0.85em;
-	line-height: 100%;
-	padding-top: 1em;
-	margin-bottom: -1px;
-}
-
-.tw-tab-buttons button {
-	color: #666;
-	margin-left: 2px;
-	margin-right: 2px;
-	font-weight: 300;
-	border: none;
-	background: inherit;
-}
-
-.tw-tab-buttons button.tw-tab-selected {
-	background-color: #fff;
-	border-left: 1px solid #d8d8d8;
-	border-top: 1px solid #d8d8d8;
-	border-right: 1px solid #d8d8d8;
-	margin-bottom: -1px;
-}
-
-.tw-tab-buttons button:not(.tw-tab-selected) {
-	background-color: #d8d8d8;
-	border-left: 1px solid #ccc;
-	border-top: 1px solid #ccc;
-	border-right: 1px solid #ccc;
-}
-
-.tw-tab-divider {
-	border-top: 1px solid #d8d8d8;
-}
-
-.tw-tab-content {
-	padding-top: 14px;
-}
-
-.tw-sidebar-lists .tw-tab-buttons button.tw-tab-selected {
-	background-color: #ececec;
-	border-bottom: 1px solid #ececec;
-}
-
 .tw-sidebar-lists .tw-tab-divider {
-	border-top: none;
-	height: 1px;
 	<>
 }
 
-.tw-more-sidebar {
-	white-space: nowrap;
-}
-
-@media (min-width: 770px) {
-	.tw-more-sidebar {
-		margin-left: -14px;
-	}
-}
-
-.tw-more-sidebar .tw-tab-buttons {
-	display: inline-block;
-	vertical-align: top;
-	text-align: right;
-	padding-top: 0;
-	padding-left: 0;
-}
-
 .tw-more-sidebar .tw-tab-buttons button {
-	display: block;
-	width: 100%;
-	text-align: right;
-}
-
-.tw-sidebar-lists .tw-more-sidebar .tw-tab-divider {
-	display: none;
-}
-
-.tw-more-sidebar .tw-tab-content {
-	display: inline-block;
-	vertical-align: top;
-	padding-top: 0;
-	padding-left: 14px;
-}
-
-.tw-more-sidebar .tw-tab-buttons button {
-	background-color: #ececec;
 	<>
-	border-top: none;
-	border-left: none;
-	border-bottom: none;
-	border-right: 1px solid #ccc;
 }
 
 .tw-more-sidebar .tw-tab-buttons button.tw-tab-selected {
-	background-color: #fff;
 	<>
-	border: none;
-}
-
-/*
-** Alerts
-*/
-
-.tw-alert {
-	<>
-	margin: 7px 7px 7px 7px;
-	padding: 14px 14px 14px 14px;
-	border: 3px solid #DBB727;
-	background-color: rgb(250, 210, 50);
-}
-
-.tw-static-alert {
-	padding: 0 2px 2px 42px;
-	color: #AAA;
-}
-
-/*
-** Grids
-*/
-
-.tw-grid-frame td {
-	width: 1em;
-	height: 1em;
-}
-
-/*
-** Control panel
-*/
-
-.tw-control-panel td {
-	padding: 4px;
-}
-
-.tw-control-panel table, .tw-control-panel table input, .tw-control-panel table textarea {
-	width: 100%;
 }
diff --git a/themes/tiddlywiki/snowwhite/colourmappings.tid b/themes/tiddlywiki/snowwhite/colourmappings.tid
deleted file mode 100644
index 7bfbfffcd..000000000
--- a/themes/tiddlywiki/snowwhite/colourmappings.tid
+++ /dev/null
@@ -1,10 +0,0 @@
-title: $:/themes/tiddlywiki/snowwhite/colourmappings
-type: application/x-tiddler-dictionary
-
-tiddlerbackground: {{$:/themes/tiddlywiki/snowwhite/colours##background}}
-foreground: {{$:/themes/tiddlywiki/snowwhite/colours##foreground}}
-pagebackground: {{$:/themes/tiddlywiki/snowwhite/colours##pagebackground}}
-linkbackground: {{$:/themes/tiddlywiki/snowwhite/colours##background}}
-linkforeground: {{$:/themes/tiddlywiki/snowwhite/colours##primary}}
-dropdownbackground: {{$:/themes/tiddlywiki/snowwhite/colours##background}}
-dropdownborder: {{$:/themes/tiddlywiki/snowwhite/colours##medium}}
diff --git a/themes/tiddlywiki/snowwhite/plugin.info b/themes/tiddlywiki/snowwhite/plugin.info
index dcfbdb9f7..88cd8fa1c 100644
--- a/themes/tiddlywiki/snowwhite/plugin.info
+++ b/themes/tiddlywiki/snowwhite/plugin.info
@@ -4,5 +4,6 @@
 	"author": "JeremyRuston",
 	"core-version": ">=5.0.0",
 	"plugin-type": "theme",
-	"description": "A plain simple theme that emphasises individual tiddlers"
+	"description": "A clean theme that emphasises individual tiddlers",
+	"dependents": ["$:/themes/tiddlywiki/vanilla"]
 }
diff --git a/themes/tiddlywiki/vanilla/ThemeTweaks.tid b/themes/tiddlywiki/vanilla/ThemeTweaks.tid
new file mode 100644
index 000000000..334be745a
--- /dev/null
+++ b/themes/tiddlywiki/vanilla/ThemeTweaks.tid
@@ -0,0 +1,40 @@
+title: $:/themes/tiddlywiki/vanilla/themetweaks
+tags: $:/tags/ControlPanel
+caption: Theme Tweaks
+
+You can tweak certain aspects of the ''Vanilla'' theme.
+
+//Currently, you need to toggle to a different theme and back (or save and restart TiddlyWiki) before these changes take effect. Also take care to preserve any backticks (`) in the settings//
+
+! Colours
+
+* Primary colour: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colours" index="primary" default="" tag="input" type="color"/>
+* Background colour: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colours" index="background" default="" tag="input" type="color"/>
+* Foreground colour: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colours" index="foreground" default="" tag="input" type="color"/>
+* Page background colour: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colours" index="pagebackground" default="" tag="input" type="color"/>
+* Medium contrast color: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colours" index="medium" default="" tag="input" type="color"/>
+
+! Colour mappings
+
+* Tiddler background colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colourmappings" index="tiddlerbackground" default="" tag="input"/>
+* Tiddler foreground colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colourmappings" index="foreground" default="" tag="input"/>
+* Page background colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colourmappings" index="pagebackground" default="" tag="input"/>
+* Link background colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colourmappings" index="linkbackground" default="" tag="input"/>
+* Link foreground colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colourmappings" index="linkforeground" default="" tag="input"/>
+* Dropdown background colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colourmappings" index="dropdownbackground" default="" tag="input"/>
+* Dropdown border colour mapping: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/colourmappings" index="dropdownborder" default="" tag="input"/>
+
+! Settings
+
+* Font family: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/settings" index="fontfamily" default="" tag="input"/>
+
+! Sizes
+
+* Font size: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="fontsize" default="" tag="input"/>
+* Line height: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="lineheight" default="" tag="input"/>
+* Story left position //(the distance between the left of the screen and the left margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storyleft" default="" tag="input"/>
+* Story top position //(the distance between the top of the screen ad the top margin of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storytop" default="" tag="input"/>
+* Story right //(the distance between the left side of the screen and the left margin of the sidebar area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storyright" default="" tag="input"/>
+* Story width //(the width of the story river or tiddler area)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="storywidth" default="" tag="input"/>
+* Tiddler width //(the width of individual tiddlers -- used for zoomin storyview)//: <$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics" index="tiddlerwidth" default="" tag="input"/>
+
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
new file mode 100644
index 000000000..42afe2cc2
--- /dev/null
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -0,0 +1,923 @@
+title: $:/themes/tiddlywiki/vanilla/base
+tags: [[$:/tags/stylesheet]]
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
+\define border-radius(radius)
+```
+  -webkit-border-radius: $radius$;
+     -moz-border-radius: $radius$;
+          border-radius: $radius$;
+```
+\end
+
+/*
+** Start with the normalize CSS reset, and then belay some of its effects
+*/
+
+{{$:/themes/tiddlywiki/vanilla/reset}}
+
+*, input[type="search"] {
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+}
+
+/*
+** Basic element styles
+*/
+
+html {
+	font-family: {{$:/themes/tiddlywiki/vanilla/settings##fontfamily}};
+}
+
+body.tw-body {
+	font-size: {{$:/themes/tiddlywiki/vanilla/metrics##fontsize}};
+	line-height: {{$:/themes/tiddlywiki/vanilla/metrics##lineheight}};
+	color: {{$:/themes/tiddlywiki/vanilla/colourmappings##foreground}};
+	background-color: {{$:/themes/tiddlywiki/vanilla/colourmappings##pagebackground}};
+	word-wrap: break-word;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1em;
+	font-weight: 300;
+}
+
+pre {
+	display: block;
+	padding: 14px;
+	margin: 0 0 14px;
+	word-break: normal;
+	word-wrap: break-word;
+	white-space: pre;
+	white-space: pre-wrap;
+	background-color: #f5f5f5;
+	border: 1px solid #ccc;
+	padding: 0 3px 2px;
+	<>
+}
+
+code {
+	color: #d14;
+	background-color: #f7f7f9;
+	border: 1px solid #e1e1e8;
+    white-space: pre-wrap;
+	padding: 0 3px 2px;
+	<>
+}
+
+/*
+Markdown likes putting code elements inside pre elements
+*/
+pre > code {
+	padding: 0;
+	border: none;
+	background-color: inherit;
+	color: inherit;
+}
+
+table {
+	border: 1px solid #ddd;
+	width: auto;
+	max-width: 100%;
+	caption-side: bottom;
+}
+
+table th, table td {
+	padding: 0 7px 0 7px;
+	border-top: 1px solid #ddd;
+	border-left: 1px solid #ddd;
+}
+
+table thead tr td, table th {
+	background-color: #f0f0f0;
+	font-weight: bold;
+}
+
+table tfoot tr td {
+	background-color: #a8a8a8;
+}
+
+.tw-tiddler-frame img, .tw-tiddler-frame svg, .tw-tiddler-frame canvas, .tw-tiddler-frame embed {
+	max-width: 100%;
+}
+
+.tw-tiddler-frame embed {
+	width: 100%;
+	height: 600px;
+}
+
+/*
+** Links
+*/
+
+a.tw-tiddlylink {
+	text-decoration: none;
+	font-weight: normal;
+	color: {{$:/themes/tiddlywiki/vanilla/colourmappings##linkforeground}};
+	-webkit-user-select: inherit; /* Otherwise the draggable attribute makes links impossible to select */
+}
+
+.tw-sidebar-lists a.tw-tiddlylink {
+	color: #999;
+}
+
+.tw-sidebar-lists a.tw-tiddlylink:hover {
+	color: #444;
+}
+
+a.tw-tiddlylink:hover {
+	text-decoration: underline;
+}
+
+a.tw-tiddlylink-resolves {
+}
+
+a.tw-tiddlylink-shadow {
+	font-weight: bold;
+}
+
+a.tw-tiddlylink-shadow.tw-tiddlylink-resolves {
+	font-weight: normal;
+}
+
+a.tw-tiddlylink-missing {
+	font-style: italic;
+}
+
+a.tw-tiddlylink-external {
+	text-decoration: underline;
+}
+
+/*
+** Drag and drop styles
+*/
+
+.tw-tiddler-dragger {
+	position: relative;
+	z-index: -10000;
+}
+
+.tw-tiddler-dragger-inner {
+	position: absolute;
+	display: inline-block;
+	padding: 8px 20px;
+	font-size: 16.9px;
+	font-weight: bold;
+	line-height: 20px;
+	color: #fff;
+	text-shadow: 0 1px 0 rgba(0, 0, 0, 1);
+	white-space: nowrap;
+	vertical-align: baseline;
+	background-color: #000;
+	<>
+}
+
+.tw-tiddler-dragger-cover {
+	position: absolute;
+	background-color: {{$:/themes/tiddlywiki/vanilla/colourmappings##pagebackground}};
+}
+
+.tw-dropzone {
+	position: relative;
+}
+
+.tw-dropzone.tw-dragover:before {
+	z-index: 10000;
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	background: rgba(0,200,0,0.7);
+	text-align: center;
+	content: "Drop here";
+}
+
+/*
+** Buttons
+*/
+
+.btn-invisible {
+	padding: 0;
+	margin: 0;
+	background: none;
+	border: none;
+}
+
+.btn-big-green {
+	padding: 8px;
+	margin: 8px;
+	background: #34C734;
+	color: #fff;
+	fill: #fff;
+	border: none;
+	font-size: 1.2em;
+	line-height: 1.4em;
+}
+
+.btn-mini {
+	color: #e0e0e0;
+}
+
+.btn-mini:hover {
+	color: #444;
+}
+
+/*
+** Tags and missing tiddlers
+*/
+
+.tw-tag-list-item {
+	display: inline-block;
+	margin-right: 7px;
+}
+
+.tw-tags-wrapper {
+	margin: 4px 0 14px 0;
+}
+
+.tw-missing-tiddler-label {
+	font-style: italic;
+	font-weight: normal;
+	display: inline-block;
+	font-size: 11.844px;
+	line-height: 14px;
+	white-space: nowrap;
+	vertical-align: baseline;
+}
+
+.tw-tag-label {
+	display: inline-block;
+	padding: 2px 9px;
+	font-size: 0.9em;
+	font-weight: 300;
+	line-height: 1.2em;
+	color: #fff;
+	white-space: nowrap;
+	vertical-align: baseline;
+	background-color: #D5AD34;
+	<>
+}
+
+.tw-untagged-label {
+	background-color: #999;
+}
+
+.tw-tag-label svg {
+	height: 1em;
+	width: 1em;
+	fill: #fff;
+}
+
+/*
+** Page layout
+*/
+
+.sidebar-header {
+	color: #acacac;
+}
+
+.sidebar-header .title a.tw-tiddlylink-resolves {
+	font-weight: 300;
+}
+
+.sidebar-header .tw-sidebar-lists p {
+	margin-top: 3px;
+	margin-bottom: 3px;
+}
+
+.tw-search a svg {
+	height: 0.75em;
+}
+
+.tw-search-results {
+	padding-top: 14px;
+}
+
+.tw-page-controls {
+	margin-top: 14px;
+}
+
+.tw-page-controls a.tw-tiddlylink:hover {
+	text-decoration: none;
+}
+
+.tw-page-controls svg {
+	height: 1.75em;
+	min-width: 1px;
+	padding-right: 0.5em;
+	fill: #fff;
+}
+
+.tw-page-controls svg:hover {
+	fill: #000;
+}
+
+.tw-menu-list-item {
+	white-space: nowrap;
+}
+
+.tw-menu-list-count {
+	font-weight: bold;
+}
+
+.tw-open-tiddler-list {
+	<>
+}
+
+.tw-menu-list-subitem {
+	padding-left: 7px;
+}
+
+.story-river {
+	position: relative;
+}
+
+.tw-story-spacer {
+	position: absolute;
+	min-height: 100%;
+}
+
+@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) {
+	.sidebar-header {
+		padding: 14px;
+	}
+
+	.story-river {
+		position: relative;
+		padding: 0;
+	}
+}
+
+@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}}) {
+	.sidebar-header {
+		position: fixed;
+		top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}};
+		left: {{$:/themes/tiddlywiki/vanilla/metrics##storyright}};
+		bottom: 0;
+		right: 0;
+		overflow-y: auto;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		margin: 0 0 0 -42px;
+		padding: 70px 0 28px 42px;
+	}
+
+	.story-river {
+		position: relative;
+		left: {{$:/themes/tiddlywiki/vanilla/metrics##storyleft}};
+		top: {{$:/themes/tiddlywiki/vanilla/metrics##storytop}};
+		width: {{$:/themes/tiddlywiki/vanilla/metrics##storywidth}};
+		padding: 56px 42px 42px 42px;
+	}
+}
+
+@media print {
+	.sidebar-header {
+		display: none;
+	}
+
+	.story-river {
+		margin-left: 14px;
+	}
+}
+
+/*
+** Tiddler styles
+*/
+
+.tw-tiddler-frame {
+	width: {{$:/themes/tiddlywiki/vanilla/metrics##tiddlerwidth}};
+	margin-bottom: 28px;
+	background-color: {{$:/themes/tiddlywiki/vanilla/colourmappings##tiddlerbackground}};
+}
+
+.tw-tiddler-info {
+	padding: 14px 42px 14px 42px;
+	background-color: #f8f8f8;
+	border-top: 1px solid #ddd;
+	border-bottom: 1px solid #ddd;
+}
+
+.tw-tiddler-info .tw-tab-buttons button.tw-tab-selected {
+	background-color: #f8f8f8;
+	border-bottom: 1px solid #f8f8f8;
+}
+
+.tw-view-field-table {
+	width: 100%;
+}
+
+.tw-view-field-name {
+	width: 1%; /* Makes this column be as narrow as possible */
+	text-align: right;
+	font-style: italic;
+}
+
+.tw-view-field-value {
+}
+
+@media (max-width: 770px) {
+	.tw-tiddler-frame {
+		padding: 14px 14px 14px 14px;
+	}
+
+	.tw-tiddler-info {
+		margin: 0 -14px 0 -14px;
+	}
+}
+
+@media (min-width: 770px) {
+	.tw-tiddler-frame {
+		padding: 28px 42px 42px 42px;
+	}
+
+	.tw-tiddler-info {
+		margin: 0 -42px 0 -42px;
+	}
+}
+
+.titlebar {
+	font-weight: 300;
+	font-size: 2.35em;
+	line-height: 1.2em;
+	color: #182955;
+}
+
+.titlebar img {
+	height: 1em;
+}
+
+.tw-subtitle {
+	font-size: 0.9em;
+	color: #c0c0c0;
+	font-weight: 300;
+}
+
+.tw-tiddler-missing .title {
+  font-style: italic;
+  font-weight: normal;
+}
+
+.tw-tiddler-frame .tw-tiddler-controls {
+	float: right;
+}
+
+.tw-tiddler-controls button {
+	margin: 0 0 0 5px;
+	vertical-align: baseline;
+}
+
+.tw-tiddler-controls button svg {
+	height: 0.75em;
+	fill: #ccc;
+}
+
+.tw-tiddler-controls button.tw-selected svg {
+	fill: #444;
+}
+
+.tw-tiddler-controls svg:hover {
+	fill: #888;
+}
+
+@media print {
+	.tw-tiddler-controls {
+		display: none;
+	}
+}
+
+.tw-tiddler-help { /* Help prompts within tiddler template */
+	color: #999;
+	margin-top: 14px;
+}
+
+.tw-tiddler-help a.tw-tiddlylink {
+	color: #888888;
+}
+
+.tw-tiddler-frame input.tw-edit-texteditor, .tw-tiddler-frame textarea.tw-edit-texteditor {
+	width: 100%;
+	padding: 3px 3px 3px 3px;
+	border: 1px solid #ccc;
+	line-height: 1.3em;
+	-webkit-appearance: none;
+	margin: 4px 0 4px 0;
+}
+
+.tw-tiddler-frame input.tw-edit-texteditor {
+	background-color: #f8f8f8;
+}
+
+canvas.tw-edit-bitmapeditor  {
+	border: 6px solid #fff;
+	cursor: crosshair;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	margin-top: 6px;
+	margin-bottom: 6px;
+}
+
+.tw-edit-bitmapeditor-width {
+	display: block;
+}
+
+.tw-edit-bitmapeditor-height {
+	display: block;
+}
+
+/*
+** Tiddler edit mode
+*/
+
+.tw-tiddler-edit-frame em {
+	color: #999;
+	font-style: normal;
+}
+
+.tw-edit-type-dropdown a.tw-tiddlylink-missing {
+	font-style: normal;
+}
+
+.tw-edit-tags-list {
+	margin: 14px 0 14px 0;
+}
+
+.tw-tag-editor-label {
+	display: inline-block;
+	margin-right: 7px;
+}
+
+.tw-remove-tag-button {
+	padding-left: 4px;
+}
+
+.tw-add-tag-name {
+	display: inline-block;
+	width: 15%;
+}
+
+.tw-tiddler-preview {
+	overflow: auto;
+}
+
+.tw-tiddler-preview-preview {
+	float: right;
+	width: 48%;
+	border: 1px solid #ccc;
+	margin: 4px 3px 3px 3px;
+	padding: 3px 3px 3px 3px;
+}
+
+.tw-tiddler-preview-edit {
+	width: 48%;
+}
+
+.tw-edit-fields {
+	width: 100%;
+}
+
+
+.tw-edit-fields table, .tw-edit-fields tr, .tw-edit-fields td {
+	border: none;
+	padding: 4px;
+}
+
+.tw-edit-fields > tbody > .tw-edit-field:nth-child(odd) {
+	background-color: #f0f4f0;
+}
+
+.tw-edit-fields > tbody > .tw-edit-field:nth-child(even) {
+	background-color: #e0e8e0;
+}
+
+.tw-edit-field-name {
+	text-align: right;
+}
+
+.tw-edit-field-value input {
+	width: 100%;
+}
+
+.tw-edit-field-remove {
+}
+
+.tw-edit-field-remove svg {
+	height: 1em;
+	width: 1em;
+	fill: #888;
+	vertical-align: middle;
+}
+
+.tw-edit-field-add-name {
+	display: inline-block;
+	width: 15%;
+}
+
+.tw-edit-field-add-button {
+	display: inline-block;
+	width: 10%;
+}
+
+/*
+** Dropdowns
+*/
+
+.btn-dropdown svg {
+	height: 1em;
+	width: 1em;
+	fill: #999;
+}
+
+.tw-drop-down {
+	min-width: 280px;
+	border: 1px solid {{$:/themes/tiddlywiki/vanilla/colourmappings##dropdownborder}};
+	background-color: {{$:/themes/tiddlywiki/vanilla/colourmappings##dropdownbackground}};
+	padding: 7px 0 7px 0;
+	margin: 4px 0 0 0;
+	white-space: nowrap;
+}
+
+.tw-drop-down a {
+	display: block;
+	padding: 0 14px 0 14px;
+}
+
+.tw-drop-down a:hover {
+	color: {{$:/themes/tiddlywiki/vanilla/colourmappings##linkbackground}};
+	background-color: {{$:/themes/tiddlywiki/vanilla/colourmappings##linkforeground}};
+	text-decoration: none;
+}
+
+.tw-drop-down .tw-tab-buttons button {
+	background-color: #ececec;
+}
+
+.tw-drop-down .tw-tab-buttons button.tw-tab-selected {
+	background-color: #fff;
+	border-bottom: 1px solid #fff;
+}
+
+.tw-drop-down .tw-tab-contents a {
+	padding: 0 0.5em 0 0.5em;
+}
+
+.tw-block-dropdown-wrapper {
+	position: relative;
+}
+
+.tw-block-dropdown {
+	position: absolute;
+	min-width: 280px;
+	border: 1px solid {{$:/themes/tiddlywiki/vanilla/colourmappings##dropdownborder}};
+	background-color: {{$:/themes/tiddlywiki/vanilla/colourmappings##dropdownbackground}};
+	padding: 0 0 0 0;
+	margin: 4px 0 0 0;
+	white-space: nowrap;
+	z-index: 1000;
+}
+
+.tw-block-dropdown a {
+	display: block;
+	padding: 4px 14px 4px 14px;
+}
+
+.tw-block-dropdown a:hover {
+	color: {{$:/themes/tiddlywiki/vanilla/colourmappings##linkbackground}};
+	background-color: {{$:/themes/tiddlywiki/vanilla/colourmappings##linkforeground}};
+	text-decoration: none;
+}
+
+/*
+** Modals
+*/
+
+.tw-modal-displayed {
+	-webkit-filter: blur(4px);
+}
+
+.modal-backdrop {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1000;
+	background-color: #000;
+}
+
+.modal {
+	z-index: 1100;
+	background-color: #fff;
+	border: 1px solid #999;
+	border: 1px solid rgba(0,0,0,.3);
+}
+
+@media (max-width: 55em) {
+	.modal {
+		position: absolute;
+		top: 1em;
+		left: 1em;
+		right: 1em;
+	}
+
+	.modal-body {
+		overflow-y: auto;
+		max-height: 400px;
+	}
+}
+
+@media (min-width: 55em) {
+	.modal {
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		width: 560px;
+		margin: -250px 0 0 -280px;
+	}
+}
+
+.modal-header {
+	padding: 9px 15px;
+	border-bottom: 1px solid #eee;
+}
+
+.modal-header h3 {
+	margin: 0;
+	line-height: 30px;
+}
+
+.modal-body {
+	padding: 15px;
+}
+
+.modal-footer {
+	padding: 14px 15px 15px;
+	margin-bottom: 0;
+	text-align: right;
+	background-color: #f5f5f5;
+	border-top: 1px solid #ddd;
+}
+
+/*
+** Notifications
+*/
+
+.tw-notification {
+	position: fixed;
+	top: 14px;
+	right: 14px;
+	z-index: 1000;
+	max-width: 280px;
+	padding: 0 14px 0 14px;
+	background-color: #ffd;
+	border: 1px solid #999;
+	border: 1px solid rgba(0,0,0,.3);
+}
+
+/*
+** Tabs
+*/
+
+.tw-tab-set {
+}
+
+.tw-tab-buttons {
+	font-size: 0.85em;
+	line-height: 100%;
+	padding-top: 1em;
+	margin-bottom: -1px;
+}
+
+.tw-tab-buttons button {
+	color: #666;
+	margin-left: 2px;
+	margin-right: 2px;
+	font-weight: 300;
+	border: none;
+	background: inherit;
+}
+
+.tw-tab-buttons button.tw-tab-selected {
+	background-color: #fff;
+	border-left: 1px solid #d8d8d8;
+	border-top: 1px solid #d8d8d8;
+	border-right: 1px solid #d8d8d8;
+	margin-bottom: -1px;
+}
+
+.tw-tab-buttons button:not(.tw-tab-selected) {
+	background-color: #d8d8d8;
+	border-left: 1px solid #ccc;
+	border-top: 1px solid #ccc;
+	border-right: 1px solid #ccc;
+}
+
+.tw-tab-divider {
+	border-top: 1px solid #d8d8d8;
+}
+
+.tw-tab-content {
+	padding-top: 14px;
+}
+
+.tw-sidebar-lists .tw-tab-buttons button.tw-tab-selected {
+	background-color: #ececec;
+	border-bottom: 1px solid #ececec;
+}
+
+.tw-sidebar-lists .tw-tab-divider {
+	border-top: none;
+	height: 1px;
+	<>
+}
+
+.tw-more-sidebar {
+	white-space: nowrap;
+}
+
+@media (min-width: 770px) {
+	.tw-more-sidebar {
+		margin-left: -14px;
+	}
+}
+
+.tw-more-sidebar .tw-tab-buttons {
+	display: inline-block;
+	vertical-align: top;
+	text-align: right;
+	padding-top: 0;
+	padding-left: 0;
+}
+
+.tw-more-sidebar .tw-tab-buttons button {
+	display: block;
+	width: 100%;
+	text-align: right;
+}
+
+.tw-sidebar-lists .tw-more-sidebar .tw-tab-divider {
+	display: none;
+}
+
+.tw-more-sidebar .tw-tab-content {
+	display: inline-block;
+	vertical-align: top;
+	padding-top: 0;
+	padding-left: 14px;
+}
+
+.tw-more-sidebar .tw-tab-buttons button {
+	background-color: #ececec;
+	<>
+	border-top: none;
+	border-left: none;
+	border-bottom: none;
+	border-right: 1px solid #ccc;
+}
+
+.tw-more-sidebar .tw-tab-buttons button.tw-tab-selected {
+	background-color: #fff;
+	<>
+	border: none;
+}
+
+/*
+** Alerts
+*/
+
+.tw-alert {
+	<>
+	margin: 7px 7px 7px 7px;
+	padding: 14px 14px 14px 14px;
+	border: 3px solid #DBB727;
+	background-color: rgb(250, 210, 50);
+}
+
+.tw-static-alert {
+	padding: 0 2px 2px 42px;
+	color: #AAA;
+}
+
+/*
+** Grids
+*/
+
+.tw-grid-frame td {
+	width: 1em;
+	height: 1em;
+}
+
+/*
+** Control panel
+*/
+
+.tw-control-panel td {
+	padding: 4px;
+}
+
+.tw-control-panel table, .tw-control-panel table input, .tw-control-panel table textarea {
+	width: 100%;
+}
diff --git a/themes/tiddlywiki/vanilla/colourmappings.tid b/themes/tiddlywiki/vanilla/colourmappings.tid
new file mode 100644
index 000000000..e5a305d49
--- /dev/null
+++ b/themes/tiddlywiki/vanilla/colourmappings.tid
@@ -0,0 +1,10 @@
+title: $:/themes/tiddlywiki/vanilla/colourmappings
+type: application/x-tiddler-dictionary
+
+tiddlerbackground: {{$:/themes/tiddlywiki/vanilla/colours##background}}
+foreground: {{$:/themes/tiddlywiki/vanilla/colours##foreground}}
+pagebackground: {{$:/themes/tiddlywiki/vanilla/colours##pagebackground}}
+linkbackground: {{$:/themes/tiddlywiki/vanilla/colours##background}}
+linkforeground: {{$:/themes/tiddlywiki/vanilla/colours##primary}}
+dropdownbackground: {{$:/themes/tiddlywiki/vanilla/colours##background}}
+dropdownborder: {{$:/themes/tiddlywiki/vanilla/colours##medium}}
diff --git a/themes/tiddlywiki/snowwhite/colours.tid b/themes/tiddlywiki/vanilla/colours.tid
similarity index 74%
rename from themes/tiddlywiki/snowwhite/colours.tid
rename to themes/tiddlywiki/vanilla/colours.tid
index cd7ce86fc..0586b5676 100644
--- a/themes/tiddlywiki/snowwhite/colours.tid
+++ b/themes/tiddlywiki/vanilla/colours.tid
@@ -1,4 +1,4 @@
-title: $:/themes/tiddlywiki/snowwhite/colours
+title: $:/themes/tiddlywiki/vanilla/colours
 type: application/x-tiddler-dictionary
 
 primary: `#007dff`
diff --git a/themes/tiddlywiki/snowwhite/metrics.tid b/themes/tiddlywiki/vanilla/metrics.tid
similarity index 78%
rename from themes/tiddlywiki/snowwhite/metrics.tid
rename to themes/tiddlywiki/vanilla/metrics.tid
index 356a5e4c3..6892b1ef4 100644
--- a/themes/tiddlywiki/snowwhite/metrics.tid
+++ b/themes/tiddlywiki/vanilla/metrics.tid
@@ -1,4 +1,4 @@
-title: $:/themes/tiddlywiki/snowwhite/metrics
+title: $:/themes/tiddlywiki/vanilla/metrics
 type: application/x-tiddler-dictionary
 
 fontsize: `14px`
diff --git a/themes/tiddlywiki/vanilla/plugin.info b/themes/tiddlywiki/vanilla/plugin.info
new file mode 100644
index 000000000..eeab92d2d
--- /dev/null
+++ b/themes/tiddlywiki/vanilla/plugin.info
@@ -0,0 +1,8 @@
+{
+	"title": "$:/themes/tiddlywiki/vanilla",
+	"name": "Vanilla",
+	"author": "JeremyRuston",
+	"core-version": ">=5.0.0",
+	"plugin-type": "theme",
+	"description": "A basic default theme"
+}
diff --git a/themes/tiddlywiki/snowwhite/reset.tid b/themes/tiddlywiki/vanilla/reset.tid
similarity index 99%
rename from themes/tiddlywiki/snowwhite/reset.tid
rename to themes/tiddlywiki/vanilla/reset.tid
index 265294582..3ba06b1e6 100644
--- a/themes/tiddlywiki/snowwhite/reset.tid
+++ b/themes/tiddlywiki/vanilla/reset.tid
@@ -1,4 +1,4 @@
-title: $:/themes/tiddlywiki/snowwhite/reset
+title: $:/themes/tiddlywiki/vanilla/reset
 type: text/plain
 
 /*! normalize.css v2.1.0 | MIT License | git.io/normalize */
diff --git a/themes/tiddlywiki/snowwhite/settings.tid b/themes/tiddlywiki/vanilla/settings.tid
similarity index 71%
rename from themes/tiddlywiki/snowwhite/settings.tid
rename to themes/tiddlywiki/vanilla/settings.tid
index cfc188ed4..22c3dfcef 100644
--- a/themes/tiddlywiki/snowwhite/settings.tid
+++ b/themes/tiddlywiki/vanilla/settings.tid
@@ -1,4 +1,4 @@
-title: $:/themes/tiddlywiki/snowwhite/settings
+title: $:/themes/tiddlywiki/vanilla/settings
 type: application/x-tiddler-dictionary
 
 fontfamily: `"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif`