fix(fe): colors for dark mode

This commit is contained in:
Denis Gukov 2022-06-30 02:59:48 +05:00
parent 20ccc24452
commit 3fb1a2f008
6 changed files with 35 additions and 5 deletions

View File

@ -58,3 +58,11 @@ $mdi-font-path: "~@mdi/font/fonts";
} }
@import '~vuetify/src/styles/main'; @import '~vuetify/src/styles/main';
.v-application.theme--dark .v-overlay__scrim {
background: white !important;
}
.v-bottom-sheet > .v-sheet.theme--dark {
background: #212121;
}

View File

@ -35,7 +35,7 @@
label="Max number of parallel tasks (Optional)" label="Max number of parallel tasks (Optional)"
:disabled="formSaving" :disabled="formSaving"
:rules="[ :rules="[
v => Math.floor(v) == v || 'Must be integer', v => (v == null || v === '' || Math.floor(v) === v) || 'Must be integer',
v => (v == null || v === '' || v >= 0) || 'Must be 0 or greater', v => (v == null || v === '' || v >= 0) || 'Must be 0 or greater',
]" ]"
hint="Should be 0 or greater, 0 - unlimited." hint="Should be 0 or greater, 0 - unlimited."

View File

@ -5,7 +5,7 @@
hide-overlay hide-overlay
width="300" width="300"
> >
<v-card> <v-card :color="$vuetify.theme.dark ? '#212121' : 'white'">
<v-card-title></v-card-title> <v-card-title></v-card-title>
<v-card-text class="pb-0"> <v-card-text class="pb-0">
<v-form v-if="editedVar != null"> <v-form v-if="editedVar != null">
@ -59,7 +59,12 @@
<fieldset style="padding: 0 10px 5px 10px; <fieldset style="padding: 0 10px 5px 10px;
border: 1px solid rgba(0, 0, 0, 0.38); border: 1px solid rgba(0, 0, 0, 0.38);
border-radius: 4px; border-radius: 4px;
font-size: 12px;"> font-size: 12px;"
:style="{
'border-color': $vuetify.theme.dark ?
'rgba(200, 200, 200, 0.38)' :
'rgba(0, 0, 0, 0.38)'
}">
<legend style="padding: 0 3px;">Survey Variables</legend> <legend style="padding: 0 3px;">Survey Variables</legend>
<v-chip-group column> <v-chip-group column>
<v-chip <v-chip

View File

@ -61,7 +61,7 @@
<v-row> <v-row>
<v-col cols="12" md="6" class="pb-0"> <v-col cols="12" md="6" class="pb-0">
<v-card class="mb-6"> <v-card class="mb-6" :color="$vuetify.theme.dark ? '#212121' : 'white'">
<v-tabs <v-tabs
fixed-tabs fixed-tabs
v-model="itemTypeIndex" v-model="itemTypeIndex"
@ -261,10 +261,10 @@ Example:
<script> <script>
/* eslint-disable import/no-extraneous-dependencies,import/extensions */ /* eslint-disable import/no-extraneous-dependencies,import/extensions */
import ItemFormBase from '@/components/ItemFormBase';
import axios from 'axios'; import axios from 'axios';
import { codemirror } from 'vue-codemirror'; import { codemirror } from 'vue-codemirror';
import ItemFormBase from '@/components/ItemFormBase';
import 'codemirror/lib/codemirror.css'; import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/vue/vue.js'; import 'codemirror/mode/vue/vue.js';
import 'codemirror/addon/lint/json-lint.js'; import 'codemirror/addon/lint/json-lint.js';

View File

@ -0,0 +1,12 @@
$material-dark: (
'background': #1E1E1E,
'app-bar': transparent,
'toolbar': transparent,
);
$material-light: (
'app-bar': transparent,
'toolbar': transparent,
);
$tabs-bar-background-color: 'toolbar';

View File

@ -1,4 +1,9 @@
module.exports = { module.exports = {
configureWebpack: {
devServer: {
historyApiFallback: true,
},
},
chainWebpack: (config) => { chainWebpack: (config) => {
config.plugin('html') config.plugin('html')
.tap((args) => { .tap((args) => {