Implement Theme Support

Fixes #93

src/App.vue

@@ -22,6 +22,8 @@ const rtlStyles = [
   tagRtl,
 ]
 
+const customTheme = ref({ ...themeOverrides })
+
 watch(() => layout.activeLanguage, () => {
   const body = document.querySelector('body') as HTMLElement
   if (layout.isRtl)
@@ -38,11 +40,16 @@ watch(() => layout.isDark, (newValue) => {
   else
     document.documentElement.classList.remove('dark')
 }, { immediate: true })
+
+watch(() => layout.themeColor, (newValue) => {
+  if (customTheme.value.common && newValue !== '')
+    customTheme.value.common.primaryColor = newValue
+}, { immediate: true })
 </script>
 
 <template>
   <n-config-provider
-    :theme="layout.isDark ? darkTheme : lightTheme" :theme-overrides="themeOverrides"
+    :theme="layout.isDark ? darkTheme : lightTheme" :theme-overrides="customTheme"
     :rtl="layout.isRtl ? rtlStyles : []" :preflight-style-disabled="false"
   >
     <n-notification-provider placement="bottom-right">

src/components.d.ts

@@ -57,6 +57,7 @@ declare module 'vue' {
     NRadioButton: typeof import('naive-ui')['NRadioButton']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
     NTreeSelect: typeof import('naive-ui')['NTreeSelect']

src/components/BarChart.vue

@@ -42,7 +42,7 @@ const chartOptions = ref({
   dataLabels: {
     enabled: false,
   },
-  colors: ['#3db9af', '#37938d', '#276e6b', '#7fcdca'],
+  colors: buildThemeSeries(),
   plotOptions: {
     bar: {
       columnWidth: '17%',
@@ -71,6 +71,10 @@ const series = ref([
     data: [3, 4, 15, 5, 4, 60, 10],
   },
 ])
+
+function buildThemeSeries() {
+  return ['#3db9af', '#37938d', '#276e6b', '#7fcdca']
+}
 </script>
 
 <template>

src/components/CustomizeDialog/CustomizeDialog.vue

@@ -1,12 +1,16 @@
 <script setup>
 import {
+  Checkmark48Filled as CheckIcon,
   WeatherMoon48Regular as MoonIcon,
   WeatherSunny48Regular as SunIcon,
 } from '@vicons/fluent'
+import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
 const theme = ref('light')
+
 const layout = useLayoutStore()
+const { isRtl } = storeToRefs(layout)
 function setLight() {
   if (layout.isDark)
     layout.toggleTheme()
@@ -16,6 +20,19 @@ function setDark() {
   if (!layout.isDark)
     layout.toggleTheme()
 }
+
+const colors = [
+  '#00ad4c', '#ef4848', '#FC0', '#FF8000', '#22d3ee',
+]
+const selectedColorIndex = ref(0)
+function setColor(index) {
+  selectedColorIndex.value = index
+  layout.setThemeColor(colors[index])
+}
+
+onMounted(() => {
+  selectedColorIndex.value = colors.findIndex(x => x === layout.themeColor)
+})
 </script>
 
 <template>
@@ -25,21 +42,15 @@ function setDark() {
     </NTag>
 
     <n-space justify="center" size="large">
-      <NButton
-        ghost class="p-7" :type="layout.isDark === false ? 'primary' : 'default'"
-        size="large" @click="setLight"
-      >
+      <NButton ghost class="p-7" :type="layout.isDark === false ? 'primary' : 'default'" size="large" @click="setLight">
         <template #icon>
           <NIcon>
             <SunIcon />
           </NIcon>
         </template>
       </NButton>
 
-      <NButton
-        ghost class="w-full p-7" :type="layout.isDark ? 'primary' : 'default'" size="large"
-        @click="setDark"
-      >
+      <NButton ghost class="w-full p-7" :type="layout.isDark ? 'primary' : 'default'" size="large" @click="setDark">
         <template #icon>
           <NIcon>
             <MoonIcon />
@@ -52,17 +63,35 @@ function setDark() {
     <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold">
       {{ t('customize.color') }}
     </NTag>
+
+    <div>
+      <NButton
+        v-for="(color, index) of colors" :key="index" :color="color" size="medium" circle icon="CheckIcon"
+        class="mx-1" @click="setColor(index)"
+      >
+        <template #icon>
+          <CheckIcon v-if="selectedColorIndex === index" />
+          <span v-else />
+        </template>
+      </NButton>
+    </div>
   </div>
   <div class="section">
     <NTag type="primary" :bordered="false" size="small" class="mb-3 font-bold">
       {{ t('customize.layout') }}
     </NTag>
+
+    <div>
+      <n-switch v-model:value="isRtl" />
+      RTL Layout
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .section {
     margin-bottom: 1rem;
+    padding: 1rem 0;
     .section-title {
         font-weight: 500;
         padding: 0.2rem 0;

src/components/GithubButton.vue

@@ -7,12 +7,9 @@
     <n-tooltip placement="top" trigger="hover">
       <template #trigger>
         <a href="https://github.com/doroudi/yummyadmin" block target="_blank">
-          <n-button strong round type="primary" class="pulse-animated" flex space-between py-5 px-3>
+          <n-button strong round color="#36ad6a" class="pulse-animated" flex space-between py-5 px-3>
             <NIcon size="1.6rem" class="mr-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                viewBox="0 0 32 32"
-              >
+              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
                 <path
                   d="M16 2a14 14 0 0 0-4.43 27.28c.7.13 1-.3 1-.67v-2.38c-3.89.84-4.71-1.88-4.71-1.88a3.71 3.71 0 0 0-1.62-2.05c-1.27-.86.1-.85.1-.85a2.94 2.94 0 0 1 2.14 1.45a3 3 0 0 0 4.08 1.16a2.93 2.93 0 0 1 .88-1.87c-3.1-.36-6.37-1.56-6.37-6.92a5.4 5.4 0 0 1 1.44-3.76a5 5 0 0 1 .14-3.7s1.17-.38 3.85 1.43a13.3 13.3 0 0 1 7 0c2.67-1.81 3.84-1.43 3.84-1.43a5 5 0 0 1 .14 3.7a5.4 5.4 0 0 1 1.44 3.76c0 5.38-3.27 6.56-6.39 6.91a3.33 3.33 0 0 1 .95 2.59v3.84c0 .46.25.81 1 .67A14 14 0 0 0 16 2z"
                   fill-rule="evenodd" fill="currentColor"

src/store/layout.store.ts

@@ -6,7 +6,7 @@ export const useLayoutStore = defineStore('layout', () => {
   const activeLanguage = ref('en')
   const isRtl = ref(false)
   const { t, locale } = useI18n()
-
+  const themeColor = ref('')
   const isDark = ref(false)
 
   watch(() => useWindowSize().width.value, (newValue: number) => {
@@ -28,6 +28,10 @@ export const useLayoutStore = defineStore('layout', () => {
     isRtl.value = (dir !== null && dir === 'rtl')
   }
 
+  function setThemeColor(color: string) {
+    themeColor.value = color
+  }
+
   return {
     collapsed,
     toggleSidebar,
@@ -37,6 +41,8 @@ export const useLayoutStore = defineStore('layout', () => {
     changeLanguage,
     forceCollapsed,
     isDark,
+    setThemeColor,
+    themeColor,
   }
 }, { persist: true })