diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss
index 16d931e73..e645660a2 100644
--- a/app/assets/stylesheets/scaffolds.scss
+++ b/app/assets/stylesheets/scaffolds.scss
@@ -39,8 +39,7 @@ div {
display: none !important;
}
-body.night-theme,
-body.ten-x-hacker-theme {
+body.dark-theme {
.on-page-nav-butt img,
.icon-img,
.reaction-button:not(.reacted) img,
diff --git a/app/assets/stylesheets/theme-selector.scss b/app/assets/stylesheets/theme-selector.scss
index dcd354b58..6289088c6 100644
--- a/app/assets/stylesheets/theme-selector.scss
+++ b/app/assets/stylesheets/theme-selector.scss
@@ -105,33 +105,6 @@
--preview-border: rgba(0, 0, 0, 0.1);
}
-.theme-selector--pink-theme {
- --preview-body-bg: #fff7f9;
- --preview-body-color: #0a0a0a;
- --preview-header: #fb4881;
- --preview-form: #fff7f9;
- --preview-card: #fff;
- --preview-border: #fb4881;
-}
-
-.theme-selector--minimal-light-theme {
- --preview-body-bg: #fcfcfc;
- --preview-body-color: #0a0a0a;
- --preview-header: #ffffff;
- --preview-form: #f4f5f7;
- --preview-card: #fff;
- --preview-border: rgba(0, 0, 0, 0.1);
-}
-
-.theme-selector--ten-x-hacker-theme {
- --preview-body-bg: #0a0a0a;
- --preview-body-color: #42ff87;
- --preview-header: #1c1c1c;
- --preview-form: #0a0a0a;
- --preview-card: #0a0a0a;
- --preview-border: #42ff87;
-}
-
.rich-selector-radio {
overflow: hidden;
position: absolute;
diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss
deleted file mode 100644
index 6dab10835..000000000
--- a/app/assets/stylesheets/themes/hacker.scss
+++ /dev/null
@@ -1,234 +0,0 @@
-:root {
- --theme-secondary-color: #ebebeb;
- --theme-container-background: #030303;
- --theme-container-accent-background: #000f0b;
- --theme-container-background-hover: #1c2c3f;
- --theme-container-box-shadow: none;
- --theme-container-border: 1px solid #22303f;
- --theme-social-icon-invert: invert(100%);
- --theme-color: #ffffff;
-
- // Base
- --base: #fff;
- --base-inverted: #000;
-
- --base-100: var(--base);
- --base-90: #efefef;
- --base-80: #d6d6d7;
- --base-70: #bdbdbd;
- --base-60: #a3a3a3;
- --base-50: #8a8a8a;
- --base-40: #717171;
- --base-30: #575757;
- --base-20: #3d3d3d;
- --base-10: #242424;
- --base-0: #090909;
-
- --base-a90: #{rgba(#fff, 0.9)};
- --base-a80: #{rgba(#fff, 0.8)};
- --base-a70: #{rgba(#fff, 0.7)};
- --base-a60: #{rgba(#fff, 0.6)};
- --base-a50: #{rgba(#fff, 0.5)};
- --base-a40: #{rgba(#fff, 0.4)};
- --base-a30: #{rgba(#fff, 0.3)};
- --base-a20: #{rgba(#fff, 0.2)};
- --base-a10: #{rgba(#fff, 0.1)};
- --base-a5: #{rgba(#fff, 0.05)};
-
- --base-inverted-a90: #{rgba(#000, 0.9)};
- --base-inverted-a80: #{rgba(#000, 0.8)};
- --base-inverted-a70: #{rgba(#000, 0.7)};
- --base-inverted-a60: #{rgba(#000, 0.6)};
- --base-inverted-a50: #{rgba(#000, 0.5)};
- --base-inverted-a40: #{rgba(#000, 0.4)};
- --base-inverted-a30: #{rgba(#000, 0.3)};
- --base-inverted-a20: #{rgba(#000, 0.2)};
- --base-inverted-a10: #{rgba(#000, 0.1)};
- --base-inverted-a5: #{rgba(#000, 0.05)};
-
- // Accent colors
- --accent-brand: #2eff7b;
- --accent-brand-darker: #00c548;
- --accent-brand-lighter: #8effb7;
- --accent-brand-a10: #{rgba(#2eff7b, 0.1)};
-
- // Success
- --accent-success: var(--accent-brand);
- --accent-success-darker: var(--accent-brand-darker);
- --accent-success-lighter: var(--accent-brand-lighter);
- --accent-success-a10: #{rgba(#2eff7b, 0.1)};
-
- // Warning
- --accent-warning: #ffcf4c;
- --accent-warning-darker: #f5b400;
- --accent-warning-lighter: #ffe499;
- --accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
-
- // Danger
- --accent-danger: #dc1818;
- --accent-danger-darker: #c20a0a;
- --accent-danger-lighter: #ec5050;
- --accent-danger-a10: #{rgba(#dc1818, 0.1)};
-
- // Main colors
- --body-bg: var(--base-0);
- --body-color: var(--accent-brand);
- --body-color-inverted: var(--base-inverted);
-
- // Main content containers
- --card-bg: var(--base-inverted);
- --card-color: var(--accent-brand);
- --card-color-secondary: var(--accent-brand-darker);
- --card-color-tertiary: var(--base-50);
- --card-secondary-bg: var(--base-inverted);
- --card-secondary-color: var(--base-90);
- --card-headline-color: var(--accent-brand-lighter);
- --card-border: rgba(255, 255, 255, 0.2);
- --card-secondary-border: rgba(255, 255, 255, 0.2);
- --card-hover-bg: var(--base-10);
- --card-selected-bg: var(--base-20);
-
- // Header
- --header-bg: var(--base-10);
- --header-bg-hover: var(--base-20);
- --header-button-focus-color: var(--accent-brand);
- --header-bg-current: var(--base-0);
- --header-shadow: rgba(0, 0, 0, 0.1);
- --header-icons-color: var(--base-70);
- --header-icons-color-hover: var(--base-100);
-
- // Logo
- --logo-bg: var(--accent-brand);
- --logo-color: #0a0a0a;
-
- // Footer
- --footer-bg: var(--base-10);
- --footer-copy-color: var(--base-80);
- --footer-copy-secondary-color: var(--base-60);
- --footer-link-color: var(--accent-brand);
- --footer-link-color-hover: var(--accent-brand-lighter);
-
- // Links
- --link-color: var(--accent-brand);
- --link-color-hover: var(--accent-brand-darker); // #ff53d9;
- --link-color-current: var(--accent-brand-lighter);
- --link-color-secondary: var(--accent-brand-darker);
- --link-color-secondary-hover: var(--accent-brand-darker);
- --link-brand-color: #e24ec1;
- --link-bg-hover: var(--base-a10);
- --link-bg-hover-alt: var(--base-0);
- --link-bg-current: var(--base-inverted);
-
- // Primary buttons
- --button-primary-bg: var(--accent-brand);
- --button-primary-bg-hover: var(--accent-brand-darker);
- --button-primary-color: var(--base-0);
- --button-primary-color-hover: var(--base-0);
- //-- Inverted
- --button-primary-inverted-bg: var(--base-0);
- --button-primary-inverted-bg-hover: var(--base-20);
- --button-primary-inverted-color: var(--accent-brand);
- --button-primary-inverted-color-hover: var(--accent-brand-darker);
-
- // Secondary buttons
- --button-secondary-bg: var(--base-10);
- --button-secondary-bg-hover: var(--base-20);
- --button-secondary-color: var(--accent-brand);
- --button-secondary-color-hover: var(--accent-brand-lighter);
- //-- Inverted
- --button-secondary-inverted-bg: var(--base-50);
- --button-secondary-inverted-bg-hover: var(--base-30);
- --button-secondary-inverted-color: var(--accent-brand);
- --button-secondary-inverted-color-hover: var(--accent-brand-lighter);
-
- // Outlined buttons
- --button-outlined-bg: transparent;
- --button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
- --button-outlined-border: var(--accent-brand);
- --button-outlined-border-hover: var(--accent-brand-darker);
- --button-outlined-color: var(--accent-brand);
- --button-outlined-color-hover: var(--accent-brand-darker);
- //-- Inverted
- --button-outlined-inverted-bg: transparent;
- --button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
- --button-outlined-inverted-border: var(--accent-brand-darker);
- --button-outlined-inverted-border-hover: var(--accent-brand);
- --button-outlined-inverted-color: var(--accent-brand-darker);
- --button-outlined-inverted-color-hover: var(--accent-brand-darker);
-
- // Ghost buttons
- --button-ghost-bg: transparent;
- --button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
- --button-ghost-color: var(--base-80);
- --button-ghost-color-hover: var(--base-100);
- --button-ghost-dimmed-color: var(--base-60);
- --button-ghost-dimmed-color-hover: var(--base-100);
- //-- Inverted
- --button-ghost-inverted-bg: transparent;
- --button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
- --button-ghost-inverted-color: var(--base-30);
- --button-ghost-inverted-color-hover: var(--base-10);
- --button-ghost-inverted-color: var(--base-30);
- --button-ghost-inverted-color-hover: var(--base-10);
-
- // Forms
- --form-bg: var(--base-0);
- --form-bg-focus: var(--base-inverted);
- --form-border: var(--base-30);
- --form-border-hover: var(--base-40);
- --form-border-focus: var(--accent-brand);
- --form-placeholder-color: var(--base-60);
-
- // Form labels
- --label-primary: var(--accent-brand);
- --label-secondary: var(--accent-brand-darker);
-
- // Default box
- --box: var(--base-90);
- --box-darker: var(--base-100);
-
- // Snackbars
- --snackbar-bg: var(--base-10);
- --snackbar-color: var(--accent-brand);
-
- // Indicators
- --indicator-accent-bg: var(--accent-brand);
- --indicator-accent-color: var(--body-color-inverted);
- --indicator-critical-bg: var(--accent-danger);
- --indicator-critical-color: var(--body-color-inverted);
- --indicator-default-bg: var(--button-secondary-bg);
- --indicator-default-color: var(--button-secondary-color);
-
- // Tabs
- --tab-color: var(--base-80);
- --tab-color-hover: var(--accent-brand);
- --tab-color-current: var(--base-100);
- --tab-bg-hover: var(--accent-brand-a10);
- --tab-bg-current: var(--accent-brand);
- --tab-muted-color: var(--base-80);
- --tab-muted-color-hover: var(--base-90);
- --tab-muted-color-current: var(--base-100);
- --tab-muted-bg-hover: var(--base-a10);
- --tab-muted-bg-current: var(--base-20);
- --tab-pill-color-current: var(--base-inverted);
-
- // Tags
- --tag-color: var(--base-70);
- --tag-color-hover: var(--base-100);
-
- // Story
- --story-comments-bg: 13, 13, 13;
- --story-comments-bg-top: rgba(var(--story-comments-bg), 0);
- --story-comments-bg-bottom: rgba(var(--story-comments-bg), 1);
-
- // Select icon
- --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMkVGRjdCIi8+Cjwvc3ZnPg==);
-
- // Reactions
- --reaction-like-color: var(--accent-danger);
- --reaction-like-bg: var(--accent-danger-a10);
- --reaction-custom-color: var(--accent-success);
- --reaction-custom-bg: var(--accent-success-a10);
- --reaction-save-color: var(--accent-warning);
- --reaction-save-bg: var(--accent-warning-a10);
-}
diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss
deleted file mode 100644
index f52c70b21..000000000
--- a/app/assets/stylesheets/themes/minimal.scss
+++ /dev/null
@@ -1,221 +0,0 @@
-:root {
- --theme-secondary-color: #505159;
- --theme-container-background: #ffffff;
- --theme-container-accent-background: #f4f5f7;
- --theme-container-background-hover: #efefef;
- --theme-container-box-shadow: none;
- --theme-container-border: 1px solid #e3e3e5;
-
- // Base
- --base: #0a0a0a;
-
- --base-a90: #{rgba(#0a0a0a, 0.9)};
- --base-a80: #{rgba(#0a0a0a, 0.8)};
- --base-a70: #{rgba(#0a0a0a, 0.7)};
- --base-a60: #{rgba(#0a0a0a, 0.6)};
- --base-a50: #{rgba(#0a0a0a, 0.5)};
- --base-a40: #{rgba(#0a0a0a, 0.4)};
- --base-a30: #{rgba(#0a0a0a, 0.3)};
- --base-a20: #{rgba(#0a0a0a, 0.2)};
- --base-a10: #{rgba(#0a0a0a, 0.1)};
- --base-a5: #{rgba(#0a0a0a, 0.05)};
-
- --base-100: var(--base);
- --base-90: #202020;
- --base-80: #353535;
- --base-70: #4b4b4b;
- --base-60: #626262;
- --base-50: #7a7a7a;
- --base-40: #939393;
- --base-30: #adadad;
- --base-20: #c8c8c8;
- --base-10: #e3e3e3;
- --base-0: #ffffff;
- --base-inverted: #ffffff;
-
- // Accent colors
- --accent-brand: #3b49df;
- --accent-brand-darker: #1827ce;
- --accent-brand-lighter: #8d95f2;
- --accent-brand-a10: #{rgba(#3b49df, 0.1)};
-
- // Success
- --accent-success: #26d9ca;
- --accent-success-darker: #1ab3a6;
- --accent-success-lighter: #79ece2;
- --accent-success-a10: #{rgba(#26d9ca, 0.1)};
-
- // Warning
- --accent-warning: #ffcf4c;
- --accent-warning-darker: #f5b400;
- --accent-warning-lighter: #ffe499;
- --accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
-
- // Danger
- --accent-danger: #dc1818;
- --accent-danger-darker: #c20a0a;
- --accent-danger-lighter: #ec5050;
- --accent-danger-a10: #{rgba(#dc1818, 0.1)};
-
- // Main colors
- --body-bg: #fcfcfc;
- --body-color: #0a0a0a;
- --body-color-inverted: var(--base-inverted);
-
- // Main content containers
- --card-bg: var(--base-inverted);
- --card-color: var(--base-100);
- --card-color-secondary: var(--base-70);
- --card-color-tertiary: var(--base-50);
- --card-secondary-bg: var(--base-0);
- --card-secondary-color: var(--base-90);
- --card-headline-color: var(--base-100);
- --card-border: var(--base-a5);
- --card-secondary-border: var(--base-a5);
- --card-hover-bg: var(--base-10);
- --card-selected-bg: var(--base-20);
-
- // Header
- --header-bg: var(--base-0);
- --header-bg-hover: var(--base-10);
- --header-button-focus-color: var(--accent-brand);
- --header-bg-current: var(--base-20);
- --header-shadow: rgba(0, 0, 0, 0.1);
- --header-icons-color: #0a0a0a;
- --header-icons-color-hover: #000;
-
- // Logo
- --logo-bg: #e3e5ed;
- --logo-color: #232426;
-
- // Footer
- --footer-bg: var(--base-inverted);
- --footer-copy-color: var(--base-80);
- --footer-copy-secondary-color: var(--base-60);
- --footer-link-color: var(--base-80);
- --footer-link-color-hover: var(--base-100);
-
- // Links
- --link-color: var(--base-90);
- --link-color-hover: var(--accent-brand-darker);
- --link-color-current: var(--base-100);
- --link-color-secondary: var(--base-70);
- --link-color-secondary-hover: var(--base-80);
- --link-brand-color: var(--accent-brand);
- --link-bg-hover: var(--base-a5);
- --link-bg-hover-alt: var(--base-10);
- --link-bg-current: var(--base-inverted);
-
- // Primary buttons
- --button-primary-bg: var(--base-90);
- --button-primary-bg-hover: var(--base-100);
- --button-primary-color: var(--base-10);
- --button-primary-color-hover: var(--base-0);
- //-- Inverted
- --button-primary-inverted-bg: var(--base-10);
- --button-primary-inverted-bg-hover: var(--base-0);
- --button-primary-inverted-color: var(--base-90);
- --button-primary-inverted-color-hover: var(--base-100);
-
- // Secondary buttons
- --button-secondary-bg: var(--base-20);
- --button-secondary-bg-hover: var(--base-30);
- --button-secondary-color: var(--base-80);
- --button-secondary-color-hover: var(--base-100);
- //-- Inverted
- --button-secondary-inverted-bg: var(--base-70);
- --button-secondary-inverted-bg-hover: var(--base-60);
- --button-secondary-inverted-color: var(--base-10);
- --button-secondary-inverted-color-hover: var(--base-0);
-
- // Outlined buttons
- --button-outlined-bg: transparent;
- --button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
- --button-outlined-border: var(--base-20);
- --button-outlined-border-hover: var(--base-40);
- --button-outlined-color: var(--base-80);
- --button-outlined-color-hover: var(--base-100);
- //-- Inverted
- --button-outlined-inverted-bg: transparent;
- --button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
- --button-outlined-inverted-border: var(--base-60);
- --button-outlined-inverted-border-hover: var(--base-40);
- --button-outlined-inverted-color: var(--base-30);
- --button-outlined-inverted-color-hover: var(--base-10);
-
- // Ghost buttons
- --button-ghost-bg: transparent;
- --button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
- --button-ghost-color: var(--base-80);
- --button-ghost-color-hover: var(--base-100);
- --button-ghost-dimmed-color: var(--base-60);
- --button-ghost-dimmed-color-hover: var(--base-100);
- //-- Inverted
- --button-ghost-inverted-bg: transparent;
- --button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
- --button-ghost-inverted-color: var(--base-30);
- --button-ghost-inverted-color-hover: var(--base-10);
- --button-ghost-dimmed-inverted-color: var(--base-50);
- --button-ghost-dimmed-inverted-color-hover: var(--base-100);
-
- // Forms
- --form-bg: #f4f5f7;
- --form-bg-focus: var(--base-0);
- --form-border: #f4f5f7;
- --form-border-hover: var(--base-40);
- --form-border-focus: var(--accent-brand);
- --form-placeholder-color: var(--base-60);
-
- // Form labels
- --label-primary: var(--base-90);
- --label-secondary: var(--base-60);
-
- // Default box
- --box: var(--base-90);
- --box-darker: var(--base-100);
-
- // Snackbars
- --snackbar-bg: var(--base-90);
- --snackbar-color: var(--body-color-inverted);
-
- // Indicators
- --indicator-accent-bg: var(--accent-brand);
- --indicator-accent-color: var(--body-color-inverted);
- --indicator-critical-bg: var(--accent-danger);
- --indicator-critical-color: var(--body-color-inverted);
- --indicator-default-bg: var(--button-secondary-bg);
- --indicator-default-color: var(--button-secondary-color);
-
- // Tabs
- --tab-color: var(--base-80);
- --tab-color-hover: var(--accent-brand);
- --tab-color-current: var(--base-100);
- --tab-bg-hover: var(--accent-brand-a10);
- --tab-bg-current: var(--accent-brand);
- --tab-muted-color: var(--base-80);
- --tab-muted-color-hover: var(--base-90);
- --tab-muted-color-current: var(--base-100);
- --tab-muted-bg-hover: var(--base-a10);
- --tab-muted-bg-current: var(--base-20);
- --tab-pill-color-current: var(--base-inverted);
-
- // Tags
- --tag-color: var(--base-70);
- --tag-color-hover: var(--base-100);
-
- // Story
- --story-comments-bg: 250, 250, 250;
- --story-comments-bg-top: rgba(var(--story-comments-bg), 0);
- --story-comments-bg-bottom: rgba(var(--story-comments-bg), 1);
-
- // Select icon
- --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjN2E3YTdhIi8+Cjwvc3ZnPg==);
-
- // Reactions
- --reaction-like-color: var(--accent-danger);
- --reaction-like-bg: var(--accent-danger-a10);
- --reaction-custom-color: var(--accent-success);
- --reaction-custom-bg: var(--accent-success-a10);
- --reaction-save-color: var(--accent-brand);
- --reaction-save-bg: var(--accent-brand-a10);
-}
diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss
deleted file mode 100644
index fea357ea3..000000000
--- a/app/assets/stylesheets/themes/pink.scss
+++ /dev/null
@@ -1,221 +0,0 @@
-:root {
- --theme-secondary-color: #4e57ef;
- --theme-container-background: #fff;
- --theme-container-accent-background: #ffccdb;
- --theme-container-background-hover: #ffe5eb;
- --theme-container-box-shadow: none;
- --theme-container-border: 1px solid #ff4983;
-
- // Base
- --base: #1c060d;
-
- --base-a90: #{rgba(#1c060d, 0.9)};
- --base-a80: #{rgba(#1c060d, 0.8)};
- --base-a70: #{rgba(#1c060d, 0.7)};
- --base-a60: #{rgba(#1c060d, 0.6)};
- --base-a50: #{rgba(#1c060d, 0.5)};
- --base-a40: #{rgba(#1c060d, 0.4)};
- --base-a30: #{rgba(#1c060d, 0.3)};
- --base-a20: #{rgba(#1c060d, 0.2)};
- --base-a10: #{rgba(#1c060d, 0.1)};
- --base-a5: #{rgba(#1c060d, 0.05)};
-
- --base-100: var(--base);
- --base-90: #330f1a;
- --base-80: #57192d;
- --base-70: #7d2440;
- --base-60: #a52f55;
- --base-50: #cf3b6b;
- --base-40: #fb4881;
- --base-30: #ff7da6;
- --base-20: #ffa9c4;
- --base-10: #ffd1df;
- --base-0: #fff7f9;
- --base-inverted: #fff;
-
- // Accent colors
- --accent-brand: #ff6c9b;
- --accent-brand-darker: #f03e76;
- --accent-brand-lighter: #ff99b9;
- --accent-brand-a10: #{rgba(#ff6c9b, 0.1)};
-
- // Success
- --accent-success: #71db92;
- --accent-success-darker: #5abf79;
- --accent-success-lighter: #93edaf;
- --accent-success-a10: #{rgba(#71db92, 0.1)};
-
- // Warning
- --accent-warning: #ffcf4c;
- --accent-warning-darker: #f5b400;
- --accent-warning-lighter: #ffe499;
- --accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
-
- // Danger
- --accent-danger: #dc1818;
- --accent-danger-darker: #c20a0a;
- --accent-danger-lighter: #ec5050;
- --accent-danger-a10: #{rgba(#dc1818, 0.1)};
-
- // Main colors
- --body-bg: var(--base-0);
- --body-color: var(--base-100);
- --body-color-inverted: var(--base-inverted);
-
- // Main content containers
- --card-bg: var(--base-inverted);
- --card-color: var(--base-100);
- --card-color-secondary: var(--base-70);
- --card-color-tertiary: var(--base-50);
- --card-secondary-bg: rgba(255, 209, 223, 0.3);
- --card-secondary-color: var(--base-90);
- --card-headline-color: var(--base-100);
- --card-border: var(--accent-brand);
- --card-secondary-border: #{rgba(#ff6c9b, 0.2)};
- --card-hover-bg: var(--base-10);
- --card-selected-bg: var(--base-20);
-
- // Header
- --header-bg: var(--base-40);
- --header-bg-hover: var(--base-50);
- --header-bg-current: var(--base-50);
- --header-button-focus-color: var(--accent-brand);
- --header-shadow: rgba(0, 0, 0, 0.1);
- --header-icons-color: var(--base-10);
- --header-icons-color-hover: var(--base-0);
-
- // Logo
- --logo-bg: var(--base-inverted);
- --logo-color: var(--header-bg);
-
- // Footer
- --footer-bg: var(--base-inverted);
- --footer-copy-color: var(--base-80);
- --footer-copy-secondary-color: var(--base-60);
- --footer-link-color: var(--base-80);
- --footer-link-color-hover: var(--base-100);
-
- // Links
- --link-color: var(--base-90);
- --link-color-hover: var(--base-70);
- --link-color-current: var(--base-100);
- --link-color-secondary: var(--base-70);
- --link-color-secondary-hover: var(--base-80);
- --link-brand-color: #4e57ef;
- --link-bg-hover: var(--base-a5);
- --link-bg-hover-alt: var(--base-inverted);
- --link-bg-current: var(--base-inverted);
-
- // Primary buttons
- --button-primary-bg: var(--accent-brand);
- --button-primary-bg-hover: var(--accent-brand-darker);
- --button-primary-color: var(--base-0);
- --button-primary-color-hover: var(--base-0);
- //-- Inverted
- --button-primary-inverted-bg: var(--accent-brand);
- --button-primary-inverted-bg-hover: var(--accent-brand-darker);
- --button-primary-inverted-color: var(--base-0);
- --button-primary-inverted-color-hover: var(--base-0);
-
- // Secondary buttons
- --button-secondary-bg: var(--base-10);
- --button-secondary-bg-hover: var(--base-20);
- --button-secondary-color: var(--base-70);
- --button-secondary-color-hover: var(--base-90);
- //-- Inverted
- --button-secondary-inverted-bg: var(--base-60);
- --button-secondary-inverted-bg-hover: var(--base-60);
- --button-secondary-inverted-color: var(--base-10);
- --button-secondary-inverted-color-hover: var(--base-0);
-
- // Outlined buttons
- --button-outlined-bg: transparent;
- --button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
- --button-outlined-border: var(--base-20);
- --button-outlined-border-hover: var(--base-40);
- --button-outlined-color: var(--base-70);
- --button-outlined-color-hover: var(--base-90);
- //-- Inverted
- --button-outlined-inverted-bg: transparent;
- --button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
- --button-outlined-inverted-border: var(--base-60);
- --button-outlined-inverted-border-hover: var(--base-40);
- --button-outlined-inverted-color: var(--base-30);
- --button-outlined-inverted-color-hover: var(--base-10);
-
- // Ghost buttons
- --button-ghost-bg: transparent;
- --button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
- --button-ghost-color: var(--base-90);
- --button-ghost-color-hover: var(--base-100);
- --button-ghost-dimmed-color: var(--base-60);
- --button-ghost-dimmed-color-hover: var(--base-100);
- //-- Inverted
- --button-ghost-inverted-bg: transparent;
- --button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
- --button-ghost-inverted-color: var(--base-30);
- --button-ghost-inverted-color-hover: var(--base-10);
- --button-ghost-dimmed-inverted-color: var(--base-50);
- --button-ghost-dimmed-inverted-color-hover: var(--base-100);
-
- // Forms
- --form-bg: #fff7f9;
- --form-bg-focus: var(--base-0);
- --form-border: var(--base-50);
- --form-border-hover: var(--base-60);
- --form-border-focus: var(--base-60);
- --form-placeholder-color: var(--base-60);
-
- // Form labels
- --label-primary: var(--base-100);
- --label-secondary: var(--base-90);
-
- // Default box
- --box: var(--card-bg);
- --box-darker: var(--base-100);
-
- // Snackbars
- --snackbar-bg: var(--base-90);
- --snackbar-color: var(--body-color-inverted);
-
- // Indicators
- --indicator-accent-bg: var(--link-brand-color);
- --indicator-accent-color: var(--body-color-inverted);
- --indicator-critical-bg: var(--base-80);
- --indicator-critical-color: var(--body-color-inverted);
- --indicator-dimmed-bg: var(--base-30);
- --indicator-dimmed-color: var(--base-70);
-
- // Tabs
- --tab-color: var(--base-80);
- --tab-color-hover: var(--accent-brand);
- --tab-color-current: var(--base-100);
- --tab-bg-hover: var(--accent-brand-a10);
- --tab-bg-current: var(--accent-brand);
- --tab-muted-color: var(--base-80);
- --tab-muted-color-hover: var(--base-90);
- --tab-muted-color-current: var(--base-100);
- --tab-muted-bg-hover: var(--base-a10);
- --tab-muted-bg-current: var(--base-20);
- --tab-pill-color-current: var(--base-inverted);
-
- // Tags
- --tag-color: var(--base-70);
- --tag-color-hover: var(--base-100);
-
- // Story
- --story-comments-bg: 255, 255, 255;
- --story-comments-bg-top: rgba(var(--story-comments-bg), 0);
- --story-comments-bg-bottom: rgba(var(--story-comments-bg), 1);
-
- // Select icon
- --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjNTcxOTJkIi8+Cjwvc3ZnPg==);
-
- // Reactions
- --reaction-like-color: var(--accent-danger);
- --reaction-like-bg: var(--accent-danger-a10);
- --reaction-custom-color: var(--accent-success);
- --reaction-custom-bg: var(--accent-success-a10);
- --reaction-save-color: var(--accent-brand);
- --reaction-save-bg: var(--accent-brand-a10);
-}
diff --git a/app/decorators/user_decorator.rb b/app/decorators/user_decorator.rb
index 91ff7bea9..0811d5d36 100644
--- a/app/decorators/user_decorator.rb
+++ b/app/decorators/user_decorator.rb
@@ -61,10 +61,6 @@ class UserDecorator < ApplicationDecorator
body_class.join(" ")
end
- def dark_theme?
- setting.dark_theme? || setting.ten_x_hacker_theme?
- end
-
def assigned_color
colors = [
{
diff --git a/app/javascript/.storybook/preview.js b/app/javascript/.storybook/preview.js
index ce1b36614..07a392fc9 100644
--- a/app/javascript/.storybook/preview.js
+++ b/app/javascript/.storybook/preview.js
@@ -40,7 +40,7 @@ function themeSwitcher(event) {
addStylesheet(theme);
}
-const THEMES = Object.freeze(['default', 'night', 'minimal', 'pink', 'hacker']);
+const THEMES = Object.freeze(['light', 'dark']);
const themeSwitcherDecorator = (storyFn) => {
const lastThemeUsed = localStorage.getItem('storybook-crayons-theme') || '';
diff --git a/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx b/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx
index 82f8850b4..9dc8378c0 100644
--- a/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx
+++ b/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx
@@ -36,7 +36,7 @@ themes. We have a file with all color variables and each theme has its own too.
- Default theme: `app/assets/stylesheets/config/_colors.scss`
-- Other themes (minimal, dark, pink, hacker): `app/assets/stylesheets/themes`
+- Dark theme: `app/assets/stylesheets/themes/dark.scss`
### Import.scss
diff --git a/app/models/users/setting.rb b/app/models/users/setting.rb
index e6e0f506e..d2d50046d 100644
--- a/app/models/users/setting.rb
+++ b/app/models/users/setting.rb
@@ -12,8 +12,8 @@ module Users
_suffix: :font
enum inbox_type: { private: 0, open: 1 }, _suffix: :inbox
enum config_navbar: { default: 0, static: 1 }, _suffix: :navbar
- enum config_theme: { light_theme: 0, minimal_light_theme: 1, dark_theme: 2, pink_theme: 3,
- ten_x_hacker_theme: 4 }
+ # NOTE: We previously had a set of 5 themes with values from 0 to 4.
+ enum config_theme: { light_theme: 0, dark_theme: 2 }
enum config_homepage_feed: { default: 0, latest: 1, top_week: 2, top_month: 3, top_year: 4, top_infinity: 5 },
_suffix: :feed
diff --git a/app/views/credits/new.html.erb b/app/views/credits/new.html.erb
index 5df95864b..7194f4485 100644
--- a/app/views/credits/new.html.erb
+++ b/app/views/credits/new.html.erb
@@ -157,7 +157,7 @@
var stripe = Stripe('<%= Settings::General.stripe_publishable_key %>');
var elements = stripe.elements();
- <% if current_user.decorate.dark_theme? %>
+ <% if current_user.dark_theme? %>
var style = {
base: {
color: 'white',
diff --git a/app/views/layouts/_user_config.html.erb b/app/views/layouts/_user_config.html.erb
index 5ac19c795..7a6def8a4 100644
--- a/app/views/layouts/_user_config.html.erb
+++ b/app/views/layouts/_user_config.html.erb
@@ -8,12 +8,6 @@
if (bodyClass.includes('dark-theme')) {
document.getElementById('body-styles').innerHTML = '';
- } else if (bodyClass.includes('ten-x-hacker-theme')) {
- document.getElementById('body-styles').innerHTML = ''
- } else if (bodyClass.includes('pink-theme')) {
- document.getElementById('body-styles').innerHTML = ''
- } else if(bodyClass.includes('minimal-light-theme')) {
- document.getElementById('body-styles').innerHTML = ''
}
if (bodyClass.includes('open-dyslexic-article-body')) { // Preloading custom font for anticipated use
@@ -35,14 +29,14 @@
const user = JSON.parse(userString)
const numTags = JSON.parse(user.followed_tags).length
if (numTags < 6) {
- document.body.classList.add("user-tags-followed-"+numTags);
+ document.body.classList.add("user-tags-followed-" + numTags);
} else {
document.body.classList.add("user-tags-followed-max");
}
}
- } catch(e) {
- setTimeout(function(){
+ } catch (e) {
+ setTimeout(function () {
Honeybadger.notify(e);
- },1000)
+ }, 1000)
}
diff --git a/spec/decorators/user_decorator_spec.rb b/spec/decorators/user_decorator_spec.rb
index 79336778c..a558f429e 100644
--- a/spec/decorators/user_decorator_spec.rb
+++ b/spec/decorators/user_decorator_spec.rb
@@ -7,15 +7,15 @@ RSpec.describe UserDecorator, type: :decorator do
context "with serialization" do
it "serializes both the decorated object IDs and decorated methods" do
user = saved_user.decorate
- expected_result = { "id" => user.id, "dark_theme?" => user.dark_theme? }
- expect(user.as_json(only: [:id], methods: [:dark_theme?])).to eq(expected_result)
+ expected_result = { "id" => user.id }
+ expect(user.as_json(only: [:id])).to eq(expected_result)
end
it "serializes collections of decorated objects" do
user = saved_user.decorate
decorated_collection = User.decorate
- expected_result = [{ "id" => user.id, "dark_theme?" => user.dark_theme? }]
- expect(decorated_collection.as_json(only: [:id], methods: [:dark_theme?])).to eq(expected_result)
+ expected_result = [{ "id" => user.id }]
+ expect(decorated_collection.as_json(only: [:id])).to eq(expected_result)
end
end
@@ -132,24 +132,6 @@ RSpec.describe UserDecorator, type: :decorator do
expect(user.decorate.config_body_class).to eq(expected_result)
end
- it "creates proper body class with pink theme" do
- user.setting.config_theme = "pink_theme"
- expected_result = %W[
- pink-theme sans-serif-article-body
- trusted-status-#{user.trusted} #{user.setting.config_navbar}-header
- ].join(" ")
- expect(user.decorate.config_body_class).to eq(expected_result)
- end
-
- it "creates proper body class with minimal light theme" do
- user.setting.config_theme = "minimal_light_theme"
- expected_result = %W[
- minimal-light-theme sans-serif-article-body
- trusted-status-#{user.trusted} #{user.setting.config_navbar}-header
- ].join(" ")
- expect(user.decorate.config_body_class).to eq(expected_result)
- end
-
it "works with static navbar" do
user.setting.config_navbar = "static"
expected_result = %W[
@@ -174,23 +156,6 @@ RSpec.describe UserDecorator, type: :decorator do
end
end
- describe "#dark_theme?" do
- it "determines dark theme if dark theme" do
- user.setting.config_theme = "dark_theme"
- expect(user.decorate.dark_theme?).to be(true)
- end
-
- it "determines dark theme if ten x hacker" do
- user.setting.config_theme = "ten_x_hacker_theme"
- expect(user.decorate.dark_theme?).to be(true)
- end
-
- it "determines not dark theme if not one of the dark themes" do
- user.setting.config_theme = "light_theme"
- expect(user.decorate.dark_theme?).to be(false)
- end
- end
-
describe "#fully_banished?" do
it "returns not fully banished if in good standing" do
expect(user.decorate.fully_banished?).to eq(false)
diff --git a/spec/factories/users_settings.rb b/spec/factories/users_settings.rb
index ccdcdb1e0..80d6b1f2a 100644
--- a/spec/factories/users_settings.rb
+++ b/spec/factories/users_settings.rb
@@ -11,5 +11,6 @@ FactoryBot.define do
feed_referential_link { true }
inbox_type { "private" }
permit_adjacent_sponsors { true }
+ prefer_os_color_scheme { true }
end
end
diff --git a/spec/models/user_spec.rb b/spec/models/user_spec.rb
index cf2208a59..b4e76f359 100644
--- a/spec/models/user_spec.rb
+++ b/spec/models/user_spec.rb
@@ -647,21 +647,6 @@ RSpec.describe User, type: :model do
expect(user.decorate.config_body_class).to eq(classes)
end
- it "determines dark theme if dark theme" do
- user.setting.config_theme = "dark_theme"
- expect(user.decorate.dark_theme?).to eq(true)
- end
-
- it "determines dark theme if ten x hacker" do
- user.setting.config_theme = "ten_x_hacker_theme"
- expect(user.decorate.dark_theme?).to eq(true)
- end
-
- it "determines not dark theme if not one of the dark themes" do
- user.setting.config_theme = "light_theme"
- expect(user.decorate.dark_theme?).to eq(false)
- end
-
it "creates proper body class with sans serif config" do
user.setting.config_font = "sans_serif"
@@ -684,14 +669,6 @@ RSpec.describe User, type: :model do
user.setting.config_theme = "dark_theme"
classes = "dark-theme sans-serif-article-body trusted-status-#{user.trusted} #{user.setting.config_navbar}-header"
-
- expect(user.decorate.config_body_class).to eq(classes)
- end
-
- it "creates proper body class with pink theme" do
- user.setting.config_theme = "pink_theme"
-
- classes = "pink-theme sans-serif-article-body trusted-status-#{user.trusted} #{user.setting.config_navbar}-header"
expect(user.decorate.config_body_class).to eq(classes)
end
end
diff --git a/spec/models/users/setting_spec.rb b/spec/models/users/setting_spec.rb
index 2379d24bc..d5e16e651 100644
--- a/spec/models/users/setting_spec.rb
+++ b/spec/models/users/setting_spec.rb
@@ -11,7 +11,7 @@ RSpec.describe Users::Setting, type: :model do
it { is_expected.to define_enum_for(:inbox_type).with_values(private: 0, open: 1).with_suffix(:inbox) }
it { is_expected.to define_enum_for(:config_font).with_values(default: 0, comic_sans: 1, monospace: 2, open_dyslexic: 3, sans_serif: 4, serif: 5).with_suffix(:font) }
it { is_expected.to define_enum_for(:config_navbar).with_values(default: 0, static: 1).with_suffix(:navbar) }
- it { is_expected.to define_enum_for(:config_theme).with_values(light_theme: 0, minimal_light_theme: 1, dark_theme: 2, pink_theme: 3, ten_x_hacker_theme: 4) }
+ it { is_expected.to define_enum_for(:config_theme).with_values(light_theme: 0, dark_theme: 2) }
it { is_expected.to define_enum_for(:config_homepage_feed).with_values(default: 0, latest: 1, top_week: 2, top_month: 3, top_year: 4, top_infinity: 5).with_suffix(:feed) }
describe "validating color fields" do