ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-02-21 09:31:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

WIP but almost working

Browse Source
This commit is contained in:
AndzejsP 2023-06-05 17:43:16 +03:00
parent c8b40e7b6a
commit cd1cbb9292
1 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/components/TopBar.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<!-- <link v-if="codeBlockStylesheet" rel="stylesheet" :href="codeBlockStylesheet"> -->
<header class=" top-0 shadow-lg"> <header class=" top-0 shadow-lg">
<nav class="container flex flex-col lg:flex-row item-center gap-2 py-2 "> <nav class="container flex flex-col lg:flex-row item-center gap-2 py-2 ">
<!-- LOGO --> <!-- LOGO -->
@ -51,6 +52,7 @@ export default {
name: 'TopBar', name: 'TopBar',
data() { data() {
return { return {
codeBlockStylesheet:'',
sunIcon: document.querySelector(".sun"), sunIcon: document.querySelector(".sun"),
moonIcon: document.querySelector(".moon"), moonIcon: document.querySelector(".moon"),
userTheme: localStorage.getItem("theme"), userTheme: localStorage.getItem("theme"),
@ -78,30 +80,61 @@ export default {
this.systemTheme = window.matchMedia("prefers-color-scheme: dark").matches; this.systemTheme = window.matchMedia("prefers-color-scheme: dark").matches;
}, },
methods: { methods: {
// codeBlockTheme(theme) {
// const styleDark = document.createElement('link');
// styleDark.type = "text/css";
// styleDark.href = 'highlight.js/styles/tokyo-night-dark.css';
// const styleLight = document.createElement('link');
// styleLight.type = "text/css";
// styleLight.href = 'highlight.js/styles/tomorrow-night-blue.css';
// if(theme=='dark'){
// document.head.appendChild(styleDark);
// document.head.removeChild(styleLight);
// }else{
// document.head.appendChild(styleLight);
// //document.head.removeChild(styleDark);
// }
// },
themeCheck() { themeCheck() {
if (this.userTheme == "dark" || (!this.userTheme && this.systemTheme)) { if (this.userTheme == "dark" || (!this.userTheme && this.systemTheme)) {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
this.moonIcon.classList.add("display-none"); this.moonIcon.classList.add("display-none");
import('highlight.js/styles/tokyo-night-dark.css');
nextTick(()=>{
//import('highlight.js/styles/tokyo-night-dark.css');
import('highlight.js/styles/stackoverflow-dark.css');
})
return return
} }
import('highlight.js/styles/tomorrow-night-blue.css');
nextTick(()=>{
//import('highlight.js/styles/tomorrow-night-blue.css');
import('highlight.js/styles/stackoverflow-light.css');
})
this.sunIcon.classList.add("display-none") this.sunIcon.classList.add("display-none")
}, },
themeSwitch() { themeSwitch() {
if (document.documentElement.classList.contains("dark")) { if (document.documentElement.classList.contains("dark")) {
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "light") localStorage.setItem("theme", "light")
this.userTheme == "light"
this.iconToggle() this.iconToggle()
import('highlight.js/styles/tomorrow-night-blue.css');
return return
} }
import('highlight.js/styles/tokyo-night-dark.css'); import('highlight.js/styles/tokyo-night-dark.css');
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
localStorage.setItem("theme", "dark") localStorage.setItem("theme", "dark")
this.userTheme == "dark"
this.iconToggle() this.iconToggle()
}, },