New feature: Dark mode for toolbar, page tree, structure tree, modals…

…, login and wizard (#7245) * Fix: toolbar bug 3.10.rc1 * Feat: Dark mode support, including input from @marksweb, bugfix for tooltips * Upstream change to be able to merge * Feat: Dark mode support, including input from @marksweb, bugfix for tooltips * Revert "Fix: toolbar bug 3.10.rc1" This reverts commit 592a2b6. * Fix: Recommit toolbar fix (??) * Fix: After lint failure: Remove spaces added by PyCharm * Fix: Wizzard button color Co-authored-by: Vinit Kumar <mail@vinitkumar.me>
django-cms · Mar 12, 2022 · b2d9a08 · b2d9a08
1 parent ab1ec2c
commit b2d9a08
Show file tree

Hide file tree

Showing 15 changed files with 130 additions and 70 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -6,6 +6,7 @@ Changelog
 unreleased
 ==========
 
+* Added dark mode support to css
 * Fix publishing of static placeholders outside of CMS pages
 
 3.9.0 (2021-06-30)

diff --git a/cms/static/cms/sass/cms.base.scss b/cms/static/cms/sass/cms.base.scss
@@ -33,6 +33,8 @@ div.cms {
     @import "components/pluginpicker";
     @import "components/shortcuts";
 
+    color-scheme: light dark;
+
     *:not(.cms-modal):focus {
         outline: 2px dotted $gray-darker;
         outline-offset: -3px;

diff --git a/cms/static/cms/sass/cms.wizard.scss b/cms/static/cms/sass/cms.wizard.scss
@@ -71,7 +71,7 @@ $wizard-input-size: 16px;
 
         &.active {
             border-color: $btn-action-border;
-            background: lighten($btn-action-bgcolor, 45%);
+            background: rgba($color-primary-fallback, 45%);
         }
     }
 }
diff --git a/cms/static/cms/sass/components/_clipboard.scss b/cms/static/cms/sass/components/_clipboard.scss
@@ -45,13 +45,13 @@
         bottom: 0;
         left: 0;
         z-index: z(structure, content, empty, droppable);
-        color: darken($gray-lighter, 15%);
+        color: $gray-light;
         line-height: $structure-dragitem-height;
         height: auto;
         margin: 0;
         border: 2px solid $color-primary;
         border-radius: $border-radius-base;
-        background-color: mix(white, $color-primary, 90%);
+        background-color: rgba($color-primary-fallback, 20%);
         box-shadow: none;
         transform: translateY(0) !important;
         &:before {

diff --git a/cms/static/cms/sass/components/_dropdown.scss b/cms/static/cms/sass/components/_dropdown.scss
@@ -69,7 +69,7 @@
         color: $dropdown-link-color;
         &.cms-btn-action,
         &.cms-btn-caution {
-            color: white;
+            color: $white;
         }
         white-space: nowrap; // prevent links from randomly breaking onto new lines
     }
@@ -197,7 +197,7 @@
             text-align: left !important;
             &.cms-btn-action,
             &.cms-btn-caution {
-                color: white;
+                color: $white;
             }
             &:first-child {
                 border-right: none !important;
@@ -217,8 +217,7 @@
 .cms-btn-group {
     > .cms-btn {
         &.cms-btn-action:last-child {
-            border-left: 1px solid darken($color-primary, 10%);
-
+            border-left: 1px solid darken($color-primary-fallback, 10%);
         }
         &.cms-btn-caution:last-child {
             border-left: 1px solid darken($color-danger, 10%);

diff --git a/cms/static/cms/sass/components/_modal.scss b/cms/static/cms/sass/components/_modal.scss
@@ -223,7 +223,7 @@
     a {
         color: $color-primary;
         &:hover {
-            color: darken($color-primary, 20%);
+            filter: brightness(0.8);
         }
         &:after {
             content: "/";

diff --git a/cms/static/cms/sass/components/_pluginpicker.scss b/cms/static/cms/sass/components/_pluginpicker.scss
@@ -91,5 +91,5 @@
     padding-left: 20px;
     border: 2px solid $color-primary;
     border-radius: $border-radius-base;
-    background-color: mix(white, $color-primary, 90%);
+    background-color: rgba($color-primary-fallback, 20%);
 }
diff --git a/cms/static/cms/sass/components/_reset.scss b/cms/static/cms/sass/components/_reset.scss
@@ -19,7 +19,7 @@
     h1,
     h2,
     h3 {
-        color: #222;
+        color: var(--);
         font: normal #{$font-size-normal}/#{$line-height-normal} Helvetica,Arial,sans-serif;
         text-align: left;
         text-decoration: none;

diff --git a/cms/static/cms/sass/components/_structureboard.scss b/cms/static/cms/sass/components/_structureboard.scss
@@ -135,7 +135,8 @@
                 color: $btn-default-color !important;
                 font-size: $font-size-small !important;
                 &:hover {
-                    color: darken($btn-default-color, 10%) !important;
+                    color: $btn-default-color !important;
+                    filter: brightness(0.9);
                 }
             }
         }
@@ -265,7 +266,7 @@
             margin: 0;
             border: 2px solid $color-primary;
             border-radius: $border-radius-base;
-            background-color: mix(white, $color-primary, 90%);
+            background-color: rgba($color-primary-fallback, 20%);
             box-shadow: none;
             transform: translateY(0) !important;
             &:before {
@@ -315,7 +316,7 @@
             background-image: none !important;
             &:before {
                 display: none;
-                color: white;
+                color: $white;
             }
             .cms-draggables {
                 display: none;
@@ -381,7 +382,7 @@
 
     .cms-draggable-selected .cms-dragitem,
     .cms-draggable-selected .cms-dragitem strong {
-        color: adjust-hue($color-primary, 15deg);
+        color: adjust-hue($color-primary-fallback, 15deg);
     }
     .cms-draggable-selected .cms-draggable .cms-dragitem,
     .cms-draggable-selected .cms-draggable .cms-dragitem strong {
@@ -391,8 +392,8 @@
     .cms-draggable-allowed,
     .cms-draggable-hover-allowed,
     .cms-draggable-placeholder {
-        color: lighten($color-primary, 40%);
-        border-color: lighten($color-primary, 40%);
+        color: lighten($color-primary-fallback, 40%);
+        border-color: lighten($color-primary-fallback, 40%);
     }
     .cms-draggable-hover-allowed,
     .cms-draggable-placeholder {
@@ -543,7 +544,7 @@
     left: -2px;
     z-index: z(structure, content, droppable);
     border: 1px solid $color-primary !important;
-    background: mix(white, $color-primary, 80%) !important;
+    background: rgba($color-primary-fallback, 20%) !important;
     border-radius: $border-radius-base;
     opacity: 0.6;
 

diff --git a/cms/static/cms/sass/components/_subnav.scss b/cms/static/cms/sass/components/_subnav.scss
@@ -34,7 +34,8 @@
     background-color: transparent;
     &:active,
     &.cms-btn-active {
-        background-color: darken($btn-default-bgcolor, 10%);
+        color: $btn-default-color !important;
+        filter: brightness(0.9);
     }
 }
 .cms-submenu-settings {
@@ -202,7 +203,7 @@
 
     .cms-dropdown-inner {
         z-index: 1;
-        background-color: white;
+        background-color: $white;
         border-radius: $border-radius-normal;
     }
 

diff --git a/cms/static/cms/sass/components/_toolbar.scss b/cms/static/cms/sass/components/_toolbar.scss
@@ -373,7 +373,8 @@
         text-decoration: underline;
     }
     strong {
-        color: lighten($color-primary, 10%);
+        color: $color-primary;
+        filter: brightness(1.1);
         font-weight: $messages-font-weight;
     }
     ul {
@@ -414,6 +415,7 @@
     a {
         @extend .cms-icon;
         @extend .cms-icon-logo;
+        color: $black;
         font-size: $toolbar-logo-height;
         line-height: $toolbar-height;
         height: $toolbar-height;

diff --git a/cms/static/cms/sass/components/pagetree/_tree.scss b/cms/static/cms/sass/components/pagetree/_tree.scss
@@ -207,12 +207,12 @@
         border-radius: $border-radius-base;
 
         &:hover {
-            background: darken($color-primary, 5%) !important;
+            background: darken($color-primary-fallback, 5%) !important;
         }
         &:active,
         &:focus {
             color: $white !important;
-            background: darken($color-primary, 15%) !important;
+            background: darken($color-primary-fallback, 15%) !important;
         }
     }
     .cms-pagetree-header-filter {
@@ -872,7 +872,7 @@
     // hover states
     .jstree-hovered,
     .jstree-clicked {
-        background-color: lighten($gray-lightest, 3%) !important;
+        background-color: $gray-lightest !important;
     }
 
     // special case for paste header
@@ -957,12 +957,12 @@
         > .jstree-anchor {
             border-style: solid;
             border-right: none;
-            background-color: white !important;
+            background-color: $white !important;
             border-bottom: $pagetree-border;
 
             &.jstree-hovered,
             &.jstree-clicked {
-                background-color: lighten($gray-lightest, 3%) !important;
+                background-color: $gray-lightest !important;
             }
         }
 
@@ -1000,11 +1000,12 @@
     }
 
     .cms-page-tree-cell-shared--false {
-        background-color: white;
+        background-color: $white;
 
         &.jstree-hovered,
         &.jstree-clicked {
-            background-color: lighten($gray-lightest, 3%) !important;
+                 background-color: $gray-lightest !important;
+                filter: brightness(1.1);
         }
     }
 

diff --git a/cms/static/cms/sass/mixins/_buttons.scss b/cms/static/cms/sass/mixins/_buttons.scss
@@ -19,32 +19,37 @@
     background-clip: padding-box;
     -webkit-appearance: none;
     &:focus,
-    &.focus {
-        color: $color important($important);
-        background-color: darken($background, 5%) important($important);
-        border-color: darken($border, 5%) important($important);
-        text-decoration: none important($important);
-    }
+    &.focus,
     &:hover {
         color: $color important($important);
-        background-color: darken($background, 5%) important($important);
-        border-color: darken($border, 5%) important($important);
+        @if $background == $white {
+            background-color: $gray-lightest important($important);
+            border-color: $border important($important);
+        } @else {
+            background-color: $background important($important);
+            border-color: $border important($important);
+            filter: brightness(var(--focus-brightness)) opacity(1) important($important);
+            // Strange: removing opacity(1.) or correcting it makes item transparent
+        }
         text-decoration: none important($important);
     }
     &:active,
     &.cms-btn-active {
         color: $color important($important);
-        background-color: darken($background, 10%) important($important);
-        border-color: darken($border, 10%) important($important);
+        background-color: $background important($important);
+        border-color: $border important($important);
+        filter: brightness(var(--active-brightness)) opacity(1) important($important);
+        // Strange: removing opacity(1.) or correcting it makes item transparent
         box-shadow: $btn-active-shadow important($important);
 
         &:hover,
         &:focus,
         &.focus {
             color: $color important($important);
-            background-color: darken($background, 17%) important($important);
-            border-color: darken($border, 25%) important($important);
-        }
+            background-color: $background important($important);
+            border-color: $border important($important);
+            filter: brightness(calc(var(--focus-brightness) * var(--active-brightness))) opacity(1) important($important);
+        }  // Strange: removing opacity(1.) or correcting it makes item transparent
     }
     &:active,
     &.cms-btn-active {
@@ -57,14 +62,24 @@
         &:focus,
         &.focus,
         &:active,
-        &.cms-btn-active {
-            background-color: rgba($background, 0.4) important($important);
-            border-color: rgba($border, 0.4) important($important);
-            color: lighten($color, 50%) important(1);
+        &.cms-btn-active { // TODO: FABR
+            background-color: $background important($important);
+            border-color: $border important($important);
+            @if $color == $gray {
+                color: $gray-lighter important(1);
+            } @else {
+                color: $color important(1);
+                filter: brightness(0.6) opacity(1);  // Strange: removing opacity(1.) or correcting it makes item transparent
+            }
             cursor: not-allowed;
             box-shadow: none important($important);
             &:before {
-                color: rgba($color, 0.4) important(1);
+                @if $color == $gray {
+                    color: $gray-lighter important(1);
+                } @else {
+                    color: $color important(1);
+                    filter: brightness(0.6) opacity(1); // Strange: removing opacity(1.) or correcting it makes item transparent
+                }
             }
         }
     }