feat: 1.theme support

JuckZ · Feb 11, 2023 · ea5233e · ea5233e
1 parent c542b1d
commit ea5233e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -72,6 +72,7 @@ import { onCodeMirrorChange, toggleBlast, toggleShake } from './render/Blast';
 import { Pomodoro, pomodoroSchema } from './schemas/spaces';
 import './main.scss';
 
+const media = window.matchMedia('(prefers-color-scheme: dark)');
 export default class ObsidianManagerPlugin extends Plugin {
  override app: ExtApp;
  pluginDataIO: PluginDataIO;
@@ -775,12 +776,6 @@ export default class ObsidianManagerPlugin extends Plugin {
  });
  }
 
- override async onunload(): Promise<void> {
- toggleBlast('0');
- this.app.workspace.detachLeavesOfType(POMODORO_HISTORY_VIEW);
- this.style.detach();
- }
-
  public getLocalRandom(title: string, path: string) {
  return getLocalRandom(title, this.app.vault.getAbstractFileByPath(path));
  }
@@ -1070,6 +1065,19 @@ export default class ObsidianManagerPlugin extends Plugin {
  }
 
  private watchVault() {
+ // https://github.com/kepano/obsidian-system-dark-mode/blob/master/main.ts
+ // Watch for system changes to color theme
+ const callback = () => {
+ // xxx
+ if (media.matches) {
+ console.log('Dark mode act1ive');
+ } else {
+ console.log('Light mode 1active');
+ }
+ };
+ media.addEventListener('change', callback);
+ // Remove listener when we unload
+ this.register(() => media.removeEventListener('change', callback));
  window.addEventListener(eventTypes.pomodoroChange, this.pomodoroChange.bind(this));
  window.addEventListener(eventTypes.mdbChange, this.mdbChange.bind(this));
  [
@@ -1087,4 +1095,10 @@ export default class ObsidianManagerPlugin extends Plugin {
  this.registerEvent(eventRef);
  });
  }
+
+ override async onunload(): Promise<void> {
+ toggleBlast('0');
+ this.app.workspace.detachLeavesOfType(POMODORO_HISTORY_VIEW);
+ this.style.detach();
+ }
 }
diff --git a/src/ui/PomodoroHistory.vue b/src/ui/PomodoroHistory.vue
@@ -1,6 +1,7 @@
 <template>
  <n-config-provider
- :theme="darkTheme"
+ :theme="theme"
+ :theme-overrides="theme.name === 'light' ? lightThemeOverrides : darkThemeOverrides"
  :locale="zhCN"
  :date-locale="dateZhCN"
  :breakpoints="{ xs: 0, s: 640, m: 1024, l: 1280, xl: 1536, xxl: 1920 }"
@@ -35,9 +36,9 @@
 
 <script setup lang="tsx">
 import { Ref, nextTick, onMounted, onUpdated, ref, toRefs } from 'vue';
-import { NConfigProvider, NMessageProvider, NSpace, NGrid, NGridItem } from 'naive-ui';
+import { NConfigProvider, GlobalThemeOverrides, NMessageProvider, NSpace, NGrid, NGridItem } from 'naive-ui';
 // theme
-import { createTheme, datePickerDark, inputDark } from 'naive-ui';
+import { createTheme, darkTheme, lightTheme, datePickerDark, inputDark } from 'naive-ui';
 // locale & dateLocale
 import { dateZhCN, zhCN } from 'naive-ui';
 import type { Pomodoro } from '../schemas/spaces';
@@ -54,7 +55,23 @@ import { selectDB } from '../utils/db/db';
 import type ObsidianManagerPlugin from '../main';
 import { eventTypes } from '../types/types';
 
-const darkTheme = createTheme([inputDark, datePickerDark]);
+// const darkTheme = createTheme([inputDark, datePickerDark]);
+let theme = ref(darkTheme);
+
+// TODO 需要重启窗口才能切换主题
+if(window.app.getTheme() === 'obsidian') {
+ theme.value = darkTheme;
+} else if(window.app.getTheme() === 'moonstone') {
+ theme.value = lightTheme;
+} else {
+ theme.value = lightTheme;
+}
+
+const lightThemeOverrides: GlobalThemeOverrides = {
+};
+
+const darkThemeOverrides: GlobalThemeOverrides = {
+};
 
 const props = defineProps<{
  plugin: ObsidianManagerPlugin;
@@ -72,7 +89,6 @@ const currentPomodoro: Ref<Pomodoro | null> = ref(null);
 const updateData = async (): Promise<void> => {
  history.value = (await selectDB(plugin.value.spaceDBInstance(), pomodoroDB)?.rows) || [];
  currentPomodoro.value = history.value.filter(pomodoro => pomodoro.status === 'ing')[0] || null;
- 
 };
 
 onMounted(async () => {