8000 feat: Configurable dark mode by fsbraun · Pull Request #7329 · django-cms/django-cms · GitHub
[go: up one dir, main page]
Skip to content

feat: Configurable dark mode #7329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 30 commits into from
Jun 6, 2022
Merged

feat: Configurable dark mode #7329

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
592a2b6
Fix: toolbar bug 3.10.rc1
fsbraun Feb 9, 2022
7778c29
Merge branch 'django-cms:develop' into develop
fsbraun Feb 11, 2022
96f89cd
Feat: Dark mode support, including input from @marksweb, bugfix for t…
fsbraun Feb 18, 2022
f92fe75
Upstream change to be able to merge
fsbraun Feb 18, 2022
ffee65a
Merge branch 'develop' of github.com:fsbraun/django-cms into develop
fsbraun Feb 18, 2022
ecb9fab
Feat: Dark mode support, including input from @marksweb, bugfix for t…
fsbraun Feb 18, 2022
76876a0
Merge branch 'develop' of github.com:fsbraun/django-cms into develop
fsbraun Feb 18, 2022
a0995e3
Rev 8000 ert "Fix: toolbar bug 3.10.rc1"
fsbraun Feb 18, 2022
4ec8a5b
Fix: Recommit toolbar fix (??)
fsbraun Feb 18, 2022
e1158f8
Fix: After lint failure: Remove spaces added by PyCharm
fsbraun Feb 18, 2022
1e725f8
Merge branch 'develop' into develop
vinitkumar Mar 5, 2022
4d95141
Fix: Wizzard button color
fsbraun Mar 5, 2022
1fdf757
Merge branch 'develop' of github.com:fsbraun/django-cms into develop
fsbraun Mar 5, 2022
4b0c0be
Merge branch 'develop' into develop
fsbraun Mar 12, 2022
872699a
Merge branch 'django-cms:develop' into develop
fsbraun Mar 22, 2022
281c355
Fix: Correct toolbar according to cms_path
fsbraun Mar 23, 2022
587cdb0
Merge branch 'django-cms:develop' into develop
fsbraun Mar 28, 2022
b67b53e
TASK: use isort to sort imports
crydotsnake Mar 29, 2022
9b8e9cb
Add: Color scheme configurable
fsbraun May 28, 2022
3c124c6
Add: Toolbar toggle (always on)
fsbraun May 28, 2022
656e0c6
Add: CMS_COLOR_SCHEME_TOGGLE setting
fsbraun May 29, 2022
092d6fd
Try fixing test
fsbraun May 29, 2022
f7c4d8f
Add: Basic documentation of new settings
fsbraun May 29, 2022
fb822a3
Merge branch 'develop' into featuire/dark-mode
May 30, 2022
2489871
Fix: unused imports, isort issue
fsbraun May 30, 2022
1857a63
Update CHANGELOG.rst
fsbraun May 30, 2022
b79c569
Fix: color scheme switch as css variables
fsbraun May 30, 2022
5952d77
Fix: Cascade settings into iframes of iframes (e.g., cms plugins ins…
fsbraun May 31, 2022
9093afb
Fix: no toggle in collapsed toolbar
fsbraun May 31, 2022
a2ff041
Merge branch 'develop' into featuire/dark-mode
Jun 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Feat: Dark mode support, including input from @marksweb, bugfix for t… 
…ooltips
  • Loading branch information
@fsbraun
fsbraun committed Feb 18, 2022
commit 96f89cdaa0d5ff9d9a6c59a7abdebbb46db4251a
2 changes: 2 additions & 0 deletions CHANGELOG.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ Changelog
unreleased
==========

* Added dark mode support to css

3.9.0 (2021-06-30)
==================

Expand Down
2 changes: 2 additions & 0 deletions cms/static/cms/sass/cms.base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions cms/static/cms/sass/components/_clipboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 3 additions & 4 deletions cms/static/cms/sass/components/_dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down Expand Up @@ -197,7 +197,7 @@
text-align: left !important;
&.cms-btn-action,
&.cms-btn-caution {
color: white;
color: $white;
}
&:first-child {
border-right: none !important;
Expand All @@ -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%);
Expand Down
2 changes: 1 addition & 1 deletion cms/static/cms/sass/components/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@
a {
color: $color-primary;
&:hover {
color: darken($color-primary, 20%);
filter: brightness(0.8);
}
&:after {
content: "/";
Expand Down
2 changes: 1 addition & 1 deletion cms/static/cms/sass/components/_pluginpicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}
2 changes: 1 addition & 1 deletion cms/static/cms/sass/components/_reset.scss
8000
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
15 changes: 8 additions & 7 deletions cms/static/cms/sass/components/_structureboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,8 @@
color: $btn-default-color !important;
font-size: $font-size-small !important;
&:hover {
color: darken($btn-default-color, 10%) !important;
8000 color: $btn-default-color !important;
filter: brightness(0.9);
}
}
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -315,7 +316,7 @@
background-image: none !important;
&:before {
display: none;
color: white;
color: $white;
}
.cms-draggables {
display: none;
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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;

Expand Down
5 changes: 3 additions & 2 deletions cms/static/cms/sass/components/_subnav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -202,7 +203,7 @@

.cms-dropdown-inner {
z-index: 1;
background-color: white;
background-color: $white;
border-radius: $border-radius-normal;
}

Expand Down
4 changes: 3 additions & 1 deletion cms/static/cms/sass/components/_toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
15 changes: 8 additions & 7 deletions cms/static/cms/sass/components/pagetree/_tree.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -1000,11 +1000,12 @@
}

.cms-page-tree-cell-shared--false {
background-color: whi 10000 te;
background-color: $white;

&.jstree-hovered,
&.jstree-clicked {
background-color: lighten($gray-lightest, 3%) !important;
background-color: $gray-lightest !important;
filter: brightness(1.1);
}
}

Expand Down
51 changes: 33 additions & 18 deletions cms/static/cms/sass/mixins/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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
< 69F4 span class='blob-code-inner blob-code-marker ' data-code-marker="+"> }
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
}
}
}
}
Expand Down
Loading
0