Invert black text to white for dark theme
MODIFY
resources/assets/sass/components/helpers.scss
resources/assets/sass/components/helpers.scss
}
// Colors
-.color {
- &-dark {
+.theme-light .color-dark {
color: #000;
}
+.theme-dark .color-dark {
+ color: #FFF;
+}
+
+.color {
&-blue {
color: $colors-blue;
}

MODIFY
resources/assets/sass/components/input.scss
resources/assets/sass/components/input.scss
.theme-dark {
input[type=text], input[type=email], input[type=password], select {
+ color: #FFF;
background: $colors-dark-body;
border: 1px solid $colors-dark-border;
}

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;
+
+ a {
+ &:hover, &.active {
+ color: #000;
+ }
+ }
}
.theme-dark .navigation {
background: $colors-dark-background;
border-bottom: 1px solid $colors-dark-border;
+
+ a {
+ &:hover, &.active {
+ color: #FFF;
+ }
+ }
}
.navigation {
display: flex;
align-items: center;
color: $colors-text;
-
- &:hover, &.active {
- color: #000;
- }
}
}
}

MODIFY
resources/assets/sass/components/typography.scss
resources/assets/sass/components/typography.scss
-webkit-font-smoothing: antialiased;
}
+body.theme-light {
+ color: $colors-text;
+
+ h1, h2 {
+ color: #000;
+ }
+}
+
+body.theme-dark {
+ color: $colors-text;
+
+ h1, h2 {
+ color: #FFF;
+ }
+}
+
body {
font-family: Muli;
font-weight: 400;
- color: $colors-text;
}
h1, h2 {
font-weight: 600;
- color: #000;
}
h1 {

Invert black text to white for dark theme