diff --git a/Makefile b/Makefile
index 333843d..5089feb 100644
--- a/Makefile
+++ b/Makefile
@@ -64,7 +64,7 @@
 TMPDIR := $(shell mktemp -d "/tmp/XXXXXX")
 HEAD := $(shell git rev-parse HEAD)
 
-bundles := public/css/bundle.css public/js/bundle.js
+bundles := public/css public/js/bundle.js
 haiku_inputs := $(shell find public/* content/* templates/*)
 
 # A list of case-sensitive banned words.
@@ -166,8 +166,13 @@
 
 # NOTE(sadovsky): Newer versions of postcss-cli and autoprefixer use JavaScript
 # Promises, which doesn't work with Vanadium's old version of node, 0.10.24.
-public/css/bundle.css: $(shell find stylesheets/*) node_modules
-	lessc -sm=on stylesheets/index.less | postcss -u autoprefixer > $@
+
+# Generates a compiled css file for every less file in the themes directory.
+public/css: $(shell find stylesheets/*) node_modules
+	@for FILE in $(shell find stylesheets/themes/* -type f -print0 | xargs -0 -n1 basename) ; do \
+		lessc -sm=on stylesheets/themes/$$FILE | postcss -u autoprefixer > $@/bundle.$${FILE%.*}.css ; \
+	done
+	touch $@
 
 public/js/bundle.js: browser/index.js $(shell find browser) node_modules
 	$(call BROWSERIFY,$<,$@)
diff --git a/content/syncbase/example-apps.md b/content/syncbase/example-apps.md
index faa653c..0df0162 100644
--- a/content/syncbase/example-apps.md
+++ b/content/syncbase/example-apps.md
@@ -1,5 +1,6 @@
 = yaml =
 title: Example Apps
 layout: syncbase
+theme: teal
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/acls.md b/content/syncbase/guides/acls.md
index e634c83..6867784 100644
--- a/content/syncbase/guides/acls.md
+++ b/content/syncbase/guides/acls.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Access Control
 layout: syncbase
+theme: teal
 sort: 5
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/batches.md b/content/syncbase/guides/batches.md
index 8772d54..5f5c608 100644
--- a/content/syncbase/guides/batches.md
+++ b/content/syncbase/guides/batches.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Batches
 layout: syncbase
+theme: teal
 sort: 4
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/blobs.md b/content/syncbase/guides/blobs.md
index 863f015..c10f63c 100644
--- a/content/syncbase/guides/blobs.md
+++ b/content/syncbase/guides/blobs.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Blobs
 layout: syncbase
+theme: teal
 sort: 7
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/cloud.md b/content/syncbase/guides/cloud.md
index 647976c..82b7d94 100644
--- a/content/syncbase/guides/cloud.md
+++ b/content/syncbase/guides/cloud.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Cloud Syncbase
 layout: syncbase
+theme: teal
 sort: 10
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/conflict.md b/content/syncbase/guides/conflict.md
index a2aaa8c..bdf1b58 100644
--- a/content/syncbase/guides/conflict.md
+++ b/content/syncbase/guides/conflict.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Conflict Resolution
 layout: syncbase
+theme: teal
 sort: 8
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/data-flow.md b/content/syncbase/guides/data-flow.md
index de03f53..3cba173 100644
--- a/content/syncbase/guides/data-flow.md
+++ b/content/syncbase/guides/data-flow.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Data Flow
 layout: syncbase
+theme: teal
 sort: 2
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/data-model.md b/content/syncbase/guides/data-model.md
index dc39331..8d26e8a 100644
--- a/content/syncbase/guides/data-model.md
+++ b/content/syncbase/guides/data-model.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Data Model
 layout: syncbase
+theme: teal
 sort: 1
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/schema.md b/content/syncbase/guides/schema.md
index 0f517e6..6a6a9f1 100644
--- a/content/syncbase/guides/schema.md
+++ b/content/syncbase/guides/schema.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Schema and upgrades
 layout: syncbase
+theme: teal
 sort: 9
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/synchronization.md b/content/syncbase/guides/synchronization.md
index 1b981db..548ac20 100644
--- a/content/syncbase/guides/synchronization.md
+++ b/content/syncbase/guides/synchronization.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Synchronization
 layout: syncbase
+theme: teal
 sort: 3
 toc: true
 = yaml =
diff --git a/content/syncbase/guides/syncql.md b/content/syncbase/guides/syncql.md
index 35a297b..e95c03d 100644
--- a/content/syncbase/guides/syncql.md
+++ b/content/syncbase/guides/syncql.md
@@ -1,6 +1,7 @@
 = yaml =
 title: SyncQL Queries
 layout: syncbase
+theme: teal
 sort: 6
 toc: true
 = yaml =
diff --git a/content/syncbase/index.md b/content/syncbase/index.md
index 2d9cf25..59eb642 100644
--- a/content/syncbase/index.md
+++ b/content/syncbase/index.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Syncbase
 layout: syncbase
+theme: teal
 toc: true
 = yaml =
 
diff --git a/content/syncbase/quickstart.md b/content/syncbase/quickstart.md
index e3291b4..f5537b0 100644
--- a/content/syncbase/quickstart.md
+++ b/content/syncbase/quickstart.md
@@ -1,5 +1,6 @@
 = yaml =
 title: Quick Start
 layout: syncbase
+theme: teal
 toc: true
 = yaml =
diff --git a/content/syncbase/tutorial/step1.md b/content/syncbase/tutorial/step1.md
index 24cf992..f019661 100644
--- a/content/syncbase/tutorial/step1.md
+++ b/content/syncbase/tutorial/step1.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Step 1
 layout: syncbase_tutorial
+theme: teal
 wherein: you do the step 1
 sort: 1
 toc: true
diff --git a/content/syncbase/tutorial/step2.md b/content/syncbase/tutorial/step2.md
index e06fcd5..77c0a36 100644
--- a/content/syncbase/tutorial/step2.md
+++ b/content/syncbase/tutorial/step2.md
@@ -1,6 +1,7 @@
 = yaml =
 title: Step 2
 layout: syncbase_tutorial
+theme: teal
 wherein: you do the step 2
 sort: 2
 toc: true
diff --git a/content/syncbase/tutorial/step3.md b/content/syncbase/tutorial/step3.md
new file mode 100644
index 0000000..b70fbf8
--- /dev/null
+++ b/content/syncbase/tutorial/step3.md
@@ -0,0 +1,10 @@
+= yaml =
+title: Step 3
+layout: syncbase_tutorial
+theme: teal
+wherein: you do the step 3
+sort: 3
+toc: true
+= yaml =
+
+# Introduction
diff --git a/stylesheets/code.less b/stylesheets/code.less
index eaea532..e8660e8 100644
--- a/stylesheets/code.less
+++ b/stylesheets/code.less
@@ -42,7 +42,7 @@
   justify-content: flex-end;
 
   .status {
-    color: @color-cyan-700;
+    color: @color-primary-700;
     font-family: "Roboto", sans-serif;
     font-size: 13px;
     font-weight: 500;
@@ -50,6 +50,6 @@
   }
 
   .icon {
-    color: @color-cyan-700;
+    color: @color-primary-700;
   }
 }
diff --git a/stylesheets/constants.less b/stylesheets/constants.less
index a0cbb8b..84bc10b 100644
--- a/stylesheets/constants.less
+++ b/stylesheets/constants.less
@@ -8,9 +8,6 @@
 @color-blue-grey-100: #cfd8dc;
 @color-blue-grey-500: #607d8b;
 @color-blue-grey-800: #37474f;
-@color-deep-orange-A200: #ff6e40;
-@color-cyan-700: #0097a7;
-@color-cyan-800: #00838f;
 @color-grey-100: #f5f5f5;
 @color-white: #ffffff;
 
diff --git a/stylesheets/header.less b/stylesheets/header.less
index 261f33b..733e5f3 100644
--- a/stylesheets/header.less
+++ b/stylesheets/header.less
@@ -6,7 +6,7 @@
 
 & {
   color: @color-white;
-  background-color: @color-cyan-800;
+  background-color: @color-primary-800;
 }
 
 a {
diff --git a/stylesheets/index.less b/stylesheets/main.less
similarity index 97%
rename from stylesheets/index.less
rename to stylesheets/main.less
index 08a102f..b4219e4 100644
--- a/stylesheets/index.less
+++ b/stylesheets/main.less
@@ -48,7 +48,7 @@
   font-weight: 500;
 }
 h1.title {
-  color: @color-cyan-700;
+  color: @color-primary-700;
   font-size: 45px;
   line-height: 48px;
 }
@@ -81,12 +81,12 @@
 }
 
 a {
-  color: @color-cyan-700;
+  color: @color-primary-700;
   text-decoration: none;
 
   &:hover,
   &:active {
-    color: @color-cyan-800;
+    color: @color-primary-800;
   }
 }
 
diff --git a/stylesheets/note.less b/stylesheets/note.less
index 9b28f52..1d50201 100644
--- a/stylesheets/note.less
+++ b/stylesheets/note.less
@@ -13,7 +13,7 @@
 }
 
 &.warning {
-  border-color: @color-deep-orange-A200;
+  border-color: @color-accent-A200;
 }
 
 h1, h2, h3, h4 {
diff --git a/stylesheets/previous-next.less b/stylesheets/previous-next.less
index 068af21..c970f2c 100644
--- a/stylesheets/previous-next.less
+++ b/stylesheets/previous-next.less
@@ -26,7 +26,7 @@
 
 .previous {
   justify-content: flex-start;
-  background-color: @color-cyan-800;
+  background-color: @color-primary-800;
 
   .text-wrapper {
     align-items: flex-start;
@@ -35,7 +35,7 @@
 
 .next {
   justify-content: flex-end;
-  background-color: @color-cyan-700;
+  background-color: @color-primary-700;
 
   .text-wrapper {
     align-items: flex-end;
diff --git a/stylesheets/sidebar.less b/stylesheets/sidebar.less
index 0dc5d18..30f9b4a 100644
--- a/stylesheets/sidebar.less
+++ b/stylesheets/sidebar.less
@@ -15,7 +15,7 @@
   align-items: center;
   padding: 0 @gutter;
   height: @header-height;
-  color: @color-cyan-700;
+  color: @color-primary-700;
 
   .icon {
     margin: 0 @gutter-quarter 0 calc(12px - @gutter);
diff --git a/stylesheets/themes/cyan.less b/stylesheets/themes/cyan.less
new file mode 100644
index 0000000..60a002e
--- /dev/null
+++ b/stylesheets/themes/cyan.less
@@ -0,0 +1,10 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+@import "../main.less";
+
+/* https://www.google.com/design/spec/style/color.html */
+@color-accent-A200: #ff6e40;
+@color-primary-700: #0097a7;
+@color-primary-800: #00838f;
diff --git a/stylesheets/themes/teal.less b/stylesheets/themes/teal.less
new file mode 100644
index 0000000..437233b
--- /dev/null
+++ b/stylesheets/themes/teal.less
@@ -0,0 +1,10 @@
+/* Copyright 2015 The Vanadium Authors. All rights reserved. */
+/* Use of this source code is governed by a BSD-style */
+/* license that can be found in the LICENSE file. */
+
+@import "../main.less";
+
+/* https://www.google.com/design/spec/style/color.html */
+@color-accent-A200: #ff6e40;
+@color-primary-700: #00796B;
+@color-primary-800: #00695C;
diff --git a/stylesheets/toc.less b/stylesheets/toc.less
index f715567..5c54f86 100644
--- a/stylesheets/toc.less
+++ b/stylesheets/toc.less
@@ -24,7 +24,7 @@
   font-weight: 400;
 
   &.active {
-    color: @color-cyan-700;
+    color: @color-primary-700;
     font-weight: 500;
   }
 }
diff --git a/templates/partials/head.mustache b/templates/partials/head.mustache
index 9503c93..11f2a08 100644
--- a/templates/partials/head.mustache
+++ b/templates/partials/head.mustache
@@ -41,7 +41,7 @@
   <meta name="msapplication-TileColor" content="#00acc1">
   <meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
 
-  <link rel="stylesheet" href="/css/bundle.css">
+  <link rel="stylesheet" href="/css/bundle.{{ page.theme }}{{^ page.theme }}cyan{{/ page.theme }}.css">
   <script src="/js/bundle.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){