Skip to content

Commit f026ee5

Browse files
fsbraunfsbraun
authored
New feature: Dark mode for front-end editing (#443)
* Add: Dark color scheme * Fix: Remove !important statements preventing forms to implement dark mode * Fix: Final color values * Add: Changelog entry Fix: Announce dark mode to the browser for scrollbar coloring
1 parent 7955ba1 commit f026ee5

File tree

12 files changed

+84
-38
lines changed

12 files changed

+84
-38
lines changed

‎CHANGELOG.rst‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ Changelog
55
unreleased
66
==========
77

8+
* Add dark mode depending on system settings
9+
810
3.0.0 2022-01-22
911
================
1012

‎djangocms_admin_style/sass/components/_cmsplaceholders.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
ul.plugin-list li.active {
1515
background: url("../img/bg-pattern-light.jpg") $gray-lighter repeat;
1616
&:hover {
17-
background: white url("../../cms/images/sitemap-li-bg.jpg") repeat-x 0 -100px;
17+
background: $white url("../../cms/images/sitemap-li-bg.jpg") repeat-x 0 -100px;
1818
}
1919
}
2020
}

‎djangocms_admin_style/sass/components/_content.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -702,7 +702,7 @@ a.addlink {
702702
a:hover,
703703
&:focus,
704704
a:focus {
705-
color: black !important;
705+
color: $black !important;
706706
background-color: transparent !important;
707707
}
708708
&.selected,
@@ -716,7 +716,7 @@ a.addlink {
716716
background: transparent !important;
717717
&:hover,
718718
&:focus {
719-
color: black !important;
719+
color: $black !important;
720720
border-bottom: solid 3px $white !important;
721721
background-color: $white !important;
722722
}
@@ -755,15 +755,15 @@ a.addlink {
755755
margin: 0 !important;
756756
padding: 8px 10px !important;
757757
border: none !important;
758-
background: white;
758+
background: $white;
759759

760760
border-top-radius: $border-radius-base;
761761
a {
762762
color: $gray-darkest !important;
763763
padding: 5px 10px;
764764
&:hover,
765765
&:focus {
766-
color: black !important;
766+
color: $black !important;
767767
text-decoration: none;
768768
}
769769
}
@@ -783,7 +783,7 @@ a.addlink {
783783
background: $gray-lighter;
784784
}
785785
> .current {
786-
color: white !important;
786+
color: $white !important;
787787
text-shadow: 0 1px 1px rgba($black, 0.2);
788788
padding-right: 20px !important;
789789
padding-left: 20px !important;

‎djangocms_admin_style/sass/components/_forms.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,8 @@ form {
279279
label.aligned {
280280
display: block;
281281
float: none !important;
282-
color: $gray !important;
282+
// FABR: !important not necessary
283+
color: $gray; // !important;
283284
font-size: $font-size-normal;
284285
font-weight: normal !important;
285286
line-height: $line-height-normal;
@@ -294,12 +295,13 @@ form {
294295
}
295296
&.btn {
296297
float: left !important;
297-
color: $white !important;
298+
// FABR: ! Important conflicts with unfilled buttons
299+
color: $white; // !important;
298300
padding: 6px 12px !important;
299301
}
300302
&.btn-default,
301303
&.btn-link {
302-
color: $gray-darker !important;
304+
color: $gray-darker; // !important; // dito
303305
}
304306
&:after {
305307
height: 20px !important;

‎djangocms_admin_style/sass/components/_header.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,14 +153,16 @@
153153
background-size: 20px !important;
154154
&:focus {
155155
color: $btn-default-color !important;
156-
background-color: darken($btn-default-bgcolor, 10%) !important;
157-
border-color: darken($btn-default-border, 25%) !important;
156+
background-color: $btn-default-color !important;
157+
border-color: $btn-default-color !important;
158+
filter: brightness(calc(var(--focus-brightness) * var(--active-brightness))) !important;
158159
text-decoration: none !important;
159160
}
160161
&:hover {
161162
color: $btn-default-color !important;
162-
background-color: darken($btn-default-bgcolor, 10%) !important;
163-
border-color: darken($btn-default-border, 12%) !important;
163+
background-color: $btn-default-color !important;
164+
border-color: $btn-default-color !important;
165+
filter: brightness(calc(var(--focus-brightness) * var(--active-brightness))) !important;
164166
text-decoration: none !important;
165167
}
166168
}

‎djangocms_admin_style/sass/components/_mobile.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,7 @@ body.login {
242242
display: none !important;
243243
}
244244
.tree {
245-
background: white;
245+
background: $white;
246246
}
247247

248248
// chageform

‎djangocms_admin_style/sass/components/_sideframe.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// SIDEFRAME
33

44
.cms-admin-sideframe {
5+
color-scheme: light dark;
56
#header {
67
// because there is already toolbar visible, header in side frame has to be hidden to not be visible when scrolling on tablet #245
78
display: none;

‎djangocms_admin_style/sass/components/_tables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@
130130
}
131131
.sortpriority {
132132
vertical-align: middle;
133-
color: white !important;
133+
color: $white !important;
134134
padding: 2px 6px !important;
135135
background-color: $color-primary;
136136
border-radius: 10px;

‎djangocms_admin_style/sass/mixins/_custom.scss‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,27 +44,31 @@
4444
appearance: none;
4545
&:focus {
4646
color: $color important($important);
47-
background-color: darken($background, 5%) important($important);
48-
border-color: darken($border, 5%) important($important);
47+
background-color: $background important($important);
48+
border-color: $border important($important);
49+
filter: brightness(var(--focus-brightness)) important($important);
4950
text-decoration: none important($important);
5051
}
5152
&:hover {
5253
color: $color important($important);
53-
background-color: darken($background, 5%) important($important);
54-
border-color: darken($border, 5%) important($important);
54+
background-color: $background important($important);
55+
border-color: $border important($important);
56+
filter: brightness(var(--focus-brightness)) important($important);
5557
text-decoration: none important($important);
5658
}
5759
&:active {
5860
color: $color important($important);
59-
background-color: darken($background, 10%) important($important);
60-
border-color: darken($border, 10%) important($important);
61+
background-color: $background important($important);
62+
border-color: $border important($important);
63+
filter: brightness(var(--active-brightness)) important($important);
6164
box-shadow: $btn-active-shadow important($important);
6265

6366
&:hover,
6467
&:focus {
6568
color: $color important($important);
66-
background-color: darken($background, 17%) important($important);
67-
border-color: darken($border, 25%) important($important);
69+
background-color: $background important($important);
70+
border-color: $border important($important);
71+
filter: brightness(calc(var(--focus-brightness) * var(--active-brightness))) important($important);
6872
}
6973
}
7074
&:active {

‎djangocms_admin_style/sass/settings/_cms.scss‎

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,61 @@
44
$speed-base: 200ms;
55

66
// #COLORS#
7-
$white: #fff;
8-
$black: #000;
7+
$white: var(--dca-white);
8+
$black: var(--dca-black);
9+
:root {
10+
--active-brightness: 0.9;
11+
--focus-brightness: 0.95;
12+
}
13+
914

10-
$color-primary: #00bbff;
15+
$color-primary: var(--dca-primary);
1116
$color-success: #693;
1217
$color-danger: #f00;
1318
$color-warning: #c93;
1419
$color-window: #fcfcfc;
1520

1621
// #COLORS gray
17-
$gray: lighten($black, 40%); // #666;
18-
$gray-lightest: lighten($gray, 55%); // #f2f2f2
19-
$gray-lighter: lighten($gray, 46.5%); // #ddd
20-
$gray-light: lighten($gray, 20%); // #999
21-
$gray-darker: darken($gray, 13%); // #454545
22-
$gray-darkest: darken($gray, 20%); // #333
22+
$gray: var(--dca-gray); // lighten(#000, 40%); // #666;
23+
$gray-lightest: var(--dca-gray-lightest); //lighten($gray, 55%); // #f2f2f2
24+
$gray-lighter: var(--dca-gray-lighter); //lighten($gray, 46.5%); // #ddd
25+
$gray-light: var(--dca-gray-light); // // #999
26+
$gray-darker: var(--dca-gray-darker); // // #454545
27+
$gray-darkest: var(--dca-gray-darkest); // // #333
28+
29+
// used in pagetree / filer headers
30+
$gray-super-lightest: var(--dca-gray-super-lightest); //;
31+
32+
:root {
33+
color-scheme: dark light;
34+
--dca-white: #FFFFFF;
35+
--dca-black: #000000;
36+
--dca-primary: #00bbff;
37+
--dca-gray: #666;
38+
--dca-gray-lightest: #f2f2f2;
39+
--dca-gray-lighter: #ddd;
40+
--dca-gray-light: #999;
41+
--dca-gray-darker: #454545;
42+
--dca-gray-darkest: #333;
43+
--dca-gray-super-lightest: #f7f7f7;
44+
}
2345

24-
$gray-super-light: #f7f7f7;
46+
@media (prefers-color-scheme: dark) {
47+
:root {
48+
--dca-white: #2A2C2E;
49+
--dca-black: #FFF;
50+
--dca-primary: #58D1FC;
51+
--dca-gray: #999; //$gray-light;
52+
--dca-gray-lightest: #444; //$gray-darkest;
53+
--dca-gray-lighter: #666; //$gray-darker;
54+
--dca-gray-light: #888; // $gray-light;
55+
--dca-gray-darker: #aaa; //$gray;
56+
--dca-gray-darkest: #eee; // $gray-lighter;
57+
--dca-gray-super-lightest: #333;
58+
}
59+
}
2560

26-
$gradient-toolbar: to bottom, rgba($gray-lightest, 0.97) 0%, rgba(lighten($gray-lightest, 1%), 0.97) 50%, rgba($gray-lightest, 0.95) 100%;
61+
$gradient-toolbar: to bottom, rgba($gray-lightest, 0.97) 0%, rgba($gray-lightest, 0.97) 50%, rgba($gray-lightest, 0.95) 100%;
2762
$gradient-striped-light: 135deg, rgba($white, .1) 25%, transparent 25%, transparent 50%, rgba($white, .1) 50%, rgba($white, .1) 75%, transparent 75%, transparent;
2863
$gradient-striped-dark: 135deg, rgba($white, .8) 25%, transparent 25%, transparent 50%, rgba($white, .8) 50%, rgba($white, .8) 75%, transparent 75%, transparent;
2964

@@ -286,7 +321,7 @@ $login-form-input-color: $gray;
286321
$login-form-input-width: 100px;
287322
$login-form-input-height: 28px;
288323
$login-form-input-padding-horizontal: 5px;
289-
$login-form-input-border: lighten($gray, 45%);
324+
$login-form-input-border: $gray-lighter;
290325
$login-form-input-border-radius: $border-radius-base;
291326

292327
$login-form-submit-color: $white;

0 commit comments

Comments
 (0)