Add dark and dimmed theme variants

dark: Full black background with no alteration on images. dimmed: Dark gray background with dimmed images, easier on the eyes but less accurate colors. Co-Authored-By: piyushswain <[email protected]> Co-Authored-By: Elia Schito <[email protected]> Co-Authored-By: Massimiliano Lattanzio <[email protected]>
solidusio · Sep 26, 2023 · 850a525 · 850a525
1 parent 170d761
commit 850a525
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 1 deletion.
diff --git a/backend/app/assets/stylesheets/spree/backend/themes/classic_dark.css.scss b/backend/app/assets/stylesheets/spree/backend/themes/classic_dark.css.scss
@@ -0,0 +1,16 @@
+@import 'spree/backend/themes/classic';
+
+html {
+ background-color: #fff;
+ color: #fff;
+ -webkit-filter: invert(100%);
+ filter: invert(100%) hue-rotate(180deg);
+
+ img {
+ filter: invert(100%) hue-rotate(-180deg);
+ }
+
+ .brand-link img {
+ filter: invert(0%) hue-rotate(0deg);
+ }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/themes/classic_dark_dimmed.css.scss b/backend/app/assets/stylesheets/spree/backend/themes/classic_dark_dimmed.css.scss
@@ -0,0 +1,16 @@
+@import 'spree/backend/themes/classic';
+
+html {
+ background-color: #fff;
+ color: #fff;
+ -webkit-filter: invert(85%);
+ filter: invert(85%) hue-rotate(180deg);
+
+ img {
+ filter: invert(100%) hue-rotate(-180deg);
+ }
+
+ .brand-link img {
+ filter: invert(0%) hue-rotate(0deg);
+ }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin_dark.css.scss b/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin_dark.css.scss
@@ -0,0 +1,16 @@
+@import "./solidus_admin";
+
+html {
+ background-color: #fff;
+ color: #fff;
+ -webkit-filter: invert(100%);
+ filter: invert(100%) hue-rotate(180deg);
+
+ img {
+ filter: invert(100%) hue-rotate(-180deg);
+ }
+
+ .brand-link img {
+ filter: invert(0%) hue-rotate(0deg);
+ }
+}
diff --git a/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin_dimmed.css.scss b/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin_dimmed.css.scss
@@ -0,0 +1,16 @@
+@import "./solidus_admin";
+
+html {
+ background-color: #fff;
+ color: #fff;
+ -webkit-filter: invert(85%);
+ filter: invert(85%) hue-rotate(180deg);
+
+ img {
+ filter: invert(100%) hue-rotate(-180deg);
+ }
+
+ .brand-link img {
+ filter: invert(0%) hue-rotate(0deg);
+ }
+}
diff --git a/backend/lib/spree/backend_configuration.rb b/backend/lib/spree/backend_configuration.rb
@@ -11,7 +11,11 @@ class BackendConfiguration < Preferences::Configuration
  # @return [Hash] A hash containing the themes that are available for the admin panel
  preference :themes, :hash, default: {
  classic: 'spree/backend/all',
- solidus_admin: 'spree/backend/themes/solidus_admin'
+ classic_dark: 'spree/backend/themes/classic_dark',
+ classic_dark_dimmed: 'spree/backend/themes/classic_dark_dimmed',
+ solidus_admin: 'spree/backend/themes/solidus_admin',
+ solidus_admin_dark: 'spree/backend/themes/solidus_admin_dark',
+ solidus_admin_dimmed: 'spree/backend/themes/solidus_admin_dimmed',
  }
 
  # @!attribute [rw] theme