Dark mode fix for placeholder text, switch button; Comment improvements
All checks were successful
continuous-integration/drone/pr Build is passing
All checks were successful
continuous-integration/drone/pr Build is passing
This commit is contained in:
parent
5e63085bed
commit
38ed29052e
|
@ -1,6 +1,7 @@
|
||||||
// Vikunja colors as CSS custom properties
|
// Vikunja colors as CSS custom properties
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
// Vikunja specific variables
|
||||||
--grey-50: hsl(210, 20%, 98%);
|
--grey-50: hsl(210, 20%, 98%);
|
||||||
--grey-100: hsl(220, 14.3%, 95.9%);
|
--grey-100: hsl(220, 14.3%, 95.9%);
|
||||||
--grey-200: hsl(220, 13%, 91%);
|
--grey-200: hsl(220, 13%, 91%);
|
||||||
|
@ -16,7 +17,7 @@
|
||||||
--site-background: var(--grey-100);
|
--site-background: var(--grey-100);
|
||||||
--scheme-main: var(--white);
|
--scheme-main: var(--white);
|
||||||
|
|
||||||
// Vikunja overrides of Bulma defaults
|
// Overrides of Bulma defaults
|
||||||
// --black-bis: #121212;
|
// --black-bis: #121212;
|
||||||
// --black-ter: #242424;
|
// --black-ter: #242424;
|
||||||
--grey-darker: var(--grey-700);
|
--grey-darker: var(--grey-700);
|
||||||
|
@ -66,17 +67,21 @@
|
||||||
--primary-h: 216.5deg;
|
--primary-h: 216.5deg;
|
||||||
--primary-s: 100%;
|
--primary-s: 100%;
|
||||||
--primary-l: 54.9%;
|
--primary-l: 54.9%;
|
||||||
|
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
|
||||||
--primary-light-l: 73%;
|
--primary-light-l: 73%;
|
||||||
--primary-a: 1;
|
--primary-a: 1;
|
||||||
--primary-hsl: 216.5deg, 100%, 54.9%;
|
--primary-hsl: 216.5deg, 100%, 54.9%;
|
||||||
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
||||||
|
|
||||||
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
|
|
||||||
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
|
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
|
||||||
|
|
||||||
|
// Define custom color to prevent change in dark mode
|
||||||
|
--switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
|
||||||
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
// Light mode colours reversed for dark mode
|
// Light mode colours reversed for dark mode
|
||||||
--grey-900: hsl(210, 20%, 98%);
|
--grey-900-hsl: 210, 20%, 98%;
|
||||||
|
--grey-900: hsl(var(--grey-900-hsl));
|
||||||
--grey-800: hsl(220, 14.3%, 95.9%);
|
--grey-800: hsl(220, 14.3%, 95.9%);
|
||||||
--grey-700: hsl(220, 13%, 91%);
|
--grey-700: hsl(220, 13%, 91%);
|
||||||
--grey-600: hsl(216, 12.2%, 83.9%);
|
--grey-600: hsl(216, 12.2%, 83.9%);
|
||||||
|
@ -89,12 +94,19 @@
|
||||||
--grey-100: hsl(var(--grey-100-hsl));
|
--grey-100: hsl(var(--grey-100-hsl));
|
||||||
--grey-50: hsl(220.9, 39.3%, 11%);
|
--grey-50: hsl(220.9, 39.3%, 11%);
|
||||||
|
|
||||||
|
// Dark grey looks better than black
|
||||||
--white: var(--grey-50);
|
--white: var(--grey-50);
|
||||||
--black-l: 100%;
|
--black-l: 100%;
|
||||||
|
|
||||||
|
// Text renders better in grey than black
|
||||||
--text: var(--grey-800);
|
--text: var(--grey-800);
|
||||||
--text-invert: #000;
|
--text-invert: #000;
|
||||||
--text-light: var(--grey-300);
|
--text-light: var(--grey-300);
|
||||||
--text-strong: var(--grey-900);
|
--text-strong: var(--grey-900);
|
||||||
|
|
||||||
|
// Elements that rely on Bulma defaults in light mode but
|
||||||
|
// need to be overriden in dark mode
|
||||||
|
--input-placeholder-color: hsla(var(--grey-900-hsl), 0.6) !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -179,8 +179,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-active,
|
&.is-active,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--white);
|
color: var(--switch-view-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-active {
|
&.is-active {
|
||||||
|
|
Reference in New Issue
Block a user