feat: supports purple theme

src/components/Polygonal.tsx

@@ -12,12 +12,13 @@ const Polygonal: React.FC<{
   const chartRef = useRef<ECharts>()
   const theme = useTheme()
 
+  console.log('[faiz:] === Polygonal theme', theme)
+
   useEffect(() => {
     const chartDom = document.getElementById('polygonal')
     async function initChart() {
       if (!chartDom || !theme) return
       const colorConfig = POLYGONAL_COLOR_CONFIG[theme]
-      console.log('=== polygonal chart init ===', theme, colorConfig)
       const option = {
         xAxis: {
           type: 'category',

src/constants/theme.ts

@@ -7,7 +7,7 @@ export const POLYGONAL_COLOR_CONFIG = {
     backColorEnd: 'rgba(255,255,255,0)',
   },
   purple: {
-    lineColor: '#047857',
+    lineColor: '#3a4de9',
     backColor: 'rgba(58,77,233,0.8)',
     backColorEnd: 'rgba(255,255,255,0)',
   },

src/hooks/useTheme.ts

@@ -4,10 +4,11 @@ import { DEFAULT_SETTINGS } from '@/util/constants'
 import { useEffect, useState } from 'react'
 
 export default function useTheme() {
-  const [theme, setTheme] = useState<ISettingsForm['lightTheme'] | 'dark'>(DEFAULT_SETTINGS.lightTheme)
+  const [theme, setTheme] = useState<ISettingsForm['lightThemeType'] | 'dark'>(DEFAULT_SETTINGS.lightThemeType)
 
   useEffect(() => {
     getCurrentTheme().then(logseqTheme => {
+      console.log('[faiz:] === getCurrentTheme', logseqTheme)
       setTheme(logseqTheme)
     })
   })

src/pages/Settings/index.tsx

@@ -4,7 +4,7 @@ import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
 import { useForm } from 'antd/lib/form/Form'
 import classNames from 'classnames'
 import ColorPicker from '@/components/ColorPicker'
-import { CALENDAR_VIEWS, DEFAULT_SETTINGS, DURATION_UNITS, THEME } from '@/util/constants'
+import { CALENDAR_VIEWS, DEFAULT_SETTINGS, DURATION_UNITS, LIGHT_THEME_TYPE, THEME } from '@/util/constants'
 import Query from '@/components/Query'
 import CreateCalendarModal from '@/components/CreateCalendarModal'
 import type { ISettingsForm } from '@/util/type'
@@ -99,6 +99,9 @@ const Settings: React.FC<{
             <Form.Item label="Theme" name="theme">
               <Select options={THEME} />
             </Form.Item>
+            <Form.Item label="Light Theme Type" name="lightThemeType">
+              <Select options={LIGHT_THEME_TYPE} />
+            </Form.Item>
             <Form.Item label="Default Duration" name={["defaultDuration", 'value']}>
               <InputNumber
                 addonAfter={
@@ -123,7 +126,7 @@ const Settings: React.FC<{
                 <ColorPicker text="border" />
               </Form.Item>
               <Form.Item name={['logKey', 'enabled']} noStyle valuePropName="checked">
-                <Switch size="small" />
+                <Switch />
               </Form.Item>
               {/* <div style={{ width: '60px' }}></div> */}
             </div>

src/style/index.less

@@ -1,4 +1,5 @@
 @import './var/light.less';
+@import './var/purple.less';
 @import './var/dark.less';
 
 @tailwind components;

src/style/var/light.less

@@ -1,4 +1,4 @@
-html {
+html.green {
   // back color
   --ls-primary-background-color: #e9f2f0;
   --ls-secondary-background-color: #c3e3db;

src/util/constants.ts

@@ -21,10 +21,14 @@ export const THEME = [
   { value: 'dark', label: 'Dark' },
   { value: 'auto', label: 'Auto' },
 ]
+export const LIGHT_THEME_TYPE = [
+  { value: 'green', label: 'Green' },
+  { value: 'purple', label: 'Purple' },
+]
 
 export const DEFAULT_SETTINGS: ISettingsForm = {
   theme: 'auto',
-  lightTheme: 'green',
+  lightThemeType: 'green',
   defaultView: 'month',
   weekStartDay: 0,
   // journalDateFormatter: 'YYYY-MM-DD ddd',

src/util/logseq.ts

@@ -56,6 +56,7 @@ export const getPageData = async (srcPage: { id?: number; uuid?: string; origina
 
 export const getCurrentTheme = async () => {
   const logseqTheme = import.meta.env.DEV ? 'light' : await logseq.App.getStateFromStore<'dark' | 'light'>('ui/theme')
-  const lightTheme = (logseq.settings?.lightTheme as ISettingsForm['lightTheme']) || 'green'
-  return logseqTheme === 'dark' ? 'dark' : lightTheme
+  const _theme = logseq.settings?.theme === 'auto' ? logseqTheme : logseq.settings?.theme
+  const lightTheme = (logseq.settings?.lightThemeType as ISettingsForm['lightThemeType']) || 'green'
+  return _theme === 'dark' ? 'dark' : lightTheme
 }

src/util/type.ts

@@ -15,7 +15,7 @@ export type ISettingsFormQuery = Partial<{
 }>
 export type ISettingsForm = {
   theme?: 'light' | 'dark' | 'auto'
-  lightTheme?: 'green' | 'purple'
+  lightThemeType?: 'green' | 'purple'
   defaultView: string
   weekStartDay: 0 | 1
   // journalDateFormatter: string

src/util/util.ts

@@ -33,13 +33,14 @@ export const log = (msg, color='blue') => console.log(`%c${msg}`, `color:${color
 
 export const setPluginTheme = (theme: 'dark' | 'light') => {
   const html = document.querySelector('html')
-  const lightTheme = logseq.settings?.lightTheme || DEFAULT_SETTINGS.lightTheme
+  const lightTheme = logseq.settings?.lightThemeType || DEFAULT_SETTINGS.lightThemeType
+  const prevLightTheme = lightTheme === 'green' ? 'purple' : 'green'
   if (theme === 'dark') {
     html?.classList.add('dark')
     html?.classList.remove(lightTheme)
     insertCss('./antd.dark.min.css')
   } else {
-    html?.classList.remove('dark')
+    html?.classList.remove('dark', prevLightTheme)
     html?.classList.add(lightTheme)
     insertCss('./antd.min.css')
   }