lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-10 10:21:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve styling, introduce FT dark style

Browse Source
This commit is contained in:
Matthias 2020-12-28 16:54:14 +01:00
parent c50fcccc3e
commit 19c6c77746
4 changed files with 63 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

12
src/components/BootswatchThemeSelect.vue
View File

@ -40,6 +40,11 @@ export default {
description: 'Plain bootstrap default theme',
dark: false,
},
{
name: 'Bootstrap_dark',
description: 'Plain dark bootstrap default theme',
dark: true,
},
{
name: 'Cerulean',
description: 'A calm blue sky',
@ -161,9 +166,13 @@ export default {
if (this.activeTheme === themeName) {
return;
}
if (themeName.toLowerCase() === 'bootstrap') {
if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
const styles = document.getElementsByTagName('style');
const bw = Array.from(styles).filter((w) => w.textContent.includes('bootswatch'));
document.documentElement.setAttribute(
'data-theme',
themeName.toLowerCase() === 'bootstrap_dark' ? 'dark' : 'light',
);
// Reset all bootswatch styles
bw.forEach((style, index) => {
bw[index].disabled = true;
@ -172,6 +181,7 @@ export default {
// Dynamic import for a different theme, to avoid loading ALL themes.
import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then((mod) => {
console.log('theme', mod);
document.documentElement.removeAttribute('data-theme');
const styles = document.getElementsByTagName('style');
const bw = Array.from(styles).filter((w) => w.textContent.includes('bootswatch'));
bw.forEach((style, index) => {

47
src/styles/_styles_ovw.scss
View File

@ -3,3 +3,50 @@
// html, body, #app{
// }
[data-theme="dark"] {
$bg-dark: #3c3c3c;
$bg-darker: darken($bg-dark, 5%);
$fg-color: #dedede;
background-color: darken($bg-dark, 5%) ;
color: #eee !important;
.card {
border: 0;
}
.card-body {
background: $bg-dark;
color: $fg-color;
}
.card-header {
background: lighten($bg-dark, 5%);
color: $fg-color;
}
.table {
color: $fg-color;
}
.list-group-item {
color: $fg-color;
background: $bg-dark;
}
// .custom-select {
// color: $fg-color;
// // background: $bg-dark;
// }
.nav-link.active {
color: $fg-color;
background: $bg-darker;
}
.modal-content {
color: $fg-color;
background: $bg-dark;
}
.form-control {
color: $fg-color;
background: $bg-dark;
}
textarea {
color: $fg-color;
background: $bg-dark;
}
}

6
src/styles/main.scss
View File

@ -1,8 +1,8 @@
@import '_bootstrap_variables_ovw.scss';
@import 'bootstrap_variables_ovw';
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index';
@import 'variables';
@import 'styles_ovw';