From c9846820ff4c4c8633becdf6f46a3fbe0e368f38 Mon Sep 17 00:00:00 2001
From: "Luna D." <luna@nighty.cloud>
Date: Tue, 2 Jul 2024 21:32:39 +0200
Subject: [PATCH] simplify themes

---
 assets/css/themes/base/dark.css    | 84 +++++++++++++++++++++++++++
 assets/css/themes/base/light.css   | 83 ++++++++++++++++++++++++++
 assets/css/themes/dark-blue.css    | 80 +------------------------
 assets/css/themes/dark-green.css   | 31 ++++++++++
 assets/css/themes/dark-purple.css  | 80 +------------------------
 assets/css/themes/light-blue.css   | 93 ++----------------------------
 assets/css/themes/light-green.css  | 32 ++++++++++
 assets/css/themes/light-purple.css | 28 +++++++++
 8 files changed, 266 insertions(+), 245 deletions(-)
 create mode 100644 assets/css/themes/base/dark.css
 create mode 100644 assets/css/themes/base/light.css
 create mode 100644 assets/css/themes/dark-green.css
 create mode 100644 assets/css/themes/light-green.css
 create mode 100644 assets/css/themes/light-purple.css

diff --git a/assets/css/themes/base/dark.css b/assets/css/themes/base/dark.css
new file mode 100644
index 00000000..1c0532f1
--- /dev/null
+++ b/assets/css/themes/base/dark.css
@@ -0,0 +1,84 @@
+$text-color: #e0e0e0;
+
+$danger-color: #6d2a20;
+$warning-color: #6d421a;
+$success-color: #25603e;
+$information-color: #1c606a;
+$special-color: #65206e;
+
+$upvote-color: #5b9b26;
+$downvote-color: #da3412;
+$fave-color: #a18e27;
+$comment-color: #b099dd;
+$hide-color: #da3412;
+
+$tag-default-color: #1b3c21;
+$tag-error-color: #4f181d;
+$tag-rating-color: #113456;
+$tag-origin-color: #1d1858;
+$tag-character-color: #193f47;
+$tag-oc-color: #451f47;
+$tag-species-color: #362118;
+$tag-body-type-color: #393939;
+$tag-content-fanmade-color: #622c4e;
+$tag-content-official-color: #4b491c;
+$tag-spoiler-color: #4f3811;
+
+$spoiler-color: #0f0f0f;
+
+@define-mixin tag-color $tagname, $color, $text-percentage: 35, $border-percentage: 15 {
+  --tag-$(tagname)-color: $(color);
+  --tag-$(tagname)-border-color: hsl(from $color h s calc(l + $border-percentage));
+  --tag-$(tagname)-text-color: hsl(from $color h s calc(l + $text-percentage));
+}
+
+@define-mixin type-color $type, $color {
+  --$(type)-color: $color;
+  --$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 10));
+  --$(type)-muted-color: hsl(from $color h calc(s - 10) calc(l - 7));
+  --$(type)-dark-color: hsl(from $color h calc(s - 30) calc(l - 11));
+  --$(type)-link-color: hsl(from $color h calc(s + 10) calc(l + 45));
+}
+
+:root {
+  /* Main colors */
+  --text-color: $text-color;
+  --text-light-color: $text-color;
+
+  /* Link colors */
+  --link-hover-color: $text-color;
+
+  /* Interaction (vote) colors */
+  --upvote-color: $upvote-color;
+  --downvote-color: $downvote-color;
+  --fave-color: $fave-color;
+  --comment-color: $comment-color;
+  --hide-color: $hide-color;
+
+  /* Spoiler colors */
+  --spoiler-color: $spoiler-color;
+  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
+
+  /* The invisible color */
+  --invisible-color: #00000000;
+
+  /* Type (information category) colors */
+  @mixin type-color success, $success-color;
+  @mixin type-color warning, $warning-color;
+  @mixin type-color danger, $danger-color;
+  @mixin type-color information, $information-color;
+  @mixin type-color special, $special-color;
+
+  /* Tag colors */
+  @mixin tag-color default, $tag-default-color;
+  @mixin tag-color error, $tag-error-color, 37;
+  @mixin tag-color rating, $tag-rating-color, 37;
+  @mixin tag-color origin, $tag-origin-color, 42;
+  @mixin tag-color character, $tag-character-color;
+  @mixin tag-color oc, $tag-oc-color, 40;
+  @mixin tag-color species, $tag-species-color, 37;
+  @mixin tag-color body-type, $tag-body-type-color, 45, 12;
+  @mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
+  @mixin tag-color content-official, $tag-content-official-color;
+  @mixin tag-color spoiler, $tag-spoiler-color;
+}
diff --git a/assets/css/themes/base/light.css b/assets/css/themes/base/light.css
new file mode 100644
index 00000000..04c17fc9
--- /dev/null
+++ b/assets/css/themes/base/light.css
@@ -0,0 +1,83 @@
+$text-color: #121212;
+
+$danger-color: #e78f82;
+$warning-color: #edb76c;
+$success-color: #8de3b1;
+$information-color: #90dce7;
+$special-color: #dc77e9;
+
+$upvote-color: #67af2b;
+$downvote-color: #cf0001;
+$fave-color: #c4b246;
+$comment-color: #9273d0;
+$hide-color: #cf0001;
+
+$tag-default-color: #84dd96;
+$tag-error-color: #eb848c;
+$tag-rating-color: #9cc6f0;
+$tag-origin-color: #b5b0ed;
+$tag-character-color: #b6e4ed;
+$tag-oc-color: #efaaf2;
+$tag-species-color: #e1997a;
+$tag-body-type-color: #bcbcbc;
+$tag-content-fanmade-color: #e388c2;
+$tag-content-official-color: #ebe9b3;
+$tag-spoiler-color: #dcb879;
+
+$spoiler-color: #0f0f0f;
+
+@define-mixin tag-color $tagname, $color, $text-percentage: 40, $border-percentage: 15 {
+  --tag-$(tagname)-color: $(color);
+  --tag-$(tagname)-border-color: hsl(from $color h s calc(l - $border-percentage));
+  --tag-$(tagname)-text-color: hsl(from $color h s calc(l - $text-percentage));
+}
+
+@define-mixin type-color $type, $color {
+  --$(type)-color: $color;
+  --$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 5));
+  --$(type)-muted-color: hsl(from $color h calc(s - 7) calc(l - 12));
+  --$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l + 20));
+  --$(type)-link-color: hsl(from $color h calc(s + 50) calc(l - 47));
+}
+
+:root {
+  /* Main colors */
+  --text-color: $text-color;
+
+  /* Link colors */
+  --link-hover-color: $text-color;
+
+  /* Interaction (vote) colors */
+  --upvote-color: $upvote-color;
+  --downvote-color: $downvote-color;
+  --fave-color: $fave-color;
+  --comment-color: $comment-color;
+  --hide-color: $hide-color;
+
+  /* Spoiler colors */
+  --spoiler-color: $spoiler-color;
+  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
+
+  /* The invisible color */
+  --invisible-color: #00000000;
+
+  /* Type (information category) colors */
+  @mixin type-color success, $success-color;
+  @mixin type-color warning, $warning-color;
+  @mixin type-color danger, $danger-color;
+  @mixin type-color information, $information-color;
+  @mixin type-color special, $special-color;
+
+  /* Tag colors */
+  @mixin tag-color default, $tag-default-color;
+  @mixin tag-color error, $tag-error-color, 37;
+  @mixin tag-color rating, $tag-rating-color, 37;
+  @mixin tag-color origin, $tag-origin-color, 42;
+  @mixin tag-color character, $tag-character-color;
+  @mixin tag-color oc, $tag-oc-color, 40;
+  @mixin tag-color species, $tag-species-color, 37;
+  @mixin tag-color body-type, $tag-body-type-color, 45, 12;
+  @mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
+  @mixin tag-color content-official, $tag-content-official-color;
+  @mixin tag-color spoiler, $tag-spoiler-color;
+}
diff --git a/assets/css/themes/dark-blue.css b/assets/css/themes/dark-blue.css
index f9652768..861fddd1 100644
--- a/assets/css/themes/dark-blue.css
+++ b/assets/css/themes/dark-blue.css
@@ -1,57 +1,15 @@
-$background-color: #0f161e;
-$text-color: #e0e0e0;
+@import "themes/base/dark";
 
+$background-color: #0f161e;
 $primary-color: #284371;
 $secondary-color: #546c99;
-$danger-color: #6d2a20;
-$warning-color: #6d421a;
-$success-color: #25603e;
-$information-color: #1c606a;
-$special-color: #65206e;
-
-$upvote-color: #5b9b26;
-$downvote-color: #da3412;
-$fave-color: #a18e27;
-$comment-color: #b099dd;
-$hide-color: #da3412;
-
-$tag-default-color: #1b3c21;
-$tag-error-color: #4f181d;
-$tag-rating-color: #113456;
-$tag-origin-color: #1d1858;
-$tag-character-color: #193f47;
-$tag-oc-color: #451f47;
-$tag-species-color: #362118;
-$tag-body-type-color: #393939;
-$tag-content-fanmade-color: #622c4e;
-$tag-content-official-color: #4b491c;
-$tag-spoiler-color: #4f3811;
-
-$spoiler-color: #0f0f0f;
-
-@define-mixin tag-color $tagname, $color, $text-percentage: 35, $border-percentage: 15 {
-  --tag-$(tagname)-color: $(color);
-  --tag-$(tagname)-border-color: hsl(from $color h s calc(l + $border-percentage));
-  --tag-$(tagname)-text-color: hsl(from $color h s calc(l + $text-percentage));
-}
-
-@define-mixin type-color $type, $color {
-  --$(type)-color: $color;
-  --$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 10));
-  --$(type)-muted-color: hsl(from $color h calc(s - 10) calc(l - 7));
-  --$(type)-dark-color: hsl(from $color h calc(s - 30) calc(l - 11));
-  --$(type)-link-color: hsl(from $color h calc(s + 10) calc(l + 45));
-}
 
 :root {
   /* Main colors */
   --background-color: $background-color;
-  --text-color: $text-color;
-  --text-light-color: $text-color;
 
   /* Link colors */
   --link-color: hsl(from $primary-color h calc(s + 10) calc(l + 40));
-  --link-hover-color: $text-color;
 
   /* Primary color (block backgrounds and such) */
   --primary-color: $primary-color;
@@ -66,38 +24,4 @@ $spoiler-color: #0f0f0f;
   --secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
   --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 25));
   --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
-
-  /* Interaction (vote) colors */
-  --upvote-color: $upvote-color;
-  --downvote-color: $downvote-color;
-  --fave-color: $fave-color;
-  --comment-color: $comment-color;
-  --hide-color: $hide-color;
-
-  /* Spoiler colors */
-  --spoiler-color: $spoiler-color;
-  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
-
-  /* The invisible color */
-  --invisible-color: #00000000;
-
-  /* Type (information category) colors */
-  @mixin type-color success, $success-color;
-  @mixin type-color warning, $warning-color;
-  @mixin type-color danger, $danger-color;
-  @mixin type-color information, $information-color;
-  @mixin type-color special, $special-color;
-
-  /* Tag colors */
-  @mixin tag-color default, $tag-default-color;
-  @mixin tag-color error, $tag-error-color, 37;
-  @mixin tag-color rating, $tag-rating-color, 37;
-  @mixin tag-color origin, $tag-origin-color, 42;
-  @mixin tag-color character, $tag-character-color;
-  @mixin tag-color oc, $tag-oc-color, 40;
-  @mixin tag-color species, $tag-species-color, 37;
-  @mixin tag-color body-type, $tag-body-type-color, 45, 12;
-  @mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
-  @mixin tag-color content-official, $tag-content-official-color;
-  @mixin tag-color spoiler, $tag-spoiler-color;
 }
diff --git a/assets/css/themes/dark-green.css b/assets/css/themes/dark-green.css
new file mode 100644
index 00000000..bd7791a0
--- /dev/null
+++ b/assets/css/themes/dark-green.css
@@ -0,0 +1,31 @@
+@import "themes/base/dark";
+
+$background-color: #131513;
+$primary-color: #235c36;
+$secondary-color: #3f7a64;
+$success-color: #1c7843;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h calc(s - 10) calc(l + 40));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 10));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 15));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l + 5));
+  --secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 23));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
+
+  /* Type (information category) colors */
+  @mixin type-color success, $success-color;
+}
diff --git a/assets/css/themes/dark-purple.css b/assets/css/themes/dark-purple.css
index fca9dde7..a74afacf 100644
--- a/assets/css/themes/dark-purple.css
+++ b/assets/css/themes/dark-purple.css
@@ -1,57 +1,15 @@
-$background-color: #15121a;
-$text-color: #e0e0e0;
+@import "themes/base/dark";
 
+$background-color: #15121a;
 $primary-color: #36274e;
 $secondary-color: #785b99;
-$danger-color: #6d2a20;
-$warning-color: #715227;
-$success-color: #25603e;
-$information-color: #1c606a;
-$special-color: #65206e;
-
-$upvote-color: #5b9b26;
-$downvote-color: #da3412;
-$fave-color: #a18e27;
-$comment-color: #b099dd;
-$hide-color: #da3412;
-
-$tag-default-color: #1b3c21;
-$tag-error-color: #4f181d;
-$tag-rating-color: #113456;
-$tag-origin-color: #1d1858;
-$tag-character-color: #193f47;
-$tag-oc-color: #451f47;
-$tag-species-color: #362118;
-$tag-body-type-color: #393939;
-$tag-content-fanmade-color: #622c4e;
-$tag-content-official-color: #4b491c;
-$tag-spoiler-color: #4f3811;
-
-$spoiler-color: #0f0f0f;
-
-@define-mixin tag-color $tagname, $color, $text-percentage: 35, $border-percentage: 15 {
-  --tag-$(tagname)-color: $(color);
-  --tag-$(tagname)-border-color: hsl(from $color h s calc(l + $border-percentage));
-  --tag-$(tagname)-text-color: hsl(from $color h s calc(l + $text-percentage));
-}
-
-@define-mixin type-color $type, $color {
-  --$(type)-color: $color;
-  --$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 10));
-  --$(type)-muted-color: hsl(from $color h calc(s - 10) calc(l - 7));
-  --$(type)-dark-color: hsl(from $color h calc(s - 30) calc(l - 11));
-  --$(type)-link-color: hsl(from $color h calc(s + 10) calc(l + 45));
-}
 
 :root {
   /* Main colors */
   --background-color: $background-color;
-  --text-color: $text-color;
-  --text-light-color: $text-color;
 
   /* Link colors */
   --link-color: hsl(from $primary-color h calc(s + 10) calc(l + 50));
-  --link-hover-color: $text-color;
 
   /* Primary color (block backgrounds and such) */
   --primary-color: $primary-color;
@@ -66,38 +24,4 @@ $spoiler-color: #0f0f0f;
   --secondary-muted-color: hsl(from $secondary-color h s calc(l - 17));
   --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l - 25));
   --secondary-link-color: hsl(from $secondary-color h s calc(l + 40));
-
-  /* Interaction (vote) colors */
-  --upvote-color: $upvote-color;
-  --downvote-color: $downvote-color;
-  --fave-color: $fave-color;
-  --comment-color: $comment-color;
-  --hide-color: $hide-color;
-
-  /* Spoiler colors */
-  --spoiler-color: $spoiler-color;
-  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
-
-  /* The invisible color */
-  --invisible-color: #00000000;
-
-  /* Type (information category) colors */
-  @mixin type-color success, $success-color;
-  @mixin type-color warning, $warning-color;
-  @mixin type-color danger, $danger-color;
-  @mixin type-color information, $information-color;
-  @mixin type-color special, $special-color;
-
-  /* Tag colors */
-  @mixin tag-color default, $tag-default-color;
-  @mixin tag-color error, $tag-error-color, 37;
-  @mixin tag-color rating, $tag-rating-color, 37;
-  @mixin tag-color origin, $tag-origin-color, 42;
-  @mixin tag-color character, $tag-character-color;
-  @mixin tag-color oc, $tag-oc-color, 40;
-  @mixin tag-color species, $tag-species-color, 37;
-  @mixin tag-color body-type, $tag-body-type-color, 45, 12;
-  @mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
-  @mixin tag-color content-official, $tag-content-official-color;
-  @mixin tag-color spoiler, $tag-spoiler-color;
 }
diff --git a/assets/css/themes/light-blue.css b/assets/css/themes/light-blue.css
index aaa031d5..57596324 100644
--- a/assets/css/themes/light-blue.css
+++ b/assets/css/themes/light-blue.css
@@ -1,57 +1,16 @@
-$background-color: #f7f7f7;
-$text-color: #121212;
+@import "themes/base/light";
 
+$background-color: #f7f7f7;
 $primary-color: #4b9ad3;
 $secondary-color: #62a7d9;
-$danger-color: #e78f82;
-$warning-color: #edb76c;
-$success-color: #8de3b1;
-$information-color: #90dce7;
-$special-color: #dc77e9;
-
-$upvote-color: #67af2b;
-$downvote-color: #cf0001;
-$fave-color: #c4b246;
-$comment-color: #9273d0;
-$hide-color: #cf0001;
-
-$tag-default-color: #84dd96;
-$tag-error-color: #eb848c;
-$tag-rating-color: #9cc6f0;
-$tag-origin-color: #b5b0ed;
-$tag-character-color: #b6e4ed;
-$tag-oc-color: #efaaf2;
-$tag-species-color: #e1997a;
-$tag-body-type-color: #bcbcbc;
-$tag-content-fanmade-color: #e388c2;
-$tag-content-official-color: #ebe9b3;
-$tag-spoiler-color: #dcb879;
-
-$spoiler-color: #0f0f0f;
-
-@define-mixin tag-color $tagname, $color, $text-percentage: 40, $border-percentage: 15 {
-  --tag-$(tagname)-color: $(color);
-  --tag-$(tagname)-border-color: hsl(from $color h s calc(l - $border-percentage));
-  --tag-$(tagname)-text-color: hsl(from $color h s calc(l - $text-percentage));
-}
-
-@define-mixin type-color $type, $color {
-  --$(type)-color: $color;
-  --$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 5));
-  --$(type)-muted-color: hsl(from $color h calc(s - 7) calc(l - 12));
-  --$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l + 20));
-  --$(type)-link-color: hsl(from $color h calc(s + 50) calc(l - 47));
-}
 
 :root {
   /* Main colors */
   --background-color: $background-color;
-  --text-color: $text-color;
   --text-light-color: $background-color;
 
   /* Link colors */
   --link-color: hsl(from $primary-color h calc(s + 25) calc(l - 25));
-  --link-hover-color: $text-color;
 
   /* Primary color (block backgrounds and such) */
   --primary-color: $primary-color;
@@ -66,58 +25,14 @@ $spoiler-color: #0f0f0f;
   --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
   --secondary-dark-color: hsl(from $secondary-color h calc(s - 5) calc(l + 25));
   --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
-
-  /* Interaction (vote) colors */
-  --upvote-color: $upvote-color;
-  --downvote-color: $downvote-color;
-  --fave-color: $fave-color;
-  --comment-color: $comment-color;
-  --hide-color: $hide-color;
-
-  /* Spoiler colors */
-  --spoiler-color: $spoiler-color;
-  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
-
-  /* The invisible color */
-  --invisible-color: #00000000;
-
-  /* Type (information category) colors */
-  @mixin type-color success, $success-color;
-  @mixin type-color warning, $warning-color;
-  @mixin type-color danger, $danger-color;
-  @mixin type-color information, $information-color;
-  @mixin type-color special, $special-color;
-
-  /* Tag colors */
-  @mixin tag-color default, $tag-default-color;
-  @mixin tag-color error, $tag-error-color, 37;
-  @mixin tag-color rating, $tag-rating-color, 37;
-  @mixin tag-color origin, $tag-origin-color, 42;
-  @mixin tag-color character, $tag-character-color;
-  @mixin tag-color oc, $tag-oc-color, 40;
-  @mixin tag-color species, $tag-species-color, 37;
-  @mixin tag-color body-type, $tag-body-type-color, 45, 12;
-  @mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
-  @mixin tag-color content-official, $tag-content-official-color;
-  @mixin tag-color spoiler, $tag-spoiler-color;
 }
 
-header {
+nav.header__secondary {
   /* Apparently people will put me on a cross if
      I don't use Trixie colors, so here you go! */
   background-color: #e2ebf2;
 }
 
-/* Sigh... my poor poor pretty CSS... */
-.header__search {
-  background-color: var(--primary-color);
-}
-
-.header__search * {
-  color: var(--text-light-color) !important;
-}
-
-.input:focus,
-.header__search > .input:hover {
+nav.header__secondary .header__link {
   color: var(--text-color) !important;
 }
diff --git a/assets/css/themes/light-green.css b/assets/css/themes/light-green.css
new file mode 100644
index 00000000..bfe93365
--- /dev/null
+++ b/assets/css/themes/light-green.css
@@ -0,0 +1,32 @@
+@import "themes/base/light";
+
+$background-color: #f7f7f7;
+$primary-color: #43b268;
+$secondary-color: #88c3ac;
+$success-color: #6be49d;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+  --text-light-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h s calc(l - 12));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 35));
+  --primary-dark-color: hsl(from $primary-color h s calc(l + 45));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s + 5) calc(l + 23));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+
+  /* Type (information category) colors */
+  @mixin type-color success, $success-color;
+}
diff --git a/assets/css/themes/light-purple.css b/assets/css/themes/light-purple.css
new file mode 100644
index 00000000..6d704e2d
--- /dev/null
+++ b/assets/css/themes/light-purple.css
@@ -0,0 +1,28 @@
+@import "themes/base/light";
+
+$background-color: #f7f7f7;
+$primary-color: #9c72e0;
+$secondary-color: #9f74cf;
+
+:root {
+  /* Main colors */
+  --background-color: $background-color;
+  --text-light-color: $background-color;
+
+  /* Link colors */
+  --link-color: hsl(from $primary-color h s calc(l - 7));
+
+  /* Primary color (block backgrounds and such) */
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s + 5) calc(l - 5));
+  --primary-muted-color: hsl(from $primary-color h calc(s + 7) calc(l + 20));
+  --primary-dark-color: hsl(from $primary-color h s calc(l + 28));
+  --primary-link-color: var(--link-color); /* for consistency */
+
+  /* Secondary color (most buttons) */
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l - 45));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s + 5) calc(l + 18));
+  --secondary-dark-color: hsl(from $secondary-color h calc(s + 5) calc(l + 23));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l - 55));
+}