save theme preferences
This commit is contained in:
parent
521be4c31a
commit
255a3205c0
1 changed files with 23 additions and 4 deletions
|
@ -58,7 +58,6 @@
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- theme controller is copied from https://daisyui.com/components/theme-controller/ -->
|
<!-- theme controller is copied from https://daisyui.com/components/theme-controller/ -->
|
||||||
<!-- TODO: memorize this theme selection in localStorage, maybe also add "auto" option -->
|
|
||||||
<div class="dropdown dropdown-end dropdown-bottom">
|
<div class="dropdown dropdown-end dropdown-bottom">
|
||||||
<div tabindex="0" role="button" class="btn m-1">
|
<div tabindex="0" role="button" class="btn m-1">
|
||||||
Theme
|
Theme
|
||||||
|
@ -66,14 +65,24 @@
|
||||||
<path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
|
<path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<ul tabindex="0" class="dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl">
|
<ul tabindex="0" class="dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl h-80 overflow-y-auto">
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
class="btn btn-sm btn-block w-full btn-ghost justify-start"
|
||||||
|
:class="{ 'btn-active': selectedTheme === 'auto' }"
|
||||||
|
@click="setSelectedTheme('auto')">
|
||||||
|
auto
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
<li v-for="theme in themes">
|
<li v-for="theme in themes">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
name="theme-dropdown"
|
name="theme-dropdown"
|
||||||
class="theme-controller btn btn-sm btn-block w-full btn-ghost justify-start"
|
class="theme-controller btn btn-sm btn-block w-full btn-ghost justify-start"
|
||||||
:aria-label="theme"
|
:aria-label="theme"
|
||||||
:value="theme" />
|
:value="theme"
|
||||||
|
:checked="selectedTheme === theme"
|
||||||
|
@click="setSelectedTheme(theme)" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -204,8 +213,9 @@
|
||||||
isGenerating: false,
|
isGenerating: false,
|
||||||
pendingMsg: null, // the on-going message from assistant
|
pendingMsg: null, // the on-going message from assistant
|
||||||
abortController: null,
|
abortController: null,
|
||||||
|
selectedTheme: localStorage.getItem('theme') || 'auto',
|
||||||
// const
|
// const
|
||||||
themes: ['light', 'dark', 'retro', 'cyberpunk', 'aqua', 'valentine', 'synthwave'],
|
themes: ['light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate', 'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden', 'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black', 'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade', 'night', 'coffee', 'winter', 'dim', 'nord', 'sunset'],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
|
@ -218,6 +228,15 @@
|
||||||
resizeObserver.observe(pendingMsgElem);
|
resizeObserver.observe(pendingMsgElem);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
setSelectedTheme(theme) {
|
||||||
|
if (theme === 'auto') {
|
||||||
|
this.selectedTheme = 'auto';
|
||||||
|
localStorage.removeItem('theme');
|
||||||
|
} else {
|
||||||
|
this.selectedTheme = theme;
|
||||||
|
localStorage.setItem('theme', theme);
|
||||||
|
}
|
||||||
|
},
|
||||||
newConversation() {
|
newConversation() {
|
||||||
if (this.isGenerating) return;
|
if (this.isGenerating) return;
|
||||||
this.viewingConvId = Conversations.getNewConvId();
|
this.viewingConvId = Conversations.getNewConvId();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue