From abe49e0c5bc8d011c90f96a8c867491dc016e05f Mon Sep 17 00:00:00 2001
From: FatCat Client <82377182+FatCatClient@users.noreply.github.com>
Date: Wed, 14 Feb 2024 15:35:58 +0100
Subject: [PATCH] Adds Dracula and Dark Dimmed themes
---
scss/_flist_overrides.scss | 5 +
scss/themes/chat/dark dimmed.scss | 58 ++++++++
scss/themes/chat/dracula.scss | 82 +++++++++++
scss/themes/site/dracula.scss | 9 ++
scss/themes/site/grayscale.scss | 9 ++
.../variables/_dark_dimmed_variables.scss | 117 +++++++++++++++
scss/themes/variables/_dracula_derived.scss | 5 +
scss/themes/variables/_dracula_variables.scss | 134 ++++++++++++++++++
8 files changed, 419 insertions(+)
create mode 100644 scss/themes/chat/dark dimmed.scss
create mode 100644 scss/themes/chat/dracula.scss
create mode 100644 scss/themes/site/dracula.scss
create mode 100644 scss/themes/site/grayscale.scss
create mode 100644 scss/themes/variables/_dark_dimmed_variables.scss
create mode 100644 scss/themes/variables/_dracula_derived.scss
create mode 100644 scss/themes/variables/_dracula_variables.scss
diff --git a/scss/_flist_overrides.scss b/scss/_flist_overrides.scss
index ecf76b5..2a294ec 100644
--- a/scss/_flist_overrides.scss
+++ b/scss/_flist_overrides.scss
@@ -35,6 +35,11 @@ sup {
$theme-is-dark: false !default;
+input:checked {
+ accent-color: $primary;
+ border-color: $primary;
+}
+
@font-face {
font-family: "OpenMojiDemoFont";
//The url is checked from the theme file, so we have to use this absolutely bonkers relative path.
diff --git a/scss/themes/chat/dark dimmed.scss b/scss/themes/chat/dark dimmed.scss
new file mode 100644
index 0000000..1b004bd
--- /dev/null
+++ b/scss/themes/chat/dark dimmed.scss
@@ -0,0 +1,58 @@
+@import "~bootstrap/scss/functions";
+@import "../../functions";
+@import "../variables/dark_dimmed_variables";
+@import "~bootstrap/scss/variables";
+@import "../../flist_derived";
+@import "../variables/default_derived";
+
+// Apply variables to theme.
+@import "../chat";
+
+* {
+ &::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 2px $card-border-color;
+ border-radius: 10px;
+ }
+
+ &::-webkit-scrollbar {
+ width: 12px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
+ background-color: $gray-300;
+ &:hover {
+ background-color: $gray-500;
+ }
+
+ &:active {
+ background-color: $gray-700;
+ }
+ }
+}
+
+.colorblindMode {
+ @import "../colorblind";
+ @import "../../rising";
+
+ @each $varName, $value in $risingVariables {
+ --#{$varName}: #{$value};
+ }
+}
+
+//@import "../../util/accecss";
+//
+//@include accecss(
+// 'html body',
+// false,
+// false,
+// tritanopia
+//);
+
+// deuteranomaly
+// protanomaly
+// protanopia
+// deuteranopia
+// tritanomaly
+// tritanopia
diff --git a/scss/themes/chat/dracula.scss b/scss/themes/chat/dracula.scss
new file mode 100644
index 0000000..88dc2fb
--- /dev/null
+++ b/scss/themes/chat/dracula.scss
@@ -0,0 +1,82 @@
+@import "~bootstrap/scss/functions";
+@import "../../functions";
+@import "../variables/dracula_variables";
+@import "~bootstrap/scss/variables";
+@import "../../flist_derived";
+@import "../variables/dracula_derived";
+
+// Apply variables to theme.
+@import "../chat";
+
+* {
+ &::-webkit-scrollbar-track {
+ box-shadow: inset 0 0 2px $card-border-color;
+ border-radius: 10px;
+ }
+
+ &::-webkit-scrollbar {
+ width: 12px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
+ background-color: $gray-300;
+ &:hover {
+ background-color: $gray-500;
+ }
+
+ &:active {
+ background-color: $gray-700;
+ }
+ }
+}
+
+$genders: (
+ "shemale": $dracula-purple,
+ "herm": lighten(saturate($dracula-purple, 0.36), 10.78),
+ "none": $dracula-comment,
+ "female": $dracula-pink,
+ "male": $dracula-cyan,
+ "male-herm": darken(saturate($dracula-cyan, 0.45), 36.86),
+ "transgender": $dracula-orange,
+ "cunt-boy": $dracula-green
+);
+
+$red-color: $dracula-red;
+$green-color: $dracula-green;
+$blue-color: darken(saturate($dracula-cyan, 0.45), 36.86);
+$yellow-color: $dracula-yellow;
+$purple-color: lighten(saturate($dracula-purple, 0.36), 10.78);
+$cyan-color: $dracula-cyan;
+$white-color: $dracula-foreground;
+$black-color: #000;
+$brown-color: #8a6d3b;
+$pink-color: $dracula-pink;
+$gray-color: #ccc;
+$orange-color: $dracula-orange;
+
+.btn-primary, .btn-primary:hover, .list-group-item.active {
+ color: $dracula-bg;
+}
+
+@each $gender, $color in $genders {
+ .gender-#{$gender} {
+ color: $color;
+ }
+
+ .message-event .gender-#{$gender} {
+ color: lighten($color, 5%)
+ }
+}
+
+.colorblindMode {
+ @import "../colorblind";
+ @import "../../rising";
+
+ @each $varName, $value in $risingVariables {
+ --#{$varName}: #{$value};
+ }
+}
+
+
diff --git a/scss/themes/site/dracula.scss b/scss/themes/site/dracula.scss
new file mode 100644
index 0000000..82963de
--- /dev/null
+++ b/scss/themes/site/dracula.scss
@@ -0,0 +1,9 @@
+@import "~bootstrap/scss/functions";
+@import "../../functions";
+@import "../variables/dracula_variables";
+@import "~bootstrap/scss/variables";
+@import "../../flist_derived";
+@import "../variables/dracula_derived";
+
+// Apply variables to theme.
+@import "../site";
diff --git a/scss/themes/site/grayscale.scss b/scss/themes/site/grayscale.scss
new file mode 100644
index 0000000..97fa7fe
--- /dev/null
+++ b/scss/themes/site/grayscale.scss
@@ -0,0 +1,9 @@
+@import "~bootstrap/scss/functions";
+@import "../../functions";
+@import "../variables/default_variables";
+@import "~bootstrap/scss/variables";
+@import "../../flist_derived";
+@import "../variables/default_derived";
+
+// Apply variables to theme.
+@import "../site";
diff --git a/scss/themes/variables/_dark_dimmed_variables.scss b/scss/themes/variables/_dark_dimmed_variables.scss
new file mode 100644
index 0000000..fe9678d
--- /dev/null
+++ b/scss/themes/variables/_dark_dimmed_variables.scss
@@ -0,0 +1,117 @@
+// Base colors, used for pretty much everything.
+// On dark based themes these are inverted in order to cooperate with bootstrap which assumes that all themes are light based.
+$gray-base: #0d0d0d;
+$white: $gray-base;
+$gray-100: lighten($gray-base, 10%);
+$gray-200: lighten($gray-base, 20%);
+$gray-300: lighten($gray-base, 30%);
+$gray-400: lighten($gray-base, 40%);
+$gray-500: lighten($gray-base, 50%);
+$gray-600: lighten($gray-base, 60%);
+$gray-700: lighten($gray-base, 70%);
+$gray-800: lighten($gray-base, 80%);
+$gray-900: lighten($gray-base, 90%);
+$black: #fff;
+
+// Theme and brand colors
+$primary: rgb(89, 89, 89);
+$secondary: $gray-400;
+$success: darken(#009900, 5%);
+$info: #0447af;
+$warning: #f29c00;
+$danger: #930300;
+$light: $gray-200;
+$text-muted: $gray-500;
+$text-dark: $gray-600;
+$component-active-color: $gray-900;
+
+// Core page element colors
+$body-bg: $gray-100;
+$link-color: $gray-800;
+$link-hover-color: lighten($link-color, 15%);
+$dropdown-bg: $gray-200;
+$dropdown-divider-bg: $gray-300;
+
+// Modal Dialogs
+$modal-backdrop-bg: $white;
+$modal-content-bg: $gray-100;
+$modal-header-border-color: $gray-300;
+
+// Fix YIQ(automatic text contrast) preferring black over white on dark themes.
+$yiq-text-light: $gray-800;
+
+// Reduce default padding slightly between columns in grids.
+$grid-gutter-width: 20px;
+
+// Form Elements
+$input-bg: $gray-200;
+$input-color: $black;
+$custom-select-bg: $gray-200;
+
+// List groups
+$list-group-bg: $gray-200;
+
+// Pagination
+$pagination-active-color: $link-color;
+
+// F-List specific color helpers to help make monochromatic themes easier to deal with.
+$text-background-color: $gray-200;
+$text-background-color-disabled: $gray-100;
+
+// F-List Rising
+$scoreUnicornMatchBg: rgb(0, 173, 173);
+$scoreUnicornMatchFg: rgb(29, 154, 154);
+$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);
+
+$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
+$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
+$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: $gray-200;
+
+$linkForcedColor: $gray-200;
+$tabSecondaryFgColor: rgba(255, 255, 255, 0.5);
+
+
+@import "invert";
diff --git a/scss/themes/variables/_dracula_derived.scss b/scss/themes/variables/_dracula_derived.scss
new file mode 100644
index 0000000..fdb8815
--- /dev/null
+++ b/scss/themes/variables/_dracula_derived.scss
@@ -0,0 +1,5 @@
+$blue-color: $blue-color;
+
+.blackText {
+ @include text-outline($gray-600);
+}
diff --git a/scss/themes/variables/_dracula_variables.scss b/scss/themes/variables/_dracula_variables.scss
new file mode 100644
index 0000000..c0b1f05
--- /dev/null
+++ b/scss/themes/variables/_dracula_variables.scss
@@ -0,0 +1,134 @@
+//Dracula colors
+$dracula-purple: #BD93F9;
+$dracula-bg: #282A36;
+$dracula-current-line: #44475A;
+$dracula-foreground: #F8F8F2;
+$dracula-comment: #6272A4;
+$dracula-cyan: #8BE9FD;
+$dracula-green: #50FA7B;
+$dracula-orange: #FFB86C;
+$dracula-pink: #FF79C6;
+$dracula-purple: #BD93F9;
+$dracula-red: #FF5555;
+$dracula-yellow: #F1FA8C;
+
+// Base colors, used for pretty much everything.
+// On dark based themes these are inverted in order to cooperate with bootstrap which assumes that all themes are light based.
+$gray-base: darken($dracula-bg, 10%);
+$white: $gray-base;
+$gray-100: lighten($gray-base, 10%);
+$gray-200: lighten($gray-base, 20%);
+$gray-300: lighten($gray-base, 30%);
+$gray-400: lighten($gray-base, 40%);
+$gray-500: lighten($gray-base, 50%);
+$gray-600: lighten($gray-base, 60%);
+$gray-700: lighten($gray-base, 70%);
+$gray-800: lighten($gray-base, 80%);
+$gray-900: lighten($gray-base, 90%);
+$black: $dracula-foreground;
+
+// Theme and brand colors
+$primary: $dracula-purple;
+$secondary: $gray-400;
+$success: $dracula-green;
+$info: $dracula-comment;
+$warning: $dracula-orange;
+$danger: $dracula-red;
+$light: $gray-200;
+$text-muted: $gray-500;
+$text-dark: $gray-600;
+$component-active-color: $gray-900;
+
+
+
+// Core page element colors
+$body-bg: $gray-100;
+$link-color: $black;
+$link-hover-color: lighten($link-color, 15%);
+$dropdown-bg: $gray-200;
+$dropdown-divider-bg: $gray-300;
+
+// Modal Dialogs
+$modal-backdrop-bg: $white;
+$modal-content-bg: $gray-100;
+$modal-header-border-color: $gray-300;
+
+// Fix YIQ(automatic text contrast) preferring black over white on dark themes.
+$yiq-text-light: $black;
+
+// Reduce default padding slightly between columns in grids.
+$grid-gutter-width: 20px;
+
+// Form Elements
+$input-bg: $gray-200;
+$input-color: $black;
+$custom-select-bg: $gray-200;
+$form-check-input-checked-bg-color: $primary;
+
+// List groups
+$list-group-bg: $gray-200;
+
+// Pagination
+$pagination-active-color: $link-color;
+
+// F-List specific color helpers to help make monochromatic themes easier to deal with.
+$text-background-color: $gray-200;
+$text-background-color-disabled: $gray-100;
+
+// F-List Rising
+$scoreUnicornMatchBg: rgb(0, 173, 173);
+$scoreUnicornMatchFg: rgb(29, 154, 154);
+$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: set-alpha($dracula-foreground,0.7);
+$scoreMinimizeButtonBg: rgba(0,0,0,0.2);
+$scoreReportBg: rgba(0,0,0,0.2);
+
+$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
+$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
+$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: $dracula-green;
+$scoreStandoutMatchBgColor: set-alpha(darken(saturate($dracula-green, 5.63), 5.88), 0.471);
+$scoreStandoutWeakMatchBorderColor: #014a01;
+$scoreStandoutWeakMatchBgColor: rgba(0, 79, 0, 0.4);
+$scoreStandoutNeutralBorderColor: $gray-100;
+$scoreStandoutWeakMismatchBorderColor: #8a7b00;
+$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: $dracula-yellow;
+$characterKinkCustomBorderColor: rgba(255, 255, 255, 0.1);
+$characterKinkStockColor: #ededf6;
+$characterKinkStockHighlightedColor: #ffffff;
+$characterInfotagColor: rgba(255, 255, 255, 0.7);
+
+$messageTimeBgColor: $dracula-current-line;
+$messageTimeFgColor: $dracula-foreground;
+
+$headerBackgroundMaskColor: $gray-200;
+
+$linkForcedColor: $dracula-foreground;
+$tabSecondaryFgColor: set-alpha($dracula-foreground, 0.5);
+
+
+@import "invert";