From 16540f57f0c2a09344f6c69223efc4b7a75f78f7 Mon Sep 17 00:00:00 2001
From: "Luna D." <luna@nighty.cloud>
Date: Tue, 17 Dec 2024 19:35:47 +0100
Subject: [PATCH] review fixes

---
 assets/css/common/measurements.css            | 12 +++--
 assets/css/common/mixins.css                  |  8 ++--
 assets/css/elements/base.css                  | 22 ++++-----
 assets/css/elements/burger.css                |  4 +-
 assets/css/elements/header.css                |  4 +-
 assets/css/elements/layout.css                |  4 +-
 assets/css/elements/media.css                 |  2 +-
 assets/css/elements/shame.css                 |  4 +-
 assets/css/themes/dark-blue.css               |  2 +-
 assets/css/themes/dark-cyan.css               |  2 +-
 assets/css/themes/dark-green.css              |  2 +-
 assets/css/themes/dark-orange.css             |  2 +-
 assets/css/themes/dark-pink.css               |  2 +-
 assets/css/themes/dark-purple.css             |  2 +-
 assets/css/themes/dark-red.css                |  2 +-
 assets/css/themes/dark-silver.css             |  2 +-
 assets/css/themes/dark-yellow.css             |  2 +-
 assets/css/themes/light-blue.css              |  2 +-
 assets/css/themes/light-cyan.css              |  2 +-
 assets/css/themes/light-green.css             |  2 +-
 assets/css/themes/light-orange.css            |  2 +-
 assets/css/themes/light-pink.css              |  2 +-
 assets/css/themes/light-purple.css            |  2 +-
 assets/css/themes/light-red.css               |  2 +-
 assets/css/themes/light-silver.css            |  2 +-
 assets/css/themes/light-yellow.css            |  2 +-
 assets/css/views/commissions.css              |  2 +-
 assets/css/views/posts.css                    |  2 +-
 assets/css/views/profiles.css                 |  6 +--
 assets/css/views/tags.css                     |  8 ++--
 lib/philomena/users/user.ex                   | 19 ++++++--
 .../templates/setting/edit.html.slime         |  5 ++-
 lib/philomena_web/views/layout_view.ex        | 24 ++--------
 lib/philomena_web/views/setting_view.ex       | 45 ++++++-------------
 .../20241216165826_convert_user_themes.exs    |  8 ++++
 35 files changed, 103 insertions(+), 112 deletions(-)

diff --git a/assets/css/common/measurements.css b/assets/css/common/measurements.css
index 235c3877f..da6130051 100644
--- a/assets/css/common/measurements.css
+++ b/assets/css/common/measurements.css
@@ -6,6 +6,10 @@ $max-limited-desktop-width: 1150px;
 $min-desktop-width: 800px;
 $limited-layout-width: 980px;
 $min-desktop-thumb-width: 700px;
+$image-tiny-size: 64px;
+$image-small-size: 128px;
+$image-medium-size: 256px;
+$image-large-size: 512px;
 
 :root {
   --medium-layout-width: $medium-layout-width;
@@ -22,10 +26,10 @@ $min-desktop-thumb-width: 700px;
   --padding-normal: 1em;
   --centered-margin: 24px;
   --normal-margin: 12px;
-  --image-tiny-size: 64px;
-  --image-small-size: 128px;
-  --image-medium-size: 256px;
-  --image-large-size: 512px;
+  --image-tiny-size: $image-tiny-size;
+  --image-small-size: $image-small-size;
+  --image-medium-size: $image-medium-size;
+  --image-large-size: $image-large-size;
   --header-height: 36px;
   --header-field-height: 28px;
   --header-sub-height: 32px;
diff --git a/assets/css/common/mixins.css b/assets/css/common/mixins.css
index 18088f26d..5fa70103a 100644
--- a/assets/css/common/mixins.css
+++ b/assets/css/common/mixins.css
@@ -1,8 +1,8 @@
 @define-mixin image-alt-size $name, $size {
-  @media (min-width: $(size)) {
+  @media (min-width: $size) {
     img[alt="$(name)"] {
-      max-height: $(size) !important;
-      max-width: $(size) !important;
+      max-height: $size !important;
+      max-width: $size !important;
     }
   }
 }
@@ -67,7 +67,7 @@
   background: $(color);
 }
 
-/*  16x16 checkerboard */
+/* 16x16 checkerboard */
 @define-mixin img-checkerboard-background {
   img {
     background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAGUlEQVR42mP474AKGdDhCFGALoChYWQoAACpW7+B5lv5BwAAAABJRU5ErkJggg==");
diff --git a/assets/css/elements/base.css b/assets/css/elements/base.css
index 2d6fb909f..09c6a429f 100644
--- a/assets/css/elements/base.css
+++ b/assets/css/elements/base.css
@@ -47,7 +47,7 @@ h4 {
   margin-bottom: 0.5em;
 }
 
-/*  Slightly dirty, no clean way to strip top margins off headers though */
+/* Slightly dirty, no clean way to strip top margins off headers though */
 .remove-top-margin {
   margin-top: 0;
 }
@@ -201,7 +201,7 @@ hr {
   background: var(--danger-light-color);
   border-color: var(--danger-color);
 }
-/*  Make HTML lists with multi-line text readable */
+/* Make HTML lists with multi-line text readable */
 .rule ul {
   margin: 0;
   padding: 5px 20px;
@@ -237,7 +237,7 @@ hr {
   }
 }
 
-/*  Text Editor */
+/* Text Editor */
 blockquote {
   margin: 1em 2em;
   border: 1px dotted var(--foreground-color);
@@ -253,13 +253,13 @@ blockquote .paragraph:last-child {
   margin-bottom: 0;
 }
 
-/*  Prevent blockquote from gaining far too much indentation and breaking. */
+/* Prevent blockquote from gaining far too much indentation and breaking. */
 blockquote blockquote blockquote blockquote blockquote blockquote {
   margin: 1em 0;
   padding: 1em 2px;
 }
 
-/*  Horizontal space is at a high premium on mobile. */
+/* Horizontal space is at a high premium on mobile. */
 @media (max-width: $min-desktop-width) {
   blockquote {
     margin: 1em 4px;
@@ -329,10 +329,12 @@ blockquote blockquote blockquote blockquote blockquote blockquote {
   margin-bottom: 6px;
 }
 
-@mixin image-alt-size tiny, var(--image-tiny-size);
-@mixin image-alt-size small, var(--image-small-size);
-@mixin image-alt-size medium, var(--image-medium-size);
-@mixin image-alt-size large, var(--image-large-size);
+/* We need to use $variables here because @media tags
+ * do not work with CSS3 custom properties (variables) */
+@mixin image-alt-size tiny, $image-tiny-size;
+@mixin image-alt-size small, $image-small-size;
+@mixin image-alt-size medium, $image-medium-size;
+@mixin image-alt-size large, $image-large-size;
 
 /* code styling */
 /* You might be asking what's up with this silly mixin
@@ -443,7 +445,7 @@ i.favicon-home {
   display: inline-block;
 }
 
-/*  changelog */
+/* changelog */
 .commit-sha {
   background: var(--assistant-color);
   border: 1px solid var(--assistant-border-color);
diff --git a/assets/css/elements/burger.css b/assets/css/elements/burger.css
index f081cd9cb..d72d822db 100644
--- a/assets/css/elements/burger.css
+++ b/assets/css/elements/burger.css
@@ -8,7 +8,7 @@
   display: none;
 }
 
-/*  content sliding open */
+/* content sliding open */
 #container.open {
   @mixin transform-n-animation open, 0.4s, translate(210px, 0);
 }
@@ -23,7 +23,7 @@
   }
 }
 
-/*  content closing */
+/* content closing */
 #container.close {
   animation: close 0.3s ease-in-out;
 }
diff --git a/assets/css/elements/header.css b/assets/css/elements/header.css
index 401c99a09..223b052c5 100644
--- a/assets/css/elements/header.css
+++ b/assets/css/elements/header.css
@@ -18,7 +18,7 @@
   color: var(--unread-message-color);
 }
 
-/*  For text preceded by an icon */
+/* For text preceded by an icon */
 .fa__text {
   padding-left: 6px;
 }
@@ -98,7 +98,7 @@ select.header__input:focus optgroup {
 .header__search__button,
 .header__search__button:visited {
   border: none;
-  /*  Chrome loves extra padding for some reason */
+  /* Chrome loves extra padding for some reason */
   padding-top: 0;
   padding-bottom: 0;
   line-height: var(--header-field-height);
diff --git a/assets/css/elements/layout.css b/assets/css/elements/layout.css
index 4766e397d..367fa248a 100644
--- a/assets/css/elements/layout.css
+++ b/assets/css/elements/layout.css
@@ -125,7 +125,7 @@ nav {
 }
 
 /* Use the following two classes to center content when user has layout centering enabled: */
-/*  TODO replace this bullshit naming, this is not actually BEM at all and makes no sense */
+/* TODO replace this bullshit naming, this is not actually BEM at all and makes no sense */
 #container.layout--center-aligned .center--layout {
   justify-content: center;
   margin-left: auto;
@@ -188,7 +188,7 @@ nav {
   justify-content: center;
 }
 
-/*  Mostly for the header */
+/* Mostly for the header */
 .flex--start-bunched {
   justify-content: flex-start;
 }
diff --git a/assets/css/elements/media.css b/assets/css/elements/media.css
index d7e5e7dc3..a4b4158c6 100644
--- a/assets/css/elements/media.css
+++ b/assets/css/elements/media.css
@@ -62,7 +62,7 @@ a.media-box__header--link:hover {
   background-color: var(--success-color);
 }
 
-/*  TODO: properly fix this */
+/* TODO: properly fix this */
 .media-box__content .image-container {
   width: 100%;
   height: 100%;
diff --git a/assets/css/elements/shame.css b/assets/css/elements/shame.css
index 092deb6cb..95518174f 100644
--- a/assets/css/elements/shame.css
+++ b/assets/css/elements/shame.css
@@ -1,5 +1,5 @@
-/*  For more shame related to this, see the <style> element inside app/views/adverts/index.html.slim */
-/*  Until HTML/CSS includes a native way to resize iframes based on their content, we do this approximation with viewport units. */
+/* For more shame related to this, see the <style> element inside app/views/adverts/index.html.slim */
+/* Until HTML/CSS includes a native way to resize iframes based on their content, we do this approximation with viewport units. */
 .ad-sandbox {
   height: 18vw;
   max-height: 113px;
diff --git a/assets/css/themes/dark-blue.css b/assets/css/themes/dark-blue.css
index f63e9b5a3..e58ab72eb 100644
--- a/assets/css/themes/dark-blue.css
+++ b/assets/css/themes/dark-blue.css
@@ -65,7 +65,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/dark-cyan.css b/assets/css/themes/dark-cyan.css
index 3c2a70a26..d2ea675bf 100644
--- a/assets/css/themes/dark-cyan.css
+++ b/assets/css/themes/dark-cyan.css
@@ -64,7 +64,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/dark-green.css b/assets/css/themes/dark-green.css
index 88889d568..dfe68453c 100644
--- a/assets/css/themes/dark-green.css
+++ b/assets/css/themes/dark-green.css
@@ -64,7 +64,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/dark-orange.css b/assets/css/themes/dark-orange.css
index 6f3755ad5..2233c1459 100644
--- a/assets/css/themes/dark-orange.css
+++ b/assets/css/themes/dark-orange.css
@@ -64,7 +64,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/dark-pink.css b/assets/css/themes/dark-pink.css
index 633075ede..22b6dcc4d 100644
--- a/assets/css/themes/dark-pink.css
+++ b/assets/css/themes/dark-pink.css
@@ -64,7 +64,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/dark-purple.css b/assets/css/themes/dark-purple.css
index a3ea493f7..f38a900f1 100644
--- a/assets/css/themes/dark-purple.css
+++ b/assets/css/themes/dark-purple.css
@@ -65,7 +65,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/dark-red.css b/assets/css/themes/dark-red.css
index f753da31b..d3a8b01b3 100644
--- a/assets/css/themes/dark-red.css
+++ b/assets/css/themes/dark-red.css
@@ -66,7 +66,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/dark-silver.css b/assets/css/themes/dark-silver.css
index ca5c00db1..8d4271d16 100644
--- a/assets/css/themes/dark-silver.css
+++ b/assets/css/themes/dark-silver.css
@@ -64,7 +64,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/dark-yellow.css b/assets/css/themes/dark-yellow.css
index ab1fedd2a..e0abbbfc9 100644
--- a/assets/css/themes/dark-yellow.css
+++ b/assets/css/themes/dark-yellow.css
@@ -64,7 +64,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/light-blue.css b/assets/css/themes/light-blue.css
index 78977bd93..37e733f76 100644
--- a/assets/css/themes/light-blue.css
+++ b/assets/css/themes/light-blue.css
@@ -48,7 +48,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/light-cyan.css b/assets/css/themes/light-cyan.css
index 265412daf..fffbf1188 100644
--- a/assets/css/themes/light-cyan.css
+++ b/assets/css/themes/light-cyan.css
@@ -45,7 +45,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/light-green.css b/assets/css/themes/light-green.css
index 54122ecaa..ba35a9113 100644
--- a/assets/css/themes/light-green.css
+++ b/assets/css/themes/light-green.css
@@ -46,7 +46,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/light-orange.css b/assets/css/themes/light-orange.css
index e50b150c8..39eba45b7 100644
--- a/assets/css/themes/light-orange.css
+++ b/assets/css/themes/light-orange.css
@@ -45,7 +45,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/light-pink.css b/assets/css/themes/light-pink.css
index 0a4ceee84..a8c8be719 100644
--- a/assets/css/themes/light-pink.css
+++ b/assets/css/themes/light-pink.css
@@ -45,7 +45,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/light-purple.css b/assets/css/themes/light-purple.css
index 168f4c044..3bb6de3e8 100644
--- a/assets/css/themes/light-purple.css
+++ b/assets/css/themes/light-purple.css
@@ -45,7 +45,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/light-red.css b/assets/css/themes/light-red.css
index d3d025d00..27dbc32f1 100644
--- a/assets/css/themes/light-red.css
+++ b/assets/css/themes/light-red.css
@@ -45,7 +45,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/light-silver.css b/assets/css/themes/light-silver.css
index 6eb3c104e..66b20c7e1 100644
--- a/assets/css/themes/light-silver.css
+++ b/assets/css/themes/light-silver.css
@@ -45,7 +45,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/themes/light-yellow.css b/assets/css/themes/light-yellow.css
index 97f5a0dd6..445dac32f 100644
--- a/assets/css/themes/light-yellow.css
+++ b/assets/css/themes/light-yellow.css
@@ -45,7 +45,7 @@ $image-overlay-background-color: #000000;
 
 /* Put any color variable overrides here.
  *
- * Note: due to (probably unintentional) behavior of Vite,
+ * Note: due to (intentional and bad) behavior of Vite,
  * this needs to contain something unique that the other
  * themes do not have, as Vite does not compile what it considers
  * "inputs with identical contents", and it does not seem to care
diff --git a/assets/css/views/commissions.css b/assets/css/views/commissions.css
index c7974c938..f6d088348 100644
--- a/assets/css/views/commissions.css
+++ b/assets/css/views/commissions.css
@@ -1,4 +1,4 @@
-/*  Category Tag */
+/* Category Tag */
 .commission__category {
   border: 1px solid;
   display: inline-block;
diff --git a/assets/css/views/posts.css b/assets/css/views/posts.css
index 8e7dab941..f48c9d7e9 100644
--- a/assets/css/views/posts.css
+++ b/assets/css/views/posts.css
@@ -1,4 +1,4 @@
-/*  Post diffs */
+/* Post diffs */
 del.differ {
   width: 670px;
   background: var(--danger-light-color);
diff --git a/assets/css/views/profiles.css b/assets/css/views/profiles.css
index 63a51e8ae..3a0caeaf2 100644
--- a/assets/css/views/profiles.css
+++ b/assets/css/views/profiles.css
@@ -8,11 +8,11 @@
 }
 
 .profile-top__name-and-links {
-  /*  Allow options extra space on high width even when name is short */
+  /* Allow options extra space on high width even when name is short */
   flex: 1 1 0%;
 }
 
-/*  Lessen h1's margins because it's not butting up against text */
+/* Lessen h1's margins because it's not butting up against text */
 h1.profile-top__name-header {
   margin-top: 10px;
   margin-bottom: 0;
@@ -47,7 +47,7 @@ td.table--stats__sparkline {
 
 .profile-top__options__column {
   flex: 0 0 auto;
-  /*  Override terrible browser styling */
+  /* Override terrible browser styling */
   list-style: none;
   padding: 0;
   margin: 0.5em 2em 0.5em 0;
diff --git a/assets/css/views/tags.css b/assets/css/views/tags.css
index 5407365aa..1e12f29ae 100644
--- a/assets/css/views/tags.css
+++ b/assets/css/views/tags.css
@@ -1,4 +1,4 @@
-/*  Tagsinput */
+/* Tagsinput */
 .tagsinput {
   display: block;
   background: var(--background-color);
@@ -23,7 +23,7 @@
   margin-bottom: 5px;
 }
 
-/*  Autocomplete */
+/* Autocomplete */
 .autocomplete__list {
   cursor: pointer;
   display: inline-block;
@@ -47,7 +47,7 @@
   color: var(--base-color);
 }
 
-/*  Tags */
+/* Tags */
 .tag {
   border: 1px solid;
   display: inline-table;
@@ -123,7 +123,7 @@
   margin-left: 5px;
 }
 
-/*  Quick Tag Table */
+/* Quick Tag Table */
 .quick-tag-table__tab > div {
   display: inline-block;
   padding: 0 6px;
diff --git a/lib/philomena/users/user.ex b/lib/philomena/users/user.ex
index e8ab1e14b..aec16e2b0 100644
--- a/lib/philomena/users/user.ex
+++ b/lib/philomena/users/user.ex
@@ -347,10 +347,7 @@ defmodule Philomena.Users.User do
       :show_sidebar_and_watched_images
     ])
     |> TagList.propagate_tag_list(:watched_tag_list, :watched_tag_ids)
-    |> validate_inclusion(
-      :theme,
-      ~W(dark-red dark-orange dark-yellow dark-blue dark-green dark-purple dark-cyan dark-pink dark-silver light-red light-orange light-yellow light-blue light-green light-purple light-cyan light-pink light-silver)
-    )
+    |> validate_inclusion(:theme, themes())
     |> validate_inclusion(:images_per_page, 1..50)
     |> validate_inclusion(:comments_per_page, 1..100)
     |> validate_inclusion(:scale_large_images, ["false", "partscaled", "true"])
@@ -606,4 +603,18 @@ defmodule Philomena.Users.User do
 
   defp remove_backup_code(user, token),
     do: user.otp_backup_codes |> Enum.reject(&Password.verify_pass(token, &1))
+
+  def theme_colors do
+    ~W(red orange yellow blue green purple cyan pink silver)
+  end
+
+  def theme_names do
+    ~W(dark light)
+  end
+
+  def themes do
+    for name <- theme_names(), color <- theme_colors() do
+      "#{name}-#{color}"
+    end
+  end
 end
diff --git a/lib/philomena_web/templates/setting/edit.html.slime b/lib/philomena_web/templates/setting/edit.html.slime
index 66b084fa2..0604e3830 100644
--- a/lib/philomena_web/templates/setting/edit.html.slime
+++ b/lib/philomena_web/templates/setting/edit.html.slime
@@ -86,8 +86,9 @@ h1 Content Settings
             label> Theme color
             => select f, :theme_color, theme_colors(), class: "input"
             = error_tag f, :theme_color
-            .fieldlabel: i Color of the theme, don't forget to save settings to apply the theme
-          .hidden#js-theme-paths data-theme-paths=theme_paths_json()
+            .fieldlabel: i Color of the theme
+            .fieldlabel: strong Don't forget to save the settings to apply the theme!
+          .hidden#js-theme-paths data-theme-paths=theme_paths_json(@conn)
           .field
             => label f, :scale_large_images
             => select f, :scale_large_images, scale_options(), class: "input"
diff --git a/lib/philomena_web/views/layout_view.ex b/lib/philomena_web/views/layout_view.ex
index 9b7904436..0319dce8f 100644
--- a/lib/philomena_web/views/layout_view.ex
+++ b/lib/philomena_web/views/layout_view.ex
@@ -4,8 +4,11 @@ defmodule PhilomenaWeb.LayoutView do
   import PhilomenaWeb.Config
   alias PhilomenaWeb.ImageView
   alias Philomena.Config
+  alias Philomena.Users.User
   alias Plug.Conn
 
+  @themes User.themes()
+
   def layout_class(conn) do
     conn.assigns[:layout_class] || "layout--narrow"
   end
@@ -70,26 +73,7 @@ defmodule PhilomenaWeb.LayoutView do
   end
 
   def stylesheet_path(conn, %{theme: theme})
-      when theme in [
-             "dark-red",
-             "dark-orange",
-             "dark-yellow",
-             "dark-blue",
-             "dark-green",
-             "dark-purple",
-             "dark-cyan",
-             "dark-pink",
-             "dark-silver",
-             "light-red",
-             "light-orange",
-             "light-yellow",
-             "light-blue",
-             "light-green",
-             "light-purple",
-             "light-cyan",
-             "light-pink",
-             "light-silver"
-           ],
+      when theme in @themes,
       do: static_path(conn, "/css/#{theme}.css")
 
   def stylesheet_path(_conn, _user),
diff --git a/lib/philomena_web/views/setting_view.ex b/lib/philomena_web/views/setting_view.ex
index 929df81dd..9e877b893 100644
--- a/lib/philomena_web/views/setting_view.ex
+++ b/lib/philomena_web/views/setting_view.ex
@@ -1,5 +1,6 @@
 defmodule PhilomenaWeb.SettingView do
   use PhilomenaWeb, :view
+  alias Philomena.Users.User
 
   def themes do
     [
@@ -9,40 +10,20 @@ defmodule PhilomenaWeb.SettingView do
   end
 
   def theme_colors do
-    [
-      Red: "red",
-      Orange: "orange",
-      Yellow: "yellow",
-      Green: "green",
-      Blue: "blue",
-      Purple: "purple",
-      Cyan: "cyan",
-      Pink: "pink",
-      "Silver/Charcoal": "silver"
-    ]
+    Enum.map(User.theme_colors(), fn name ->
+      case name do
+        "silver" -> {"Silver/Charcoal", name}
+        _ -> {String.capitalize(name), name}
+      end
+    end)
   end
 
-  def theme_paths_json do
-    Jason.encode!(%{
-      "dark-red": ~p"/css/dark-red.css",
-      "dark-orange": ~p"/css/dark-orange.css",
-      "dark-yellow": ~p"/css/dark-yellow.css",
-      "dark-blue": ~p"/css/dark-blue.css",
-      "dark-green": ~p"/css/dark-green.css",
-      "dark-purple": ~p"/css/dark-purple.css",
-      "dark-cyan": ~p"/css/dark-cyan.css",
-      "dark-pink": ~p"/css/dark-pink.css",
-      "dark-silver": ~p"/css/dark-silver.css",
-      "light-red": ~p"/css/light-red.css",
-      "light-orange": ~p"/css/light-orange.css",
-      "light-yellow": ~p"/css/light-yellow.css",
-      "light-blue": ~p"/css/light-blue.css",
-      "light-green": ~p"/css/light-green.css",
-      "light-purple": ~p"/css/light-purple.css",
-      "light-cyan": ~p"/css/light-cyan.css",
-      "light-pink": ~p"/css/light-pink.css",
-      "light-silver": ~p"/css/light-silver.css"
-    })
+  def theme_paths_json(conn) do
+    User.themes()
+    |> Map.new(fn name ->
+      {name, static_path(conn, "/css/#{name}.css")}
+    end)
+    |> Jason.encode!()
   end
 
   def scale_options do
diff --git a/priv/repo/migrations/20241216165826_convert_user_themes.exs b/priv/repo/migrations/20241216165826_convert_user_themes.exs
index bb28d3a89..8dee8efc0 100644
--- a/priv/repo/migrations/20241216165826_convert_user_themes.exs
+++ b/priv/repo/migrations/20241216165826_convert_user_themes.exs
@@ -5,11 +5,19 @@ defmodule Philomena.Repo.Migrations.ConvertUserThemes do
     execute("update users set theme = 'light-blue' where theme = 'default';")
     execute("update users set theme = 'dark-blue' where theme = 'dark';")
     execute("update users set theme = 'dark-red' where theme = 'red';")
+
+    alter table("users") do
+      modify :theme, :varchar, default: "dark-blue"
+    end
   end
 
   def down do
     execute("update users set theme = 'default' where theme like 'light%';")
     execute("update users set theme = 'red' where theme = 'dark-red';")
     execute("update users set theme = 'dark' where theme like 'dark%';")
+
+    alter table("users") do
+      modify :theme, :varchar, default: "default"
+    end
   end
 end