the theme system works, but the only way to configure it is through b…

…rowser storage
TheWANDatabase · Sep 4, 2023 · e0265ba · e0265ba
1 parent b2dbb98
commit e0265ba
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 28 deletions.
diff --git a/app.vue b/app.vue
@@ -1,11 +1,15 @@
 <template>
-  <div class="bg-zinc-900 text-zinc-200">
+  <div :class="`bg-${cfg ? cfg.theme.greyscale : 'zinc'}-900 text-${cfg ? cfg.theme.greyscale : 'zinc'}-200`">
     <Header />
     <NuxtPage />
     <Footer />
   </div>
 </template>
 
+<script setup>
+const cfg = useState('uconf')
+</script>
+
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 

diff --git a/components/CoreUI/CustomBadge.vue b/components/CoreUI/CustomBadge.vue
@@ -7,9 +7,17 @@
 </template>
 
 <script setup>
+const cfg = useState('uconf')
 const props = defineProps(['id', 'class', 'innerclass', 'label', 'color', 'text'])
-const base = ref(props.color ? props.color : 'poppy')
-const textBase = ref(props.text ? props.text : 'poppy')
+const base = ref(props.color ? props.color : (cfg.value ? cfg.value.theme.primary : 'poppy'))
+const textBase = ref(props.text ? props.text : (cfg.value ? cfg.value.theme.primary : 'poppy'))
+
+useAsyncData(() => {
+  base.value = props.color ? props.color : (cfg.value ? cfg.value.theme.primary : 'poppy')
+  textBase.value = props.text ? props.text : (cfg.value ? cfg.value.theme.primary : 'poppy')
+}, {
+  watch: [cfg, props]
+})
 
 const i = props.class ? props.class : ''
 const o = props.innerclass ? props.innerclass : ''

diff --git a/components/Header.vue b/components/Header.vue
@@ -9,6 +9,32 @@ const route = useRoute()
 const profile = useState('uprofile', () => undefined)
 const history = useState('history', () => new Map())
 const banners = useState('banners', () => [])
+const cfg = useState('uconf', () => {
+  return {
+    theme: {
+      name: 'poppy',
+      primary: 'poppy',
+      greyscale: 'zinc'
+    }
+  }
+})
+
+onMounted(() => {
+  function getConfig () {
+    const raw = window.localStorage.getItem('cfgix')
+    if (raw) {
+      cfg.value = JSON.parse(raw)
+    } else {
+      window.localStorage.setItem('cfgix', JSON.stringify(cfg.value))
+    }
+  }
+
+  try {
+    getConfig()
+  } catch (e) {
+    console.error(e)
+  }
+})
 
 useAsyncData(async () => {
   const bannerReq = await (await fetch('/api/v1/banners')).json()
@@ -133,6 +159,13 @@ await useAsyncData(() => {
           click: () => {
             window.open('https://ko-fi.com/altrius', '_blank')
           }
+        },
+        {
+          label: 'Join Our Discord',
+          icon: 'i-mdi-discord',
+          click: () => {
+            window.open('https://discord.gg/sVQm5f35VF', '_blank')
+          }
         }
       ]
     ]
@@ -164,6 +197,13 @@ await useAsyncData(() => {
           click: () => {
             window.open('https://ko-fi.com/altrius', '_blank')
           }
+        },
+        {
+          label: 'Join Our Discord',
+          icon: 'i-mdi-discord',
+          click: () => {
+            window.open('https://discord.gg/sVQm5f35VF', '_blank')
+          }
         }
       ]
     ]
@@ -228,7 +268,7 @@ function openVideo (id) {
 
 </script>
 <template>
-  <div class="shadow-sm shadow-black bg-zinc-800 w-100 flex-col">
+  <div :class="`shadow-sm shadow-black bg-${cfg.theme.greyscale}-800 w-100 flex-col`">
     <template v-for="(banner, index) in banners" :key="index">
       <Banner v-if="banner.show" :pid="banner.pid" :fixed="banner.fixed" :bg="banner.bg" :fg="banner.fg">
         <p>
@@ -242,29 +282,29 @@ function openVideo (id) {
     <div class="flex w-100">
       <a
         href="/"
-        class="uppercase pt-1 pb-1 pl-5 pr-5 text-zinc-100 hover:text-primary-500 hover:bg-zinc-600 transition-all drop-shadow-xl"
+        :class="`uppercase pt-1 pb-1 pl-5 pr-5 text-${cfg.theme.greyscale}-100 hover:text-${cfg.theme.primary}-500 hover:bg-${cfg.theme.greyscale}-600 transition-all drop-shadow-xl`"
       >
         <img class="w-32" src="https://cdn.thewandb.com/assets/WANDB_darkBackground.svg">
       </a>
       <a
         href="/"
-        class="uppercase pt-1 pb-1 pl-5 pr-5 text-zinc-100 hover:text-primary-500 hover:bg-zinc-600 transition-all drop-shadow-xl"
+        :class="`uppercase pt-1 pb-1 pl-5 pr-5 text-${cfg.theme.greyscale}-100 hover:text-${cfg.theme.primary}-500 hover:bg-${cfg.theme.greyscale}-600 transition-all drop-shadow-xl`"
       >
         <h3 class="py-3 text-l transition-all">
           Video Feed
         </h3>
       </a>
       <!-- <a
         href="/contributors"
-        class="uppercase pt-2 pb-2 pl-5 pr-5 text-slate-100 hover:text-primary-500 hover:bg-zinc-600 transition-all drop-shadow-xl"
+        :class="`uppercase pt-1 pb-1 pl-5 pr-5 text-${cfg.theme.greyscale}-100 hover:text-${cfg.theme.primary}-500 hover:bg-${cfg.theme.greyscale}-600 transition-all drop-shadow-xl`"
       >
         <h3 class="hover:font-bold py-3 text-l transition-all">
           Contributors
         </h3>
       </a> -->
       <a
         href="/cast"
-        class="uppercase mr-auto pt-1 pb-1 pl-5 pr-5 text-zinc-100 hover:text-primary-500 hover:bg-zinc-600 transition-all drop-shadow-xl"
+        :class="`uppercase pt-1 pb-1 pl-5 pr-5 mr-auto text-${cfg.theme.greyscale}-100 hover:text-${cfg.theme.primary}-500 hover:bg-${cfg.theme.greyscale}-600 transition-all drop-shadow-xl`"
       >
         <h3 class="h-fit py-3 text-center text-l transition-all">
           Cast
@@ -273,8 +313,10 @@ function openVideo (id) {
 
       <template v-if="profile">
         <UDropdown :items="items">
-          <UButton color="none" trailing-icon="i-heroicons-chevron-down-20-solid">
-            <UAvatar :src="profile.avatar_url" alt="Avatar" /> {{ profile.username }}
+          <UButton :class="`rounded-none hover:bg-${cfg.theme.greyscale}-600 text-${cfg.theme.greyscale}-100`" color="none" trailing-icon="i-heroicons-chevron-down-20-solid">
+            <UAvatar :src="profile.avatar_url" alt="Avatar" /> <p :class="`text-${cfg.theme.greyscale}-100`">
+              {{ profile.username }}
+            </p>
             <template #item="{ item }">
               <template v-if="item">
                 <UIcon v-if="item.icon" :name="item.icon" class="w-4 h-4" />
@@ -303,7 +345,7 @@ function openVideo (id) {
         <UInput
           v-model="query"
           variant="outline"
-          color="white"
+          :color="cfg.theme.greyscale"
           icon="i-heroicons-magnifying-glass-20-solid"
           size="sm"
           placeholder="Search..."

diff --git a/components/VideoContainer.vue b/components/VideoContainer.vue
@@ -2,7 +2,7 @@
 import style from './Video.module.css'
 
 const sb = useSupabaseClient()
-
+const cfg = useState('uconf')
 const csm = useState('csm')
 const issueURI = ref('https://github.com/TheWANDatabase/Website/issues/new')
 const props = defineProps({
@@ -109,9 +109,9 @@ const { pending } = useAsyncData(async () => {
         </template>
       </UCard>
     </USlideover>
-    <NuxtLink class="shadow-sm shadow-black w-fit overflow-hidden min-h-16 m-1 bg-zinc-700 text-primary-500 rounded-lg pt-2 hover:bg-primary-700 hover:text-primary-100 transition-all font-semibold" :href="`/videos/${data.id}`">
-      <div class="w-80 m-2 h-72">
-        <img class="w-max mx-auto rounded-md my-0" style="width: 300px; height: auto; object-fit: cover;" :src="data.thumbnail">
+    <NuxtLink :class="`shadow-sm shadow-black w-fit overflow-hidden min-h-16 m-1 bg-${cfg.theme.greyscale}-800 text-${cfg.theme.primary}-400 rounded-lg pt-2 hover:bg-${cfg.theme.primary}-700 hover:text-${cfg.theme.primary}-100 transition-all font-semibold`" :href="`/videos/${data.id}`">
+      <div class="w-80 m-2 h-80">
+        <img class="w-max mx-auto rounded-md -mt-2 mb-1" style="object-fit: cover;" :src="data.thumbnail">
         <h1 class="text-xl mx-2 h-16 my-0">
           {{ data.title }}
         </h1>
@@ -121,7 +121,7 @@ const { pending } = useAsyncData(async () => {
           </UTooltip>
 
           <UTooltip v-if="data.cast.length > 0" text="Click to open the preview panel">
-            <UButton label="Open" variant="ghost" @click.prevent="popoverOpen = true">
+            <UButton :color="cfg.theme.primary" label="Open" variant="ghost" @click.prevent="popoverOpen = true">
               <UAvatarGroup class="mr-auto ml-0" size="md" :max="data.cast.length > 3 ? 2 : 3">
                 <template v-for="(c, i) in data.cast" :key="i">
                   <UAvatar class="object-cover" :src="c.mug" :alt="c.label" />

diff --git a/components/VideoFeed.vue b/components/VideoFeed.vue
@@ -8,6 +8,7 @@ const episodeCount = ref(0)
 const cst = useState('cst', () => [])
 const csm = useState('csm', () => new Map())
 const config = useRuntimeConfig()
+const cfg = useState('uconf')
 const xsm = ref([])
 const loading = ref(false)
 const orderOptions = ref([
@@ -153,40 +154,41 @@ infinite()
 
 <template>
   <div class="flex-col">
-    <div class="shadow-sm shadow-black z-10 flex-col mt-3 mx-auto mb-2 bg-zinc-800 rounded justify-evenly max-w-fit sticky top-1" style="top: 0.25rem;">
+    <div :class="`shadow-sm shadow-black z-10 flex-col mt-3 mx-auto mb-2 bg-${cfg.theme.greyscale}-800 rounded justify-evenly max-w-fit sticky top-1`" style="top: 0.25rem;">
       <div class="flex p-2">
         <div class="w-42 flex-col my-auto mr-4 justify-evenly">
           <span class="flex w-56 justify-between my-1">
-            <p class="text-slate-400 h-5 inline align-middle">Enable infinity scrolling</p>
+            <p :class="`text-${cfg.theme.greyscale}-400 h-5 inline align-middle`">Enable infinity scrolling</p>
             <UTooltip text="Enable Infinity Scroll">
-              <UToggle v-model="allowInfinite" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" />
+              <UToggle v-model="allowInfinite" :color="cfg.theme.primary" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" :ui="{inactive: `bg-${cfg.theme.greyscale}-200 dark:bg-${cfg.theme.greyscale}-700`}" />
             </UTooltip>
           </span>
           <span class="flex w-56 justify-between my-1">
-            <p class="text-slate-400 h-5 inline align-middle">Hide Content Warnings</p>
+            <p :class="`text-${cfg.theme.greyscale}-400 h-5 inline align-middle`">Hide Content Warnings</p>
             <UTooltip text="Hide videos with content warnings">
-              <UToggle v-model="filters.hideCW" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" />
+              <UToggle v-model="filters.hideCW" :color="cfg.theme.primary" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" :ui="{inactive: `bg-${cfg.theme.greyscale}-200 dark:bg-${cfg.theme.greyscale}-700`}" />
             </UTooltip>
           </span>
           <span class="flex w-56 justify-between my-1">
-            <p class="text-slate-400 h-5 inline align-middle">Hide Corrupted Content</p>
+            <p :class="`text-${cfg.theme.greyscale}-400 h-5 inline align-middle`">Hide Corrupted Content</p>
             <UTooltip text="Hide corrupted videos">
-              <UToggle v-model="filters.hideCorrupt" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" />
+              <UToggle v-model="filters.hideCorrupt" :color="cfg.theme.primary" on-icon="i-heroicons-check-20-solid" off-icon="i-heroicons-x-mark-20-solid" :ui="{inactive: `bg-${cfg.theme.greyscale}-200 dark:bg-${cfg.theme.greyscale}-700`}" />
             </UTooltip>
           </span>
         </div>
         <div class="flex-col mb-auto mt-0">
           <div class="flex max-w-fit mt-3 mx-auto mb-2 p-2 justify-evenly">
             <UTooltip text="Only show videos after this date">
-              <UInput v-model="filters.startDate" type="date" />
+              <UInput v-model="filters.startDate" :color="cfg.theme.primary" type="date" />
             </UTooltip>
             <div class="mx-5" />
             <UTooltip text="Only show videos before this date">
-              <UInput v-model="filters.endDate" type="date" />
+              <UInput v-model="filters.endDate" :color="cfg.theme.primary" type="date" />
             </UTooltip>
             <div class="mx-5" />
             <USelectMenu
               v-model="filters.order"
+              :color="cfg.theme.primary"
               :options="orderOptions"
             >
               <template #label>
@@ -205,6 +207,7 @@ infinite()
               placeholder="Select Cast Members"
               searchable
               class="w-72 min-w-fit"
+              :color="cfg.theme.primary"
               :ui="{
                 width: 'w-72'
               }"
@@ -226,6 +229,7 @@ infinite()
               :loading="loading"
               icon="i-heroicons-magnifying-glass-20-solid"
               variant="soft"
+              :color="cfg.theme.primary"
               @click="filter"
             />
           </div>
@@ -246,7 +250,7 @@ infinite()
     </div>
     <div class="flex align-middle mx-auto w-fit my-5">
       <InfiniteLoading v-if="fd.length > 19 && allowInfinite" @infinite="infinite" />
-      <UButton v-else-if="fd.length > 19 && !allowInfinite" :loading="loading" label="Load More" @click="infinite" />
+      <UButton v-else-if="fd.length > 19 && !allowInfinite" :loading="loading" :color="cfg.theme.primary" label="Load More" @click="infinite" />
     </div>
   </div>
 </template>
diff --git a/public/2018_Linus_Tech_Tips_logo_grey.svg b/public/2018_Linus_Tech_Tips_logo_grey.svg
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -86,7 +86,8 @@ module.exports = {
   },
   safelist: [
     {
-      pattern: /(bg|text|border|shadow)-(scorch|golden|poppy)+/
+      pattern: /(bg|text|border|shadow)-(scorch|golden|poppy|slate|gray|zinc|neutral|stone|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)+/,
+      variants: ['hover']
     }
   ]
 }