refactor(ui): getting ride of naive ui buttons

src/ui/theme/theme.models.ts

@@ -0,0 +1,13 @@
+import { useThemeStore } from './theme.store';
+
+export { defineThemes };
+
+function defineThemes<Theme>(themes: { light: Theme; dark: Theme }) {
+  return {
+    themes,
+    useTheme() {
+      const themeStore = useThemeStore();
+      return computed(() => themes[themeStore.themeType]);
+    },
+  };
+}

src/ui/theme/theme.store.ts

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia';
+
+export const useThemeStore = defineStore('ui-theme', {
+  state: () => ({
+    themeType: useStorage<'dark' | 'light'>('ui-store:theme-type', 'dark') as Ref<'dark' | 'light'>,
+  }),
+  getters: {
+    isDarkTheme(): boolean {
+      return this.themeType === 'dark';
+    },
+    isLightTheme(): boolean {
+      return this.themeType === 'light';
+    },
+  },
+  actions: {
+    toggleTheme() {
+      this.themeType = this.isDarkTheme ? 'light' : 'dark';
+    },
+  },
+});

src/ui/theme/themes.ts

@@ -0,0 +1,37 @@
+import { defineThemes } from './theme.models';
+
+export const { themes: appThemes, useTheme: useAppTheme } = defineThemes({
+  light: {
+    text: {
+      baseColor: 'rgb(51, 54, 57)',
+    },
+
+    primary: {
+      color: '#18a058',
+      colorHover: '#1ea54c',
+      colorPressed: '#0C7A43',
+    },
+
+    warning: {
+      color: '#f59e0b',
+      colorHover: '#f59e0b',
+      colorPressed: '#f59e0b',
+    },
+  },
+  dark: {
+    text: {
+      baseColor: 'rgba(255, 255, 255, 0.82)',
+    },
+
+    primary: {
+      color: '#1ea54c',
+      colorHover: '#36AD6A',
+      colorPressed: '#0C7A43',
+    },
+    warning: {
+      color: '#f59e0b',
+      colorHover: '#f59e0b',
+      colorPressed: '#f59e0b',
+    },
+  },
+});