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

Make it clear which theme is light / dark

Browse Source
This commit is contained in:
Matthias 2020-12-28 10:49:26 +01:00
parent c80f569a85
commit 37bbac4d60
1 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/BootswatchThemeSelect.vue
View File

@ -18,8 +18,9 @@
v-b-tooltip.hover.right
:active="activeTheme === theme.name"
:title="theme.description"
:name="theme.name"
@click="handleClick"
>{{ theme.name }}</b-dropdown-item-button
>{{ theme.name }}{{ theme.dark ? ' [dark]' : '' }}</b-dropdown-item-button
>
</b-nav-item-dropdown>
</div>
@ -37,90 +38,112 @@ export default {
{
name: 'Bootstrap',
description: 'Plain bootstrap default theme',
dark: false,
},
{
name: 'Cerulean',
description: 'A calm blue sky',
dark: false,
},
{
name: 'Cosmo',
description: 'An ode to Metro',
dark: false,
},
{
name: 'Cyborg',
description: 'Jet black and electric blue',
dark: true,
},
{
name: 'Darkly',
description: 'Flatly in night mode',
dark: true,
},
{
name: 'Flatly',
description: 'Flat and modern',
dark: false,
},
{
name: 'Journal',
description: 'Crisp like a new sheet of paper',
dark: false,
},
{
name: 'Litera',
description: 'The medium is the message',
dark: false,
},
{
name: 'Lumen',
description: 'Light and shadow',
dark: false,
},
{
name: 'Lux',
description: 'A touch of class',
dark: false,
},
{
name: 'Materia',
description: 'Material is the metaphor',
dark: false,
},
{
name: 'Minty',
description: 'A fresh feel',
dark: false,
},
{
name: 'Pulse',
description: 'A trace of purple',
dark: false,
},
{
name: 'Sandstone',
description: 'A touch of warmth',
dark: false,
},
{
name: 'Simplex',
description: 'Mini and minimalist',
dark: false,
},
{
name: 'Sketchy',
description: 'A hand-drawn look for mockups and mirth',
dark: false,
},
{
name: 'Slate',
description: 'Shades of gunmetal gray',
dark: true,
},
{
name: 'Solar',
description: 'A spin on Solarized',
dark: true,
},
{
name: 'Spacelab',
description: 'Silvery and sleek',
dark: false,
},
{
name: 'Superhero',
description: 'The brave and the blue',
dark: true,
},
{
name: 'United',
description: 'Ubuntu orange and unique font',
dark: false,
},
{
name: 'Yeti',
description: 'A friendly foundation',
dark: false,
},
],
};
@ -131,7 +154,7 @@ export default {
},
methods: {
handleClick(e) {
this.setTheme(e.target.innerText.trim());
this.setTheme(e.target.name.trim());
},
setTheme(themeName) {
// If theme is already active, do nothing.
@ -147,7 +170,8 @@ export default {
});
} else {
// Dynamic import for a different theme, to avoid loading ALL themes.
import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then(() => {
import(`bootswatch/dist/${themeName.toLowerCase()}/bootstrap.min.css`).then((mod) => {
console.log('theme', mod);
const styles = document.getElementsByTagName('style');
const bw = Array.from(styles).filter((w) => w.textContent.includes('bootswatch'));
bw.forEach((style, index) => {