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 1/2] 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"; From c33ea3acd8fa78ace93a1b554d1f55692b6cf02c Mon Sep 17 00:00:00 2001 From: FatCat Client <82377182+FatCatClient@users.noreply.github.com> Date: Wed, 14 Feb 2024 19:20:11 +0100 Subject: [PATCH 2/2] Fixes Male-herms having the wrong color in the Dracula theme --- scss/themes/chat/dracula.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/themes/chat/dracula.scss b/scss/themes/chat/dracula.scss index 88dc2fb..20e0b2d 100644 --- a/scss/themes/chat/dracula.scss +++ b/scss/themes/chat/dracula.scss @@ -38,7 +38,7 @@ $genders: ( "none": $dracula-comment, "female": $dracula-pink, "male": $dracula-cyan, - "male-herm": darken(saturate($dracula-cyan, 0.45), 36.86), + "male-herm": lighten(saturate($dracula-cyan, 0.45), 36.86), "transgender": $dracula-orange, "cunt-boy": $dracula-green );