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

Use bootstraps bultin functionality to switch theme

Browse Source
This commit is contained in:
Matthias 2023-06-02 17:05:10 +02:00
parent c19c1695dc
commit b716a165c8
4 changed files with 38 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -1,18 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-theme="dark"> <html lang="en">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<title>FreqUI</title> <title>FreqUI</title>
</head> </head>
<body>
<body data-bs-theme="dark">
<noscript> <noscript>
<strong>We're sorry but FreqUI doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but FreqUI doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

12
src/components/ThemeSelect.vue
View File

@ -6,8 +6,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { useSettingsStore } from '@/stores/settings'; import { useSettingsStore } from '@/stores/settings';
import { useColorMode } from 'bootstrap-vue-next';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
const mode = useColorMode();
const activeTheme = ref(''); const activeTheme = ref('');
const settingsStore = useSettingsStore(); const settingsStore = useSettingsStore();
@ -18,17 +21,14 @@ const setTheme = (themeName: string) => {
} }
if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') { if (themeName.toLowerCase() === 'bootstrap' || themeName.toLowerCase() === 'bootstrap_dark') {
// const styles = document.getElementsByTagName('style'); // const styles = document.getElementsByTagName('style');
document.documentElement.setAttribute(
'data-theme',
themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark',
);
if (activeTheme.value) { if (activeTheme.value) {
// Only transition if simple mode is active // Only transition if simple mode is active
document.documentElement.classList.add('ft-theme-transition'); document.body.classList.add('ft-theme-transition');
window.setTimeout(() => { window.setTimeout(() => {
document.documentElement.classList.remove('ft-theme-transition'); document.body.classList.remove('ft-theme-transition');
}, 1000); }, 1000);
} }
mode.value = themeName.toLowerCase() === 'bootstrap' ? 'light' : 'dark';
} }
// Save the theme as localstorage // Save the theme as localstorage
settingsStore.currentTheme = themeName; settingsStore.currentTheme = themeName;

3
src/styles/_bootstrap_variables_ovw.scss
View File

@ -2,3 +2,6 @@
// $body-bg: rgb(42, 42, 49); // $body-bg: rgb(42, 42, 49);
$font-size-base: 0.9rem; $font-size-base: 0.9rem;
$primary: #0089a1; $primary: #0089a1;
$body-bg-dark: #121212;
$body-color-dark: #dedede;

17
src/styles/_styles_ovw.scss
View File

@ -37,7 +37,7 @@
transform: none !important; transform: none !important;
} }
[data-theme="dark"] { [data-bs-theme="dark"] {
$bg-dark: rgb(18, 18, 18); $bg-dark: rgb(18, 18, 18);
$bg-darker: darken($bg-dark, 5%); $bg-darker: darken($bg-dark, 5%);
@ -227,11 +227,14 @@
background-color: unset !important; background-color: unset !important;
} }
html.ft-theme-transition, body.ft-theme-transition,
html.ft-theme-transition *, body.ft-theme-transition *,
html.ft-theme-transition *:before, body.ft-theme-transition *:before,
html.ft-theme-transition *:after { body.ft-theme-transition *:after {
transition: background 750ms ease-in-out, transition:
border-color 750ms ease-in-out; background 750ms ease-in-out,
border-color 750ms ease-in-out,
background-color 750ms ease-in-out,
;
transition-delay: 0 !important; transition-delay: 0 !important;
} }