feat: dark theme

Author: YuJianghao

packages/hexon-web/src/components/HButton.vue

@@ -33,7 +33,7 @@ const styleVars = computed(() => {
     case "primary":
       return {
         bgColor: theme.value.color.primary.n,
-        color: theme.value.color.foreground.min,
+        color: theme.value.color.white,
         hoverBgColor: theme.value.color.primary.l2,
         activeBgColor: theme.value.color.primary.l4,
         invertedColor: theme.value.color.primary.n,
@@ -44,7 +44,7 @@ const styleVars = computed(() => {
     case "success":
       return {
         bgColor: theme.value.color.success.n,
-        color: theme.value.color.foreground.min,
+        color: theme.value.color.white,
         hoverBgColor: theme.value.color.success.l2,
         activeBgColor: theme.value.color.success.l4,
         invertedColor: theme.value.color.success.n,
@@ -55,7 +55,7 @@ const styleVars = computed(() => {
     case "error":
       return {
         bgColor: theme.value.color.error.n,
-        color: theme.value.color.foreground.min,
+        color: theme.value.color.white,
         hoverBgColor: theme.value.color.error.l2,
         activeBgColor: theme.value.color.error.l4,
         invertedColor: theme.value.color.error.n,
@@ -66,7 +66,7 @@ const styleVars = computed(() => {
     case "warning":
       return {
         bgColor: theme.value.color.warning.n,
-        color: theme.value.color.foreground.min,
+        color: theme.value.color.white,
         hoverBgColor: theme.value.color.warning.l2,
         activeBgColor: theme.value.color.warning.l4,
         invertedColor: theme.value.color.warning.n,
@@ -77,7 +77,7 @@ const styleVars = computed(() => {
     case "common":
       return {
         bgColor: theme.value.color.common.n,
-        color: theme.value.color.foreground.min,
+        color: theme.value.color.white,
         hoverBgColor: theme.value.color.common.l2,
         activeBgColor: theme.value.color.common.l4,
         invertedColor: theme.value.color.common.n,
@@ -88,7 +88,7 @@ const styleVars = computed(() => {
     default:
       return {
         bgColor: theme.value.color.common.n,
-        color: theme.value.color.foreground.min,
+        color: theme.value.color.white,
         hoverBgColor: theme.value.color.common.l2,
         activeBgColor: theme.value.color.common.l4,
         invertedColor: theme.value.color.common.n,

packages/hexon-web/src/themes.ts

@@ -65,6 +65,8 @@ export type HTheme = {
     post: string;
     page: string;
     draft: string;
+    black: string;
+    white: string;
     background: {
       transparent: string;
       hover: string;
@@ -107,7 +109,7 @@ export type HTheme = {
   };
 };
 
-export const blueTheme: HTheme = {
+export const lightTheme: HTheme = {
   color: {
     primary: createColor("#3498db"),
     success: createColor("#27ae60"),
@@ -119,6 +121,8 @@ export const blueTheme: HTheme = {
     post: "#3883c7",
     page: "#52bad1",
     draft: "#f1c40f",
+    black: "#000000",
+    white: "#ffffff",
     background: {
       transparent: "transparent",
       hover: "#00000015",
@@ -140,4 +144,39 @@ export const blueTheme: HTheme = {
   },
 };
 
-export default createTheme({ default: blueTheme });
+export const darkTheme: HTheme = {
+  color: {
+    primary: createColor("#3498db"),
+    success: createColor("#27ae60"),
+    warning: createColor("#f39c12"),
+    error: createColor("#e74c3c"),
+    common: createColor("#888888"),
+    folder: "#f3c04f",
+    all: "#27ae60",
+    post: "#3883c7",
+    page: "#52bad1",
+    draft: "#f1c40f",
+    black: "#000000",
+    white: "#ffffff",
+    background: {
+      transparent: "transparent",
+      hover: "#ffffff15",
+      active: "#ffffff20",
+      selected: "#ffffff10",
+      base1: "#323232",
+      base2: "#282828",
+      base3: "#1f1f1f",
+      badge: "#222222",
+      max: "#000000",
+      min: "#ffffff",
+    },
+    foreground: {
+      main: "#dddddd",
+      sub: "#a9a9a9",
+      max: "#ffffff",
+      min: "#000000",
+    },
+  },
+};
+
+export default createTheme({ default: lightTheme, dark: darkTheme });