From c40b507a67b6fe900c4ea44b7fb8eb18fd34322c Mon Sep 17 00:00:00 2001
From: "Mr. Stallion" <mrstallion@nobody.nowhere.fauxdomain.ext>
Date: Fri, 3 Apr 2020 18:48:39 -0500
Subject: [PATCH] Dark and light theme support

---
 chat/CharacterSearchHistory.vue               | 13 ++-
 chat/ConversationView.vue                     | 38 +++----
 chat/StatusPicker.vue                         | 10 +-
 chat/preview/test-urls.txt                    |  2 +
 electron/Index.vue                            |  8 +-
 scss/_bbcode.scss                             |  4 +-
 scss/_chat.scss                               |  3 +-
 scss/_rising.scss                             | 52 ++++++++++
 scss/themes/_chat.scss                        |  1 +
 scss/themes/chat/dark.scss                    |  2 +-
 scss/themes/chat/default.scss                 |  2 +-
 scss/themes/chat/light.scss                   |  2 +-
 scss/themes/variables/_dark_variables.scss    | 53 +++++++++-
 scss/themes/variables/_default_variables.scss | 54 +++++++++-
 scss/themes/variables/_light_variables.scss   | 55 ++++++++++-
 site/character_page/character_page.vue        | 98 +++++++++----------
 16 files changed, 306 insertions(+), 91 deletions(-)
 create mode 100644 scss/_rising.scss

diff --git a/chat/CharacterSearchHistory.vue b/chat/CharacterSearchHistory.vue
index 37c7186..23e3f49 100644
--- a/chat/CharacterSearchHistory.vue
+++ b/chat/CharacterSearchHistory.vue
@@ -115,15 +115,20 @@
         }
 
         .form-row:hover {
-            background-color: #20203e;
-            border: 1px solid #2d2d6b;
+            // background-color: #20203e;
+            // border: 1px solid #2d2d6b;
+            backdrop-filter: invert(30%) !important;
+
             border-radius: 2px;
         }
 
         .selected-row,
         .form-row.selected-row:hover {
-            background-color: #343461;
-            border: 1px solid #6565b2;
+            /*background-color: #343461;*/
+            /*border: 1px solid #6565b2;*/
+
+            backdrop-filter: invert(20%) !important;
+
             border-radius: 2px;
         }
     }
diff --git a/chat/ConversationView.vue b/chat/ConversationView.vue
index 86c51f0..b0fb5de 100644
--- a/chat/ConversationView.vue
+++ b/chat/ConversationView.vue
@@ -613,7 +613,7 @@
                 a.btn {
                     padding-left: 0.5rem;
                     padding-right: 0.5rem;
-                    color: #cbcbe5;
+                    // color: #cbcbe5;
 
                     i {
                         margin-right: 0.4rem;
@@ -731,8 +731,8 @@
     .message-time,
     .message .message-time,
     .ad-viewer .message-time {
-        background-color: #4f4f61;
-        color: #dadada;
+        background-color: var(--messageTimeBgColor);
+        color: var(--messageTimeFgColor);
         border-radius: 3px;
         padding-left: 3px;
         padding-right: 3px;
@@ -775,23 +775,23 @@
             text-transform: uppercase;
 
             &.match {
-                background-color: rgb(0, 142, 0);
-                border: solid 1px rgb(0, 113, 0);
+                background-color: var(--scoreMatchBg);
+                border: solid 1px var(--scoreMatchFg);
             }
 
             &.weak-match {
-                background-color: rgb(0, 80, 0);
-                border: 1px solid rgb(0, 64, 0);
+                background-color: var(--scoreWeakMatchBg);
+                border: 1px solid var(--scoreWeakMatchFg);
             }
 
             &.weak-mismatch {
-                background-color: rgb(152, 134, 0);
-                border: 1px solid rgb(142, 126, 0);
+                background-color: var(--scoreWeakMismatchBg);
+                border: 1px solid var(--scoreWeakMismatchFg);
             }
 
             &.mismatch {
-                background-color: rgb(171, 0, 0);
-                border: 1px solid rgb(128, 0, 0);
+                background-color: var(--scoreMismatchBg);
+                border: 1px solid var(--scoreMismatchFg);
             }
         }
     }
@@ -814,15 +814,15 @@
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
             &.match {
-                border-left: 12px solid #048a04;
-                background-color: rgba(0, 110, 0, 0.47);
+                border-left: 12px solid var(--scoreStandoutMatchBorderColor);
+                background-color: var(--scoreStandoutMatchBgColor);
                 // border-left: 12px solid #027b02;
                 // background-color: rgba(1, 115, 1, 0.45);
             }
 
             &.weak-match {
-                border-left: 12px solid #014a01;
-                background-color: rgba(0, 79, 0, 0.4);
+                border-left: 12px solid var(--scoreStandoutWeakMatchBorderColor);
+                background-color: var(--scoreStandoutWeakMatchBgColor);
 
                 .bbcode {
                     filter: grayscale(0.25);
@@ -831,7 +831,7 @@
             }
 
             &.neutral {
-                border-left: 12px solid #555;
+                border-left: 12px solid var(--scoreStandoutNeutralBorderColor);
 
                 .bbcode {
                     filter: grayscale(0.5);
@@ -845,8 +845,8 @@
             };
 
             &.weak-mismatch {
-                background-color: rgba(208, 188, 0, 0.0);
-                border-left: 12px solid rgb(138, 123, 0);
+                border-left: 12px solid var(--scoreStandoutWeakMismatchBorderColor);
+                background-color: var(--scoreStandoutWeakMismatchBgColor);
 
                 .bbcode {
                     filter: grayscale(0.7);
@@ -860,7 +860,7 @@
             }
 
             &.mismatch {
-                border-left: 12px solid #841a1a;
+                border-left: 12px solid var(--scoreStandoutMismatchBorderColor);
 
                 .bbcode {
                     filter: grayscale(0.8);
diff --git a/chat/StatusPicker.vue b/chat/StatusPicker.vue
index ca3de7d..0fd3b7d 100644
--- a/chat/StatusPicker.vue
+++ b/chat/StatusPicker.vue
@@ -100,15 +100,17 @@
         }
 
         .form-row:hover {
-            background-color: #20203e;
-            border: 1px solid #2d2d6b;
+            /*background-color: #20203e;*/
+            /*border: 1px solid #2d2d6b;*/
+            backdrop-filter: invert(30%) !important;
             border-radius: 2px;
         }
 
         .selected-row,
         .form-row.selected-row:hover {
-            background-color: #343461;
-            border: 1px solid #6565b2;
+            /*background-color: #343461;*/
+            /*border: 1px solid #6565b2;*/
+            backdrop-filter: invert(20%);
             border-radius: 2px;
         }
     }
diff --git a/chat/preview/test-urls.txt b/chat/preview/test-urls.txt
index 4100b97..5654145 100644
--- a/chat/preview/test-urls.txt
+++ b/chat/preview/test-urls.txt
@@ -76,3 +76,5 @@ http://gfycatporn.com/deepthroat.php
 
 Derpibooru
 Pornhub GIFS
+https://multporn.net/authors_comics/sefeiren
+
diff --git a/electron/Index.vue b/electron/Index.vue
index 22104e6..c7e7b01 100644
--- a/electron/Index.vue
+++ b/electron/Index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div @mouseover="onMouseOver" id="page" style="position:relative;padding:5px 10px 10px" @auxclick.prevent>
+    <div @mouseover="onMouseOver" id="page" style="position:relative;padding:5px 10px 10px" :class="getThemeClass()" @auxclick.prevent>
         <div v-html="styling"></div>
         <div v-if="!characters" style="display:flex; align-items:center; justify-content:center; height: 100%;">
             <div class="card bg-light" style="width: 400px;">
@@ -313,6 +313,12 @@
             (this.$refs.characterPage as any).reload();
         }
 
+
+        getThemeClass(): string {
+            return `theme-${this.settings.theme}`;
+        }
+
+
         get styling(): string {
             try {
                 return `<style>${fs.readFileSync(path.join(__dirname, `themes/${this.settings.theme}.css`), 'utf8').toString()}</style>`;
diff --git a/scss/_bbcode.scss b/scss/_bbcode.scss
index 0a7936c..59d4b4b 100644
--- a/scss/_bbcode.scss
+++ b/scss/_bbcode.scss
@@ -136,12 +136,12 @@ div.indentText {
 
 .bbcode {
   .fa-link {
-      color: white;
+      color: var(--linkForcedColor);
       margin-right: 2px;
   }
 
   a.user-link {
-      color: white;
+      color: var(--linkForcedColor);
   }
 }
 
diff --git a/scss/_chat.scss b/scss/_chat.scss
index dbd46f1..3818fc8 100644
--- a/scss/_chat.scss
+++ b/scss/_chat.scss
@@ -167,6 +167,7 @@
 .message {
   word-wrap: break-word;
   padding-bottom: 1px;
+  padding-left: 5px;
 }
 
 .message-block {
@@ -322,4 +323,4 @@ $genders: (
 
 .nav-link {
   cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/scss/_rising.scss b/scss/_rising.scss
new file mode 100644
index 0000000..7d116cd
--- /dev/null
+++ b/scss/_rising.scss
@@ -0,0 +1,52 @@
+:root {
+  --scoreMatchBg: #{$scoreMatchBg};
+  --scoreMatchFg: #{$scoreMatchFg};
+  --scoreWeakMatchBg: #{$scoreWeakMatchBg};
+  --scoreWeakMatchFg: #{$scoreWeakMatchFg};
+  --scoreWeakMismatchBg: #{$scoreWeakMismatchBg};
+  --scoreWeakMismatchFg: #{$scoreWeakMismatchFg};
+  --scoreMismatchBg: #{$scoreMismatchBg};
+  --scoreMismatchFg: #{$scoreMismatchFg};
+  --scoreTitleColor: #{$scoreTitleColor};
+  --scoreMinimizeButtonFg: #{$scoreMinimizeButtonFg};
+  --scoreMinimizeButtonBg: #{$scoreMinimizeButtonBg};
+  --scoreReportBg: #{$scoreReportBg};
+
+  --scoreFadedMatchBg: #{$scoreFadedMatchBg};
+  --scoreFadedMatchFg: #{$scoreFadedMatchFg};
+  --scoreFadedWeakMatchBg: #{$scoreFadedWeakMatchBg};
+  --scoreFadedWeakMatchFg: #{$scoreFadedWeakMatchFg};
+  --scoreFadedWeakMismatchBg: #{$scoreFadedWeakMismatchBg};
+  --scoreFadedWeakMismatchFg: #{$scoreFadedWeakMismatchFg};
+  --scoreFadedMismatchBg: #{$scoreFadedMismatchBg};
+  --scoreFadedMismatchFg: #{$scoreFadedMismatchFg};
+
+  --scoreStandoutMatchBorderColor: #{$scoreStandoutMatchBorderColor};
+  --scoreStandoutMatchBgColor: #{$scoreStandoutMatchBgColor};
+  --scoreStandoutWeakMatchBorderColor: #{$scoreStandoutWeakMatchBorderColor};
+  --scoreStandoutWeakMatchBgColor: #{$scoreStandoutWeakMatchBgColor};
+  --scoreStandoutNeutralBorderColor: #{$scoreStandoutNeutralBorderColor};
+  --scoreStandoutWeakMismatchBorderColor: #{$scoreStandoutWeakMismatchBorderColor};
+  --scoreStandoutWeakMismatchBgColor: #{$scoreStandoutWeakMismatchBgColor};
+  --scoreStandoutMismatchBorderColor: #{$scoreStandoutMismatchBorderColor};
+
+  --characterImageWrapperBg: #{$characterImageWrapperBg};
+  --characterGuestbookPostBg: #{$characterGuestbookPostBg};
+  --characterGuestbookPostBorderColor: #{$characterGuestbookPostBorderColor};
+  --characterGuestbookReplyBg: #{$characterGuestbookReplyBg};
+  --characterGuestbookTimestampFg: #{$characterGuestbookTimestampFg};
+  --characterKinkCustomColor: #{$characterKinkCustomColor};
+  --characterKinkCustomBorderColor: #{$characterKinkCustomBorderColor};
+  --characterKinkStockColor: #{$characterKinkStockColor};
+  --characterKinkStockHighlightedColor: #{$characterKinkStockHighlightedColor};
+  --characterInfotagColor: #{$characterInfotagColor};
+
+  --messageTimeBgColor: #{$messageTimeBgColor};
+  --messageTimeFgColor: #{$messageTimeFgColor};
+
+  --headerBackgroundMaskColor: #{$headerBackgroundMaskColor};
+
+  --linkForcedColor: #{$linkForcedColor};
+  --tabSecondaryFgColor: #{$tabSecondaryFgColor};
+}
+
diff --git a/scss/themes/_chat.scss b/scss/themes/_chat.scss
index 35e83f4..f7ef985 100644
--- a/scss/themes/_chat.scss
+++ b/scss/themes/_chat.scss
@@ -32,6 +32,7 @@
 @import "../bbcode_editor";
 @import "../bbcode";
 @import "../flist_overrides";
+@import "../rising";
 
 * {
   &::-webkit-scrollbar-track {
diff --git a/scss/themes/chat/dark.scss b/scss/themes/chat/dark.scss
index 4ac0117..95fd132 100644
--- a/scss/themes/chat/dark.scss
+++ b/scss/themes/chat/dark.scss
@@ -30,4 +30,4 @@
             background-color: $gray-700;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/scss/themes/chat/default.scss b/scss/themes/chat/default.scss
index 9617793..75bd1ed 100644
--- a/scss/themes/chat/default.scss
+++ b/scss/themes/chat/default.scss
@@ -30,4 +30,4 @@
       background-color: $gray-700;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/scss/themes/chat/light.scss b/scss/themes/chat/light.scss
index 554e872..0e6b94f 100644
--- a/scss/themes/chat/light.scss
+++ b/scss/themes/chat/light.scss
@@ -30,4 +30,4 @@
             background-color: $gray-500;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/scss/themes/variables/_dark_variables.scss b/scss/themes/variables/_dark_variables.scss
index c360a73..d7aa9b0 100644
--- a/scss/themes/variables/_dark_variables.scss
+++ b/scss/themes/variables/_dark_variables.scss
@@ -59,4 +59,55 @@ $pagination-active-color: $link-color;
 $text-background-color: $gray-100;
 $text-background-color-disabled: $gray-200;
 
-@import "invert";
\ No newline at end of file
+// F-List Rising
+$scoreMatchBg: rgb(0, 142, 0);
+$scoreMatchFg: rgb(0, 113, 0);
+$scoreWeakMatchBg: rgb(0, 80, 0);
+$scoreWeakMatchFg: rgb(0, 64, 0);
+$scoreWeakMismatchBg: rgb(152, 134, 0);
+$scoreWeakMismatchFg: rgb(142, 126, 0);
+$scoreMismatchBg: rgb(171, 0, 0);
+$scoreMismatchFg: rgb(128, 0, 0);
+$scoreTitleColor: white;
+$scoreMinimizeButtonFg: rgba(255, 255, 255, 0.7);
+$scoreMinimizeButtonBg: rgba(0,0,0,0.2);
+$scoreReportBg: rgba(0,0,0,0.2);
+
+$scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
+$scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
+$scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
+$scoreFadedWeakMatchFg: adjust-color($scoreWeakMatchFg, $alpha: -0.6);
+$scoreFadedWeakMismatchBg: adjust-color($scoreWeakMismatchBg, $alpha: -0.6);
+$scoreFadedWeakMismatchFg: adjust-color($scoreWeakMismatchFg, $alpha: -0.6);
+$scoreFadedMismatchBg: adjust-color($scoreMismatchBg, $alpha: -0.6);
+$scoreFadedMismatchFg: adjust-color($scoreMismatchFg, $alpha: -0.6);
+
+$scoreStandoutMatchBorderColor: #048a04;
+$scoreStandoutMatchBgColor: rgba(0, 110, 0, 0.47);
+$scoreStandoutWeakMatchBorderColor: #014a01;
+$scoreStandoutWeakMatchBgColor: rgba(0, 79, 0, 0.4);
+$scoreStandoutNeutralBorderColor: #555;
+$scoreStandoutWeakMismatchBorderColor: rgb(138, 123, 0);
+$scoreStandoutWeakMismatchBgColor: rgba(208, 188, 0, 0.0);
+$scoreStandoutMismatchBorderColor: #841a1a;
+
+$characterImageWrapperBg: rgba(0,0,0, 0.2);
+$characterGuestbookPostBg: rgba(0,0,0,0.15);
+$characterGuestbookPostBorderColor: rgba(255, 255, 255, 0.1);
+$characterGuestbookReplyBg: rgba(0,0,0, 0.1);
+$characterGuestbookTimestampFg: rgba(255, 255, 255, 0.3);
+$characterKinkCustomColor: #f2cd00;
+$characterKinkCustomBorderColor: rgba(255, 255, 255, 0.1);
+$characterKinkStockColor: #ededf6;
+$characterKinkStockHighlightedColor: #ffffff;
+$characterInfotagColor: rgba(255, 255, 255, 0.7);
+
+$messageTimeBgColor: #4f4f61;
+$messageTimeFgColor: #dadada;
+
+$headerBackgroundMaskColor: #202020;
+
+$linkForcedColor: white;
+$tabSecondaryFgColor: rgba(255, 255, 255, 0.5);
+
+@import "invert";
diff --git a/scss/themes/variables/_default_variables.scss b/scss/themes/variables/_default_variables.scss
index edb936e..decdad0 100644
--- a/scss/themes/variables/_default_variables.scss
+++ b/scss/themes/variables/_default_variables.scss
@@ -58,4 +58,56 @@ $pagination-active-color: $link-color;
 $text-background-color: $gray-200;
 $text-background-color-disabled: $gray-100;
 
-@import "invert";
\ No newline at end of file
+// F-List Rising
+$scoreMatchBg: rgb(0, 142, 0);
+$scoreMatchFg: rgb(0, 113, 0);
+$scoreWeakMatchBg: rgb(0, 80, 0);
+$scoreWeakMatchFg: rgb(0, 64, 0);
+$scoreWeakMismatchBg: rgb(152, 134, 0);
+$scoreWeakMismatchFg: rgb(142, 126, 0);
+$scoreMismatchBg: rgb(171, 0, 0);
+$scoreMismatchFg: rgb(128, 0, 0);
+$scoreTitleColor: white;
+$scoreMinimizeButtonFg: rgba(255, 255, 255, 0.7);
+$scoreMinimizeButtonBg: rgba(0,0,0,0.2);
+$scoreReportBg: rgba(0,0,0,0.2);
+
+$scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
+$scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
+$scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
+$scoreFadedWeakMatchFg: adjust-color($scoreWeakMatchFg, $alpha: -0.6);
+$scoreFadedWeakMismatchBg: adjust-color($scoreWeakMismatchBg, $alpha: -0.6);
+$scoreFadedWeakMismatchFg: adjust-color($scoreWeakMismatchFg, $alpha: -0.6);
+$scoreFadedMismatchBg: adjust-color($scoreMismatchBg, $alpha: -0.6);
+$scoreFadedMismatchFg: adjust-color($scoreMismatchFg, $alpha: -0.6);
+
+$scoreStandoutMatchBorderColor: #048a04;
+$scoreStandoutMatchBgColor: rgba(0, 110, 0, 0.47);
+$scoreStandoutWeakMatchBorderColor: #014a01;
+$scoreStandoutWeakMatchBgColor: rgba(0, 79, 0, 0.4);
+$scoreStandoutNeutralBorderColor: #555;
+$scoreStandoutWeakMismatchBorderColor: rgb(138, 123, 0);
+$scoreStandoutWeakMismatchBgColor: rgba(208, 188, 0, 0.0);
+$scoreStandoutMismatchBorderColor: #841a1a;
+
+$characterImageWrapperBg: rgba(0,0,0, 0.2);
+$characterGuestbookPostBg: rgba(0,0,0,0.15);
+$characterGuestbookPostBorderColor: rgba(255, 255, 255, 0.1);
+$characterGuestbookReplyBg: rgba(0,0,0, 0.1);
+$characterGuestbookTimestampFg: rgba(255, 255, 255, 0.3);
+$characterKinkCustomColor: #f2cd00;
+$characterKinkCustomBorderColor: rgba(255, 255, 255, 0.1);
+$characterKinkStockColor: #ededf6;
+$characterKinkStockHighlightedColor: #ffffff;
+$characterInfotagColor: rgba(255, 255, 255, 0.7);
+
+$messageTimeBgColor: #4f4f61;
+$messageTimeFgColor: #dadada;
+
+$headerBackgroundMaskColor: #2a2a54;
+
+$linkForcedColor: white;
+$tabSecondaryFgColor: rgba(255, 255, 255, 0.5);
+
+
+@import "invert";
diff --git a/scss/themes/variables/_light_variables.scss b/scss/themes/variables/_light_variables.scss
index 5bdcf04..38b7c8a 100644
--- a/scss/themes/variables/_light_variables.scss
+++ b/scss/themes/variables/_light_variables.scss
@@ -11,4 +11,57 @@ $gray-900: #191919 !default;
 $secondary: $gray-400;
 
 $body-bg: $gray-100;
-$text-muted: $gray-500;
\ No newline at end of file
+$text-muted: $gray-500;
+
+
+// F-List Rising
+$scoreMatchBg: rgba(0, 180, 0, 0.65);
+$scoreMatchFg: rgba(0, 133, 0, 0.4);
+$scoreWeakMatchBg: rgba(0, 180, 0, 0.22);
+$scoreWeakMatchFg: rgba(0, 133, 0, 0.20);
+$scoreWeakMismatchBg: rgba(227, 189, 0, 0.5);
+$scoreWeakMismatchFg: rgba(192, 160, 0, 0.5);
+$scoreMismatchBg: rgba(192, 0, 0, 0.35);
+$scoreMismatchFg: rgba(148, 0, 0, 0.3);
+$scoreTitleColor: black;
+$scoreMinimizeButtonFg: rgba(255, 255, 255, 0.6);
+$scoreMinimizeButtonBg: rgba(0,0,0,0.1);
+$scoreReportBg: rgba(0,0,0,0.08);
+
+$scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
+$scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
+$scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
+$scoreFadedWeakMatchFg: adjust-color($scoreWeakMatchFg, $alpha: -0.6);
+$scoreFadedWeakMismatchBg: adjust-color($scoreWeakMismatchBg, $alpha: -0.6);
+$scoreFadedWeakMismatchFg: adjust-color($scoreWeakMismatchFg, $alpha: -0.6);
+$scoreFadedMismatchBg: adjust-color($scoreMismatchBg, $alpha: -0.6);
+$scoreFadedMismatchFg: adjust-color($scoreMismatchFg, $alpha: -0.6);
+
+$scoreStandoutMatchBorderColor: #059e05;
+$scoreStandoutMatchBgColor: rgba(53, 225, 53, 0.4);
+$scoreStandoutWeakMatchBorderColor: #016c01;
+$scoreStandoutWeakMatchBgColor: rgba(85, 191, 85, 0.2);
+$scoreStandoutNeutralBorderColor: #888;
+$scoreStandoutWeakMismatchBorderColor: #c18f02;
+$scoreStandoutWeakMismatchBgColor: rgba(208, 188, 0, 0.0);
+$scoreStandoutMismatchBorderColor: #a01a1a;
+
+$characterImageWrapperBg: rgba(0,0,0, 0.2);
+$characterGuestbookPostBg: rgba(0,0,0,0.08);
+$characterGuestbookPostBorderColor: rgba(0, 0, 0, 0.06);
+$characterGuestbookReplyBg: rgba(0,0,0, 0.05);
+$characterGuestbookTimestampFg: rgba(0, 0, 0, 0.4);
+$characterKinkCustomColor: #0072ec;
+$characterKinkCustomBorderColor: rgba(0, 0, 0, 0.1);
+$characterKinkStockColor: #444444;
+$characterKinkStockHighlightedColor: #333333;
+$characterInfotagColor: rgba(0, 0, 0, 0.7);
+
+$messageTimeBgColor: #dadada;
+$messageTimeFgColor: #4f4f61;
+
+$headerBackgroundMaskColor: #e5e5e5;
+
+$linkForcedColor: #007bff;
+$tabSecondaryFgColor: rgba(0, 0, 0, 0.4);
+
diff --git a/site/character_page/character_page.vue b/site/character_page/character_page.vue
index a36e11d..24013f3 100644
--- a/site/character_page/character_page.vue
+++ b/site/character_page/character_page.vue
@@ -468,18 +468,18 @@
 
         .kink-name {
             font-weight: bold;
-            color: #f2cd00;
+            color: var(--characterKinkCustomColor);
         }
 
         i {
-            color: #f2cd00;
+            color: var(--characterKinkCustomColor);
         }
 
         margin-top: 7px;
         margin-bottom: 7px;
         margin-left: -6px;
         margin-right: -6px;
-        border: 1px rgba(255, 255, 255, 0.1) solid;
+        border: 1px var(--characterKinkCustomBorderColor) solid;
         border-radius: 2px;
         /* border-collapse: collapse; */
         padding: 5px;
@@ -488,14 +488,14 @@
 
     .stock-kink {
         .kink-name, i {
-            color: #ededf6;
+            color: var(--characterKinkStockColor);
             font-weight: normal;
         }
 
         &.highlighted {
             .kink-name, i {
                 font-weight: bold;
-                color: #ffffff;
+                color: var(--characterKinkStockHighlightedColor);
             }
         }
     }
@@ -521,7 +521,7 @@
         display: block;
         font-weight: normal;
         font-size: 0.9rem;
-        color: rgba(255, 255, 255, 0.7);
+        color: var(--characterInfotagColor);
         line-height: 125%;
     }
 
@@ -532,7 +532,7 @@
         font-weight: normal !important;
         line-height: 120%;
         font-size: 85%;
-        color: rgba(255, 255, 255, 0.7);
+        color: var(--characterInfotagColor);
     }
 
 
@@ -554,29 +554,29 @@
         font-weight: normal !important;
         line-height: 120%;
         font-size: 85%;
-        color: rgba(255, 255, 255, 0.7);
+        color: var(--characterInfotagColor);
     }
 
     .quick-info {
         margin-bottom: 1rem;
         font-size: 0.9rem;
-        color: rgba(255, 255, 255, 0.7);
+        color: var(--characterInfotagColor);
     }
 
     .guestbook-post {
         margin-bottom: 15px;
         margin-top: 15px;
-        background-color: rgba(0,0,0,0.15);
+        background-color: var(--characterGuestbookPostBg);
         border-radius: 5px;
         padding: 15px;
-        border: 1px solid rgba(255, 255, 255, 0.1);
+        border: 1px solid var(--characterGuestbookPostBorderColor);
 
         .characterLink {
             font-size: 20pt;
         }
 
         .guestbook-timestamp {
-            color: rgba(255, 255, 255, 0.3);
+            color: var(--characterGuestbookTimestampFg);
             font-size: 85%
         }
 
@@ -587,7 +587,7 @@
 
         .guestbook-reply {
             margin-top: 20px;
-            background-color: rgba(0,0,0, 0.1);
+            background-color: var(--characterGuestbookReplyBg);
             padding: 15px;
             border-radius: 4px;
         }
@@ -630,7 +630,7 @@
 
         .character-image-wrapper {
             display: inline-block;
-            background-color: rgba(0,0,0, 0.2);
+            background-color: var(--characterImageWrapperBg);
             border-radius: 5px;
             box-sizing: border-box;
             margin: 5px;
@@ -682,7 +682,7 @@
     .match-report {
         display: flex;
         flex-direction: row;
-        background-color: rgba(0,0,0,0.2);
+        background-color: var(--scoreReportBg);
         /* width: 100%; */
         margin-top: -1.2rem;
         margin-left: -1.2rem;
@@ -719,12 +719,12 @@
             position: absolute;
             display: block;
             right: 0.5rem;
-            background-color: rgba(0,0,0,0.2);
+            background-color: var(--scoreMinimizeButtonBg);
             padding: 0.4rem;
             padding-top: 0.2rem;
             padding-bottom: 0.2rem;
             font-size: 0.8rem;
-            color: rgba(255, 255, 255, 0.7);
+            color: var(--scoreMinimizeButtonFg);
             border-radius: 4px;
             z-index: 1000;
         }
@@ -757,7 +757,7 @@
                 padding-right: 4px;
 
                 span {
-                    color: white;
+                    color: var(--scoreTitleColor);
                     font-weight: bold;
                 }
             }
@@ -777,84 +777,74 @@
         }
     }
 
-
-    $scoreMatchBg: rgb(0, 142, 0);
-    $scoreMatchFg: rgb(0, 113, 0);
-    $scoreWeakMatchBg: rgb(0, 80, 0);
-    $scoreWeakMatchFg: rgb(0, 64, 0);
-    $scoreWeakMismatchBg: rgb(152, 134, 0);
-    $scoreWeakMismatchFg: rgb(142, 126, 0);
-    $scoreMismatchBg: rgb(171, 0, 0);
-    $scoreMismatchFg: rgb(128, 0, 0);
-
     .character-kinks-block .character-kink.comparison-favorite,
     .match-report .scores .match-score.match,
     .infotag.match {
-        background-color: $scoreMatchBg;
-        border: solid 1px $scoreMatchFg;
+        background-color: var(--scoreMatchBg);
+        border: solid 1px var(--scoreMatchFg);
     }
 
     .character-kinks-block .character-kink.comparison-yes,
     .match-report .scores .match-score.weak-match,
     .infotag.weak-match {
-        background-color: $scoreWeakMatchBg;
-        border: 1px solid $scoreWeakMatchFg;
+        background-color: var(--scoreWeakMatchBg);
+        border: 1px solid var(--scoreWeakMatchFg);
     }
 
     .character-kinks-block .character-kink.comparison-maybe,
     .match-report .scores .match-score.weak-mismatch,
     .infotag.weak-mismatch {
-        background-color: $scoreWeakMismatchBg;
-        border: 1px solid $scoreWeakMismatchFg;
+        background-color: var(--scoreWeakMismatchBg);
+        border: 1px solid var(--scoreWeakMismatchFg);
     }
 
     .character-kinks-block .character-kink.comparison-no,
     .match-report .scores .match-score.mismatch,
     .infotag.mismatch {
-        background-color: $scoreMismatchBg;
-        border: 1px solid $scoreMismatchFg;
+        background-color: var(--scoreMismatchBg);
+        border: 1px solid var(--scoreMismatchFg);
     }
 
 
     .character-kinks-block .highlighting {
         .character-kink {
             &.comparison-favorite {
-                background-color: adjust-color($scoreMatchBg, $alpha: -0.6);
-                border-color: adjust-color($scoreMatchFg, $alpha: -0.6);
+                background-color: var(--scoreFadedMatchBg);
+                border-color: var(--scoreFadedMatchFg);
 
                 &.highlighted {
-                    background-color: $scoreMatchBg;
-                    border-color: $scoreMatchFg;
+                    background-color: var(--scoreMatchBg);
+                    border-color: var(--scoreMatchFg);
                 }
             }
 
             &.comparison-yes {
-                background-color: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
-                border-color: adjust-color($scoreWeakMatchFg, $alpha: -0.6);
+                background-color: var(--scoreWeakMatchBg);
+                border-color: var(--scoreWeakMatchFg);
 
                 &.highlighted {
-                    background-color: $scoreWeakMatchBg;
-                    border-color: $scoreWeakMatchFg;
+                    background-color: var(--scoreWeakMatchBg);
+                    border-color: var(--scoreWeakMatchFg);
                 }
             }
 
             &.comparison-maybe {
-                background-color: adjust-color($scoreWeakMismatchBg, $alpha: -0.6);
-                border-color: adjust-color($scoreWeakMismatchFg, $alpha: -0.6);
+                background-color: var(--scoreWeakMismatchBg);
+                border-color: var(--scoreWeakMismatchFg);
 
                 &.highlighted {
-                    background-color: $scoreWeakMismatchBg;
-                    border-color: $scoreWeakMismatchFg;
+                    background-color: var(--scoreWeakMismatchBg);
+                    border-color: var(--scoreWeakMismatchFg);
                 }
             }
 
             &.comparison-no {
-                background-color: adjust-color($scoreMismatchBg, $alpha: -0.6);
-                border-color: adjust-color($scoreMismatchFg, $alpha: -0.6);
+                background-color: var(--scoreMismatchBg);
+                border-color: var(--scoreMismatchFg);
 
                 &.highlighted {
-                    background-color: $scoreMismatchBg;
-                    border-color: $scoreMismatchFg;
+                    background-color: var(--scoreMismatchBg);
+                    border-color: var(--scoreMismatchFg);
                 }
             }
         }
@@ -862,7 +852,7 @@
 
 
     .tab-count {
-        color: rgba(255, 255, 255, 0.5);
+        color: var(--tabSecondaryFgColor);
     }
 
 
@@ -870,7 +860,7 @@
         position: sticky;
         top: -1rem;
         z-index: 10000;
-        background: #2a2a54 !important;
+        background: var(--headerBackgroundMaskColor) !important;
     }
 
 </style>