mirror of
https://github.com/YunoHost/yunohost-admin.git
synced 2024-09-03 20:06:15 +02:00
Merge pull request #463 from YunoHost/dark-mode
[WIP] Add dark theme setting
This commit is contained in:
Alexandre Aubin
GitHub
commit
a5d69d9ea4
14 changed files with 455 additions and 31 deletions
|
|
@ -7,7 +7,12 @@
|
|||
:to="{ name: 'home' }" :disabled="waiting"
|
||||
exact exact-active-class="active"
|
||||
>
|
||||
<img alt="Yunohost logo" src="./assets/logo.png">
|
||||
<span v-if="theme">
|
||||
<img alt="Yunohost logo" src="./assets/logo_light.png" width="40">
|
||||
</span>
|
||||
<span v-else>
|
||||
<img alt="Yunohost logo" src="./assets/logo_dark.png" width="40">
|
||||
</span>
|
||||
</b-navbar-brand>
|
||||
|
||||
<b-navbar-nav class="ml-auto">
|
||||
|
|
@ -93,7 +98,8 @@ export default {
|
|||
'routerKey',
|
||||
'transitions',
|
||||
'transitionName',
|
||||
'waiting'
|
||||
'waiting',
|
||||
'theme'
|
||||
])
|
||||
},
|
||||
|
||||
|
|
@ -153,6 +159,8 @@ export default {
|
|||
if (today.getDate() === 31 && today.getMonth() + 1 === 10) {
|
||||
this.$store.commit('SET_SPINNER', 'spookycat')
|
||||
}
|
||||
|
||||
document.documentElement.setAttribute('dark-theme', localStorage.getItem('theme')) // updates the data-theme attribute
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.3 KiB |
BIN
app/src/assets/logo_light.png
Normal file
BIN
app/src/assets/logo_light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -37,7 +37,7 @@ export default {
|
|||
@include media-breakpoint-up(md) {
|
||||
margin: .25rem 0;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-color: rgba($black, 0.05);
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,13 +39,9 @@ export default {
|
|||
@each $color, $value in $theme-colors {
|
||||
&.#{$color} {
|
||||
background-color: $value;
|
||||
color: $white;
|
||||
color: color-yiq($value);
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
@remove="onRemoveTag({ option: tag, removeTag })"
|
||||
:title="tag"
|
||||
:disabled="disabled || disabledItems.includes(tag)"
|
||||
variant="light"
|
||||
class="border border-dark mb-2"
|
||||
>
|
||||
<icon v-if="tagIcon" :iname="tagIcon" /> {{ tag }}
|
||||
|
|
@ -151,7 +150,7 @@ export default {
|
|||
padding-top: .5rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: white;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -525,7 +525,8 @@
|
|||
"cache_description": "Consider disabling the cache if you plan on working with the CLI while also navigating in this web-admin.",
|
||||
"experimental": "Experimental mode",
|
||||
"experimental_description": "Gives you access to experimental features. These are considered unstable and may break your system.<br> Enable this only if you know what you are doing.",
|
||||
"transitions": "Page transition animations"
|
||||
"transitions": "Page transition animations",
|
||||
"theme": "Toggle dark mode"
|
||||
},
|
||||
"tools_yunohost_settings": "YunoHost settings",
|
||||
"tools_webadmin_settings": "Web-admin settings",
|
||||
|
|
|
|||
245
app/src/scss/_functions-override.scss
Normal file
245
app/src/scss/_functions-override.scss
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a
|
||||
// Those functions overrides built-in bootstrap's computation color functions (that
|
||||
// generate flat variants and its darken/lighten alterations) to allow `var(--color)` CSS
|
||||
// variables to be used as primary colors and be instead computed on the fly with `calc()`s
|
||||
|
||||
@function is-color($color) {
|
||||
@if (type-of($color) == color) {
|
||||
@return true;
|
||||
}
|
||||
@return false;
|
||||
}
|
||||
|
||||
@function count-occurrences($string, $search) {
|
||||
$searchIndex: str-index($string, $search);
|
||||
$searchCount: 0;
|
||||
@while $searchIndex {
|
||||
$searchCount: $searchCount + 1;
|
||||
$string: str-slice($string, $searchIndex + 1);
|
||||
$searchIndex: str-index($string, $search);
|
||||
}
|
||||
@return $searchCount;
|
||||
}
|
||||
|
||||
@function str-is-between($string, $first, $last) {
|
||||
$firstCount: count-occurrences($string, $first);
|
||||
$lastCount: count-occurrences($string, $last);
|
||||
@return $firstCount == $lastCount;
|
||||
}
|
||||
|
||||
@function recursive-color($color, $index: 0) {
|
||||
$indices: (
|
||||
0: h,
|
||||
1: s,
|
||||
2: l,
|
||||
3: a
|
||||
);
|
||||
// find end of part
|
||||
$end: str-index($color, ',');
|
||||
@while ($end and not str-is-between(str-slice($color, 0, $end - 1), '(', ')')) {
|
||||
$newEnd: str-index(str-slice($color, $end + 1), ',');
|
||||
@if (not $newEnd) {
|
||||
$newEnd: 0;
|
||||
}
|
||||
$end: 2 + $end + $newEnd;
|
||||
}
|
||||
@if ($end) {
|
||||
$part: str-slice($color, 0, $end - 1);
|
||||
$value: map-merge(
|
||||
(
|
||||
map-get($indices, $index): $part
|
||||
),
|
||||
recursive-color(str-slice($color, $end + 1), $index + 1)
|
||||
);
|
||||
@return $value;
|
||||
}
|
||||
@return ();
|
||||
}
|
||||
|
||||
@function to-hsl($color) {
|
||||
$c: inspect($color);
|
||||
|
||||
$h: 0;
|
||||
$s: 0;
|
||||
$l: 0;
|
||||
$a: 1;
|
||||
|
||||
@if (is-color($color)) {
|
||||
// std color
|
||||
$h: hue($color);
|
||||
$s: saturation($color);
|
||||
$l: lightness($color);
|
||||
$a: alpha($color);
|
||||
|
||||
@return (h: $h, s: $s, l: $l, a: $a);
|
||||
}
|
||||
|
||||
@if (str-slice($c, 0, 3) == 'var') {
|
||||
// var(--color)
|
||||
$commaPos: str-index($c, ',');
|
||||
$end: -2;
|
||||
@if ($commaPos) {
|
||||
$end: $commaPos - 1;
|
||||
}
|
||||
$var: str-slice($c, 7, $end);
|
||||
|
||||
$h: var(--#{$var}-h);
|
||||
$s: var(--#{$var}-s);
|
||||
$l: var(--#{$var}-l);
|
||||
$a: var(--#{$var}-a, 1);
|
||||
|
||||
@return (h: $h, s: $s, l: $l, a: $a);
|
||||
}
|
||||
|
||||
@if ($c == '0') {
|
||||
@return (h: $h, s: $s, l: $l, a: $a);
|
||||
}
|
||||
|
||||
// color is (maybe complex) calculated color
|
||||
// e.g.: hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2)), hsla(calc((var(--white-h) + var(--primary-h)) / 2), calc((var(--white-s) + var(--primary-s)) / 2), calc((var(--white-l) + var(--primary-l)) / 2), calc((var(--white-a, 1) + var(--primary-a, 1)) / 2))
|
||||
$startPos: str-index($c, '(');
|
||||
$c: str-slice($c, $startPos + 1, -2); // 3 or 4 comma-separated vomplex values
|
||||
@return recursive-color($c);
|
||||
// $hEnd: str-index($c, ',');
|
||||
// @if ($hEnd) {
|
||||
// $h: str-slice($c, 0, $hEnd - 1);
|
||||
// $c: str-slice($c, $hEnd + 1);
|
||||
// $sEnd: str-index($c, ',');
|
||||
// @if ($hEnd) {
|
||||
// $h: str-slice($c, 0, $hEnd - 1);
|
||||
// $c: str-slice($c, $hEnd + 1);
|
||||
// $sEnd: str-index($c, ',');
|
||||
// }
|
||||
// }
|
||||
|
||||
// @return (h: $h, s: $s, l: $l, a: $a);
|
||||
}
|
||||
|
||||
@function render-hsla($h, $s, $l, $a: 1) {
|
||||
@return hsla($h, $s, $l, $a);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@if (is-color($color)) {
|
||||
@return scale-color($color: $color, $lightness: $amount);
|
||||
}
|
||||
|
||||
$c: to-hsl($color);
|
||||
$h: map-get($c, h);
|
||||
$s: map-get($c, s);
|
||||
$l: map-get($c, l);
|
||||
$a: map-get($c, a);
|
||||
@return render-hsla($h, $s, calc(#{$l} + #{$amount}), $a);
|
||||
}
|
||||
|
||||
@function darken($color, $amount) {
|
||||
@return lighten($color, $amount * -1);
|
||||
}
|
||||
|
||||
@function rgba($red, $green, $blue: false, $alpha: false) {
|
||||
$color: $red;
|
||||
|
||||
@if (not $blue and not $alpha) {
|
||||
$alpha: $green;
|
||||
$color: $red;
|
||||
}
|
||||
|
||||
$c: to-hsl($color);
|
||||
$h: map-get($c, h);
|
||||
$s: map-get($c, s);
|
||||
$l: map-get($c, l);
|
||||
@return render-hsla($h, $s, $l, $alpha);
|
||||
}
|
||||
|
||||
@function rgb($red, $green, $blue) {
|
||||
@return rgba($red, $green, $blue, 1);
|
||||
}
|
||||
|
||||
@function mix($color-1, $color-2, $weight: 50%) {
|
||||
$c1: to-hsl($color-1);
|
||||
$c2: to-hsl($color-2);
|
||||
|
||||
$h1: map-get($c1, h);
|
||||
$s1: map-get($c1, s);
|
||||
$l1: map-get($c1, l);
|
||||
$a1: map-get($c1, a);
|
||||
|
||||
$h2: map-get($c2, h);
|
||||
$s2: map-get($c2, s);
|
||||
$l2: map-get($c2, l);
|
||||
$a2: map-get($c2, a);
|
||||
|
||||
$h: calc((#{$h1} + #{$h2}) / 2);
|
||||
$s: calc((#{$s1} + #{$s2}) / 2);
|
||||
$l: calc((#{$l1} + #{$l2}) / 2);
|
||||
$a: calc((#{$a1} + #{$a2}) / 2);
|
||||
|
||||
@return render-hsla($h, $s, $l, $a);
|
||||
}
|
||||
|
||||
@function fade-in($color, $amount) {
|
||||
$c: to-hsl($color);
|
||||
|
||||
$h: map-get($c, h);
|
||||
$s: map-get($c, s);
|
||||
$l: map-get($c, l);
|
||||
$a: map-get($c, a);
|
||||
@if (not $a) {
|
||||
$a: 1;
|
||||
}
|
||||
|
||||
@return render-hsla($h, $s, $l, $a + $amount);
|
||||
}
|
||||
|
||||
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
|
||||
@if (is-color($color)) {
|
||||
$r: red($color);
|
||||
$g: green($color);
|
||||
$b: blue($color);
|
||||
|
||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@if ($yiq >= $yiq-contrasted-threshold) {
|
||||
@return $dark;
|
||||
} @else {
|
||||
@return $light;
|
||||
}
|
||||
} @else {
|
||||
$c: to-hsl($color);
|
||||
$l: map-get($c, l);
|
||||
|
||||
$th: $yiq-contrasted-threshold / 2.56; // convert hex to dec
|
||||
$lightness: calc(-100 * calc(#{$l} - calc(#{$th} * 1%)));
|
||||
|
||||
// ignoring hue and saturation, just a light or dark gray
|
||||
@return render-hsla(0, 0%, $lightness, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Taken from https://gist.github.com/johanlef/518a511b2b2f6b96c4f429b3af2f169a?permalink_comment_id=4053335#gistcomment-4053335
|
||||
@function theme-color-level($color-name: "primary", $level: 0) {
|
||||
$color: theme-color($color-name);
|
||||
@if ($level == 0) {
|
||||
@return $color;
|
||||
}
|
||||
|
||||
$amount: $theme-color-interval * abs($level) / 100%;
|
||||
$c: to-hsl($color);
|
||||
$h: map-get($c, h);
|
||||
$s: map-get($c, s);
|
||||
$l: map-get($c, l);
|
||||
$a: map-get($c, a);
|
||||
|
||||
@if ($level > 0) {
|
||||
// Darken -X%: L = L * (1 - X)
|
||||
// $rl: calc((#{$l} * #{1 - $amount}));
|
||||
$rl: calc((#{$l} * #{$amount}));
|
||||
@return render-hsla($h, $s, $rl, $a);
|
||||
}
|
||||
@if ($level < 0) {
|
||||
// Ligthen +X%: L = L + X * (100 - L)
|
||||
$rl: calc(#{$l} + #{$amount} * (100% - #{$l}));
|
||||
@return render-hsla($h, $s, $rl, $a);
|
||||
}
|
||||
}
|
||||
|
|
@ -30,14 +30,44 @@
|
|||
$font-size-base: .9rem;
|
||||
$font-weight-bold: 500;
|
||||
|
||||
$blue: #2f7ed2;
|
||||
$purple: #9932cc;
|
||||
$yellow: #ffd452;
|
||||
$white: var(--white);
|
||||
$gray-100: var(--gray-100);
|
||||
$gray-200: var(--gray-200);
|
||||
$gray-300: var(--gray-300);
|
||||
$gray-400: var(--gray-400);
|
||||
$gray-500: var(--gray-500);
|
||||
$gray-600: var(--gray-600);
|
||||
$gray-700: var(--gray-700);
|
||||
$gray-800: var(--gray-800);
|
||||
$gray-900: var(--gray-900);
|
||||
$black: var(--black);
|
||||
|
||||
$blue: var(--blue);
|
||||
$indigo: var(--indigo);
|
||||
$purple: var(--purple);
|
||||
$pink: var(--pink);
|
||||
$red: var(--red);
|
||||
$orange: var(--orange);
|
||||
$yellow: var(--yellow);
|
||||
$green: var(--green);
|
||||
$teal: var(--teal);
|
||||
$cyan: var(--cyan);
|
||||
|
||||
$theme-colors: (
|
||||
'best': $purple
|
||||
'best': $purple,
|
||||
);
|
||||
|
||||
$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);
|
||||
|
||||
$alert-bg-level: -10;
|
||||
$alert-border-level: -9;
|
||||
$alert-color-level: 5;
|
||||
|
||||
$list-group-item-bg-level: -11;
|
||||
$list-group-item-color-level: 6;
|
||||
|
||||
$code-color: var(--code-color);
|
||||
|
||||
// Replace font-weight 300 with 200
|
||||
$font-weight-light: 200;
|
||||
$display1-weight: 200;
|
||||
|
|
@ -62,15 +92,17 @@ $card-spacer-x: 1rem;
|
|||
|
||||
$list-group-item-padding-x: 1rem;
|
||||
|
||||
// Hard coded for scss compilation to pass
|
||||
$b-toast-background-opacity: 100%;
|
||||
|
||||
// Import default variables after the above setup to compute all other variables.
|
||||
@import '~bootstrap/scss/functions.scss';
|
||||
@import '_functions-override.scss';
|
||||
@import '~bootstrap/scss/variables';
|
||||
@import '~bootstrap/scss/mixins.scss';
|
||||
@import '~bootstrap-vue/src/variables';
|
||||
|
||||
|
||||
$body-color: $gray-800;
|
||||
|
||||
$hr-border-color: $gray-200;
|
||||
|
||||
$list-group-action-color: $gray-800;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,131 @@
|
|||
|
||||
// Dependencies SCSS imports
|
||||
// `~` allow to import a node_modules folder (resolved by Webpack)
|
||||
@import '~bootstrap/scss/bootstrap.scss';
|
||||
// @import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/code";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/input-group";
|
||||
@import "~bootstrap/scss/custom-forms";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
// @import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
// @import "~bootstrap/scss/jumbotron";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
// @import "~bootstrap/scss/media";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
// @import "~bootstrap/scss/toasts";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
// @import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/spinners";
|
||||
@import "~bootstrap/scss/utilities";
|
||||
// @import "~bootstrap/scss/print";
|
||||
|
||||
@import '~bootstrap-vue/src/index.scss';
|
||||
|
||||
// Import fonts
|
||||
@import 'font';
|
||||
@import '~fork-awesome/scss/fork-awesome.scss';
|
||||
|
||||
// helper to set the required 4 CSS variables per color to allow `calc` computation of variants and states
|
||||
@mixin hsl-color($name, $h, $s, $l) {
|
||||
--#{$name}: hsl(#{$h}, #{$s}, #{$l});
|
||||
--#{$name}-h: #{$h};
|
||||
--#{$name}-s: #{$s};
|
||||
--#{$name}-l: #{$l};
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
--yiq-contrasted-threshold: 150;
|
||||
|
||||
@include hsl-color('white', 0, 0%, 100%);
|
||||
@include hsl-color('black', 0, 0%, 0%);
|
||||
@include hsl-color('blue', 211, 64%, 50%);
|
||||
@include hsl-color('indigo', 263, 90%, 51%);
|
||||
@include hsl-color('purple', 280, 61%, 50%);
|
||||
@include hsl-color('pink', 332, 79%, 58%);
|
||||
@include hsl-color('red', 354, 70%, 54%);
|
||||
@include hsl-color('orange', 27, 98%, 54%);
|
||||
@include hsl-color('yellow', 45, 100%, 66%);
|
||||
@include hsl-color('green', 134, 61%, 41%);
|
||||
@include hsl-color('teal', 162, 73%, 46%);
|
||||
@include hsl-color('cyan', 188, 78%, 41%);
|
||||
|
||||
@include hsl-color('gray-100', 210, 17%, 98%);
|
||||
@include hsl-color('gray-200', 210, 16%, 93%);
|
||||
@include hsl-color('gray-300', 210, 14%, 89%);
|
||||
@include hsl-color('gray-400', 210, 14%, 83%);
|
||||
@include hsl-color('gray-500', 210, 11%, 71%);
|
||||
@include hsl-color('gray-600', 208, 7%, 46%);
|
||||
@include hsl-color('gray-700', 210, 9%, 31%);
|
||||
@include hsl-color('gray-800', 210, 10%, 23%);
|
||||
@include hsl-color('gray-900', 210, 11%, 15%);
|
||||
|
||||
--code-color: var(--pink);
|
||||
|
||||
// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, theme-color-level($color, $list-group-item-bg-level), theme-color-level($color, $list-group-item-color-level));
|
||||
|
||||
.btn-#{$color} {
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($value, .3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dark-theme="true"] {
|
||||
color-scheme: dark; // Ask browser to use dark mode native styling
|
||||
|
||||
--yiq-contrasted-threshold: 120;
|
||||
|
||||
@include hsl-color('white', 256, 0%, 12.5%);
|
||||
@include hsl-color('black', 256, 0%, 100%);
|
||||
@include hsl-color('blue', 210.7, 95.5%, 65.5%);
|
||||
@include hsl-color('purple', 280, 77.8%, 62.9%);
|
||||
@include hsl-color('red', 0, 100%, 67.6%);
|
||||
@include hsl-color('green', 134.3, 74.4%, 67.8%);
|
||||
@include hsl-color('cyan', 188.4, 91.4%, 72.5%);
|
||||
|
||||
@include hsl-color('gray-900', 256, 0%, 98%);
|
||||
@include hsl-color('gray-800', 256, 0%, 93%);
|
||||
@include hsl-color('gray-700', 256, 0%, 89%);
|
||||
@include hsl-color('gray-600', 256, 0%, 83%);
|
||||
@include hsl-color('gray-500', 256, 0%, 71%);
|
||||
@include hsl-color('gray-400', 256, 0%, 46%);
|
||||
@include hsl-color('gray-300', 256, 0%, 31%);
|
||||
@include hsl-color('gray-200', 256, 0%, 23%);
|
||||
@include hsl-color('gray-100', 256, 0%, 15%);
|
||||
|
||||
--code-color: var(--gray-800);
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, theme-color-level($color, -6), theme-color-level($color, 2));
|
||||
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(theme-color-level($color, -6), theme-color-level($color, -5), theme-color-level($color, 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style overrides happens after dependencies imports
|
||||
|
||||
|
|
@ -30,7 +148,7 @@ body {
|
|||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.menu-list .list-group-item {
|
||||
|
|
@ -40,13 +158,6 @@ body {
|
|||
}
|
||||
|
||||
|
||||
// Bootstrap overrides
|
||||
|
||||
// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6));
|
||||
}
|
||||
|
||||
// Add breakpoints for w-*
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@each $size, $length in $sizes {
|
||||
|
|
@ -75,7 +186,7 @@ body {
|
|||
.row-line {
|
||||
@include media-breakpoint-up(md) {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
background-color: rgba($black, 0.05);
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -112,7 +223,7 @@ body {
|
|||
|
||||
h3.card-title {
|
||||
margin-bottom: 1em;
|
||||
border-bottom: solid 1px #aaa;
|
||||
border-bottom: solid 1px $hr-border-color;
|
||||
}
|
||||
|
||||
// collapse icon
|
||||
|
|
@ -183,7 +294,13 @@ h3.card-title {
|
|||
}
|
||||
|
||||
code {
|
||||
background: ghostwhite;
|
||||
background: $light;
|
||||
padding: .15rem .25rem;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.log {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export default {
|
|||
fallbackLocale: localStorage.getItem('fallbackLocale'),
|
||||
cache: localStorage.getItem('cache') !== 'false',
|
||||
transitions: localStorage.getItem('transitions') !== 'false',
|
||||
theme: localStorage.getItem('theme') !== 'false',
|
||||
experimental: localStorage.getItem('experimental') === 'true',
|
||||
spinner: 'pacman',
|
||||
supportedLocales: supportedLocales
|
||||
|
|
@ -46,6 +47,12 @@ export default {
|
|||
|
||||
'SET_SPINNER' (state, spinner) {
|
||||
state.spinner = spinner
|
||||
},
|
||||
|
||||
'SET_THEME' (state, boolean) {
|
||||
localStorage.setItem('theme', boolean)
|
||||
state.theme = boolean
|
||||
document.documentElement.setAttribute('dark-theme', boolean)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -65,6 +72,10 @@ export default {
|
|||
commit('SET_FALLBACKLOCALE', locale)
|
||||
i18n.fallbackLocale = [locale, 'en']
|
||||
})
|
||||
},
|
||||
|
||||
'UPDATE_THEME' ({ commit }, theme) {
|
||||
commit('SET_THEME', theme)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -73,6 +84,7 @@ export default {
|
|||
fallbackLocale: state => (state.fallbackLocale),
|
||||
cache: state => (state.cache),
|
||||
transitions: state => (state.transitions),
|
||||
theme: state => (state.theme),
|
||||
experimental: state => state.experimental,
|
||||
spinner: state => state.spinner,
|
||||
|
||||
|
|
|
|||
|
|
@ -207,6 +207,7 @@ export default {
|
|||
border-bottom-left-radius: 0;
|
||||
font-size: $font-size-sm;
|
||||
|
||||
|
||||
& > header {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
</b-button>
|
||||
<b-button
|
||||
v-if="item.details"
|
||||
size="sm" variant="outline-dark" class="ml-lg-2 mt-2 mt-lg-0"
|
||||
size="sm" :variant="'outline-' + (theme ? 'light' : 'dark')" class="ml-lg-2 mt-2 mt-lg-0"
|
||||
v-b-toggle="`collapse-${report.id}-item-${i}`"
|
||||
>
|
||||
<icon iname="level-down" /> {{ $t('details') }}
|
||||
|
|
@ -106,6 +106,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
import api from '@/api'
|
||||
import { distanceToNow } from '@/helpers/filters/date'
|
||||
|
||||
|
|
@ -122,6 +124,10 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['theme'])
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatReportItem (report, item) {
|
||||
let issue = false
|
||||
|
|
|
|||
|
|
@ -60,6 +60,13 @@ export default {
|
|||
label: this.$i18n.t('tools_webadmin.transitions'),
|
||||
component: 'CheckboxItem',
|
||||
props: { labels: { true: 'enabled', false: 'disabled' } }
|
||||
},
|
||||
|
||||
theme: {
|
||||
id: 'theme',
|
||||
label: this.$i18n.t('tools_webadmin.theme'),
|
||||
component: 'CheckboxItem',
|
||||
props: { labels: { true: '🌙', false: '☀️' } }
|
||||
}
|
||||
|
||||
// experimental: added in `created()`
|
||||
|
|
@ -69,7 +76,7 @@ export default {
|
|||
|
||||
computed: {
|
||||
// Those are set/get computed properties
|
||||
...mapStoreGetSet(['locale', 'fallbackLocale'], 'dispatch'),
|
||||
...mapStoreGetSet(['locale', 'fallbackLocale', 'theme'], 'dispatch'),
|
||||
...mapStoreGetSet(['cache', 'transitions', 'experimental'])
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue