diff --git a/src/_components/themes.vto b/src/_components/themes.vto
new file mode 100644
index 00000000..11c8ac5e
--- /dev/null
+++ b/src/_components/themes.vto
@@ -0,0 +1,17 @@
+
+ {{ for item of items }}
+ -
+ {{item.title}}
+
+
+
+ {{item.desc |> md(true)}}
+
+
+
+ {{ /for }}
+
diff --git a/src/facets/index.vto b/src/facets/index.vto
index c6f00e54..d46f2615 100644
--- a/src/facets/index.vto
+++ b/src/facets/index.vto
@@ -1,5 +1,5 @@
---
-layout: layouts/facet.vto
+layout: layouts/diffuse.vto
base: ../
styles:
diff --git a/src/index.vto b/src/index.vto
index b0a4b5ea..4f60978f 100644
--- a/src/index.vto
+++ b/src/index.vto
@@ -10,23 +10,6 @@ styles:
scripts:
- index.js
-# THEMES
-
-themes:
- - url: "themes/blur/"
- title: "Blur"
- todo: true
- desc: >
- **A theme with an Apple-inspired playback view.** Features two audio players instead of the usual one.
- - title: "Loader"
- todo: true
- desc: >
- **A theme that loads other themes!** _If you're taking the first steps to customize, checkout the [facets loader](#facets) first!_
- - url: "themes/webamp/"
- title: "Webamp"
- desc: >
- **Winamp 2 + Windows 98**. Uses Webamp as the audio player connected to various Diffuse elements. Also features a desktop-like Windows 98 environment in which you can open "programs" that control the used Diffuse elements.
-
# ELEMENTS
configurators:
diff --git a/src/themes/index.vto b/src/themes/index.vto
index 176a3d58..bd6e856a 100644
--- a/src/themes/index.vto
+++ b/src/themes/index.vto
@@ -1,5 +1,5 @@
---
-layout: layouts/facet.vto
+layout: layouts/diffuse.vto
base: ../
styles:
@@ -10,6 +10,19 @@ styles:
scripts:
- themes/index.js
+
+# THEMES
+
+builtIn:
+ - url: "themes/blur/"
+ title: "Blur"
+ todo: true
+ desc: >
+ **A theme with an Apple-inspired playback view.** Features two audio players instead of the usual one.
+ - url: "themes/webamp/"
+ title: "Webamp"
+ desc: >
+ **Winamp 2 + Windows 98**. Uses Webamp as the audio player connected to various Diffuse elements. Also features a desktop-like Windows 98 environment in which you can open "programs" that control the used Diffuse elements.
---
@@ -19,9 +32,11 @@ scripts:
{{ await comp.diffuse.logo() }}
+
Themes
+
Themes are element compositions and provide a traditional browser web application way of
using them. In other words, pretty much the whole thing, besides your data, lives inside a single browser tab.
@@ -33,11 +48,22 @@ scripts:
Each theme is unique, not just a skin; each one might have a totally different feature set.
+
+
-
- TODO
-
+
+
+
+ Built-in
+
+ {{ await comp.list({ items: builtIn }) }}
+
+
+
+