Add backend dimmed dark theme css

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 · Jun 16, 2023 · c19b51f · c19b51f
1 parent f234676
commit c19b51f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
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/lib/spree/backend_configuration.rb b/backend/lib/spree/backend_configuration.rb
@@ -11,6 +11,7 @@ class BackendConfiguration < Preferences::Configuration
  preference :themes, :hash, default: {
  classic: 'spree/backend/all',
  classic_dark: 'spree/backend/themes/classic_dark',
+ classic_dark_dimmed: 'spree/backend/themes/classic_dark_dimmed',
  solidus_admin: 'spree/backend/themes/solidus_admin',
  }