Apply styles for dark mode to navigation, box and card elements
MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
body {
&.theme-light {
- background: $colors-light-background;
+ background: $colors-light-body;
}
&.theme-dark {
- background: $colors-dark-background;
+ background: $colors-dark-body;
}
}

MODIFY
resources/assets/sass/components/box.scss
resources/assets/sass/components/box.scss
+.theme-light .box {
+ background: $colors-light-background;
+ border: 1px solid $colors-light-border;
+
+ .box__section {
+ border-bottom: 1px solid $colors-light-border;
+ }
+}
+
+.theme-dark .box {
+ background: $colors-dark-background;
+ border: 1px solid $colors-dark-border;
+
+ .box__section {
+ border-bottom: 1px solid $colors-dark-border;
+ }
+}
+
.box {
- background: #FFF;
- border: 1px solid $colors-border;
border-radius: $dimensions-box-border-radius;
.box__section {
padding: $dimensions-box-padding;
- border-bottom: 1px solid $colors-border;
&:first-child {
border-top-left-radius: 5px;

MODIFY
resources/assets/sass/components/card.scss
resources/assets/sass/components/card.scss
+.theme-light .card {
+ background: $colors-light-background;
+ border: 1px solid $colors-light-border;
+}
+
+.theme-dark .card {
+ background: $colors-dark-background;
+ border: 1px solid $colors-dark-border;
+}
+
.card {
padding: 20px;
- background: #FFF;
- border: 1px solid $colors-border;
border-radius: 5px;
&.card--blue {

MODIFY
resources/assets/sass/components/navigation.scss
resources/assets/sass/components/navigation.scss
+.theme-light .navigation {
+ background: $colors-light-background;
+ border-bottom: 1px solid $colors-light-border;
+}
+
+.theme-dark .navigation {
+ background: $colors-dark-background;
+ border-bottom: 1px solid $colors-dark-border;
+}
+
.navigation {
display: flex;
align-items: center;
height: $dimensions-navigation-height;
- background: #FFF;
- border-bottom: 1px solid $colors-border;
.wrapper {
display: flex;

MODIFY
resources/assets/sass/variables/colors.scss
resources/assets/sass/variables/colors.scss
-$colors-light-background: #F8F9FB;
-$colors-dark-background: #202225;
+$colors-light-body: #F8F9FB;
+$colors-light-border: #E4E8EB;
+$colors-light-background: #FFF;
+$colors-dark-body: #202225;
+$colors-dark-border: #36393F;
+$colors-dark-background: #2F3136;
+
+// Deprecated
$colors-border: #E4E8EB;
+
$colors-text: #758193;
$colors-blue: #179BD1;

Apply styles for dark mode to navigation, box and card elements