✨ make charts follow theme color

doroudi · Dec 29, 2024 · ad1b39c · ad1b39c
1 parent 5a05958
commit ad1b39c
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -10,6 +10,7 @@ import { dialogRtl } from 'naive-ui/es/dialog/styles'
 import { drawerRtl } from 'naive-ui/es/drawer/styles'
 import { darkTheme, lightTheme } from 'naive-ui'
 
+import useColors from './composables/colors'
 import themeOverrides from '~/common/theme/theme-overrides'
 
 const layout = useLayoutStore()
@@ -28,6 +29,7 @@ const rtlStyles = [
 ]
 
 const customTheme = ref({ ...themeOverrides })
+const { makeDarker, makeLighter } = useColors()
 
 watch(() => layout.activeLanguage, () => {
   const body = document.querySelector('body') as HTMLElement
@@ -50,6 +52,9 @@ watch(() => layout.themeColor, (newValue) => {
   if (customTheme.value.common && newValue !== '') {
     customTheme.value.common.primaryColor = newValue
     document.documentElement.style.setProperty('--primary-color', newValue)
+    document.documentElement.style.setProperty('--primary-color-shade1', makeLighter(newValue, 0.8))
+    document.documentElement.style.setProperty('--primary-color-shade2', makeLighter(newValue, 0.6))
+    document.documentElement.style.setProperty('--primary-color-shade3', makeLighter(newValue, 0.4))
   }
 }, { immediate: true })
 </script>

diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
 import VueApexCharts from 'vue3-apexcharts'
-import useColors from '~/composables/colors'
 
 const chartOptions = ref({
   chart: {
@@ -43,7 +42,7 @@ const chartOptions = ref({
   dataLabels: {
     enabled: false,
   },
-  colors: useColors().buildThemeColorSeries(2),
+  colors: ['var(--primary-color)', 'var(--primary-color-shade1)'],
   plotOptions: {
     bar: {
       columnWidth: '17%',
@@ -56,7 +55,6 @@ const chartOptions = ref({
       style: {
         colors: '#6E6B7B',
         fontSize: '0.86rem',
-
       },
     },
   },

diff --git a/src/components/DonutChart.vue b/src/components/DonutChart.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import VueApexCharts from 'vue3-apexcharts'
 import { ref } from 'vue'
-import useColors from '~/composables/colors'
 
 const donutChartOptions = ref({
   chart: {
@@ -34,7 +33,7 @@ const donutChartOptions = ref({
     curve: 'smooth',
     lineCap: 'round',
   },
-  colors: useColors().buildThemeColorSeries(4),
+  colors: ['var(--primary-color)', 'var(--primary-color-shade1)', 'var(--primary-color-shade2)', 'var(--primary-color-shade3)'],
   grid: {
     padding: {
       right: -20,