From 50a59a124a5a3df38f8b0d8c9a41e93cd3ca11bc Mon Sep 17 00:00:00 2001 From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com> Date: Wed, 14 Jan 2026 23:00:07 +0800 Subject: [PATCH] :sparkles: Feature(custom): support theme system and add a new theme hub for piclist --- package.json | 5 +- resources/theme/360.css | 49 ++ resources/theme/Catppuccin.css | 50 ++ resources/theme/CoolApk.css | 48 ++ resources/theme/Cupertino.css | 51 ++ resources/theme/Huorong.css | 49 ++ resources/theme/adwaita.css | 51 ++ resources/theme/anime.css | 57 +++ resources/theme/bilibili.css | 51 ++ resources/theme/default.css | 51 ++ resources/theme/gemini.css | 50 ++ resources/theme/wechat.css | 51 ++ resources/theme/win11.css | 51 ++ src/main/apis/app/theme/index.ts | 81 ++++ src/main/apis/app/window/windowList.ts | 5 + src/main/events/rpc/routes/system/app.ts | 52 +- src/main/lifeCycle/index.ts | 9 +- src/main/utils/beforeOpen.ts | 50 +- src/main/utils/configPaths.ts | 6 + src/main/utils/enum.ts | 7 + src/renderer/App.vue | 29 +- src/renderer/components/InputBoxDialog.vue | 333 +------------ .../components/css/ImageProcessSetting.css | 204 +------- src/renderer/components/css/InputBox.css | 232 +++++++++ .../components/css/NavigationPage.css | 82 +--- .../components/css/PerPicbedSetting.css | 98 +--- .../components/css/UnifiedConfigForm.css | 65 +-- .../components/ui/ConfirmMessageBox.vue | 69 --- src/renderer/components/ui/MessageToast.vue | 22 - src/renderer/components/ui/ThemeSwitcher.vue | 49 +- src/renderer/components/ui/TitleBar.vue | 14 - src/renderer/hooks/useAppStore.ts | 80 --- src/renderer/i18n/locales/en.json | 9 + src/renderer/i18n/locales/zh-CN.json | 9 + src/renderer/i18n/locales/zh-TW.json | 9 + src/renderer/layouts/Main.vue | 86 +--- src/renderer/main.ts | 3 + .../manage/components/CustomSwitch.vue | 18 +- src/renderer/manage/pages/css/BucketPage.css | 30 +- src/renderer/manage/pages/css/LoginPage.css | 12 +- .../manage/pages/css/ManageSetting.css | 28 +- src/renderer/pages/PicGoSetting.vue | 98 ++++ src/renderer/pages/RenamePage.vue | 8 - src/renderer/pages/Upload.vue | 6 +- src/renderer/pages/css/Gallery.css | 6 +- src/renderer/pages/css/PicgoSetting.css | 459 +++--------------- src/renderer/pages/css/PluginPage.css | 66 +-- src/renderer/pages/css/UploadPage.css | 59 +-- src/renderer/pages/css/UploaderConfigPage.css | 10 +- src/renderer/pages/picbeds/Picbeds.css | 22 +- src/renderer/pages/picbeds/index.vue | 3 - src/renderer/utils/configPaths.ts | 2 + src/renderer/utils/enum.ts | 4 + src/universal/types/view.d.ts | 1 + yarn.lock | 12 + 55 files changed, 1440 insertions(+), 1621 deletions(-) create mode 100644 resources/theme/360.css create mode 100644 resources/theme/Catppuccin.css create mode 100644 resources/theme/CoolApk.css create mode 100644 resources/theme/Cupertino.css create mode 100644 resources/theme/Huorong.css create mode 100644 resources/theme/adwaita.css create mode 100644 resources/theme/anime.css create mode 100644 resources/theme/bilibili.css create mode 100644 resources/theme/default.css create mode 100644 resources/theme/gemini.css create mode 100644 resources/theme/wechat.css create mode 100644 resources/theme/win11.css create mode 100644 src/main/apis/app/theme/index.ts create mode 100644 src/renderer/components/css/InputBox.css delete mode 100644 src/renderer/hooks/useAppStore.ts diff --git a/package.json b/package.json index 44f59044..4f02efba 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "lint:dpdm:renderer": "dpdm -T --tsconfig ./tsconfig.json --no-tree --no-warning --exit-code circular:1 src/renderer/main.ts", "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx,.vue src/ scripts/ .", "lint:style": "stylelint \"src/**/*.(vue|less|scss|css)\" --fix", + "lint:style:themes": "stylelint \"resources/theme/*.css\" --fix", "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps", "prebuild": "electron-vite build", @@ -50,6 +51,7 @@ "@piclist/store": "^3.0.1", "@smithy/node-http-handler": "^4.4.7", "@vueuse/core": "^14.1.0", + "adm-zip": "^0.5.16", "ali-oss": "^6.23.0", "axios": "^1.13.2", "chalk": "^5.6.2", @@ -89,6 +91,7 @@ "@headlessui/vue": "^1.7.23", "@highlightjs/vue-plugin": "^2.1.2", "@intlify/unplugin-vue-i18n": "^11.0.3", + "@types/adm-zip": "^0.5.7", "@types/ali-oss": "^6.23.0", "@types/fs-extra": "^11.0.4", "@types/js-yaml": "^4.0.9", @@ -118,9 +121,9 @@ "eslint-plugin-unicorn": "^62.0.0", "eslint-plugin-vue": "^10.6.2", "globals": "^16.5.0", - "js-yaml": "^4.1.1", "highlight.js": "^11.11.1", "husky": "^9.1.7", + "js-yaml": "^4.1.1", "lucide-vue-next": "^0.562.0", "node-bump-version": "^2.0.0", "pinia": "^3.0.4", diff --git a/resources/theme/360.css b/resources/theme/360.css new file mode 100644 index 00000000..9c10100b --- /dev/null +++ b/resources/theme/360.css @@ -0,0 +1,49 @@ +/* 360 */ + +.dark, [data-theme="dark"] { + --color-text-primary: #f5f5f7 !important; + --color-text-secondary: #a1a1a6 !important; + --color-text-tertiary: #86868b !important; + --color-background-primary: #1c1c1e !important; + --color-background-secondary: #2c2c2e !important; + --color-background-tertiary: #3a3a3c !important; + --color-surface: rgb(44 44 46 / 80%) !important; + --color-surface-elevated: rgb(58 58 60 / 95%) !important; + --color-border: rgb(255 255 255 / 10%) !important; + --color-border-secondary: rgb(255 255 255 / 5%) !important; + --color-primary: #19b400 !important; + --color-primary-hover: #23d100 !important; + --color-accent: #19b400 !important; + --color-accent-hover: #23d100 !important; + --accent-rgb: 25, 180, 0 !important; + --color-blue-common: #19b400 !important; + --color-light-blue: rgb(25 180 0 / 10%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #1d1d1f !important; + --color-text-secondary: #6e6e73 !important; + --color-text-tertiary: #86868b !important; + --color-background-primary: #ffffff !important; + --color-background-secondary: #f5f5f7 !important; + --color-background-tertiary: #fbfbfd !important; + --color-surface: rgb(255 255 255 / 80%) !important; + --color-surface-elevated: rgb(255 255 255 / 95%) !important; + --color-border: rgb(0 0 0 / 10%) !important; + --color-border-secondary: rgb(0 0 0 / 5%) !important; + --color-primary: #19b400 !important; + --color-primary-hover: #159400 !important; + --color-accent: #19b400 !important; + --color-accent-hover: #159400 !important; + --accent-rgb: 25, 180, 0 !important; + --color-blue-common: #19b400 !important; + --color-light-blue: rgb(25 180 0 / 10%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; +} diff --git a/resources/theme/Catppuccin.css b/resources/theme/Catppuccin.css new file mode 100644 index 00000000..8ff1b3c7 --- /dev/null +++ b/resources/theme/Catppuccin.css @@ -0,0 +1,50 @@ +/* Catppuccin */ +.dark, [data-theme="dark"] { + --color-text-primary: #cdd6f4 !important; + --color-text-secondary: #a6adc8 !important; + --color-text-tertiary: #a6adc8 !important; + --color-background-primary: #1e1e2e !important; + --color-background-secondary: #181825 !important; + --color-background-tertiary: #11111b !important; + --color-surface: rgb(49 50 68 / 80%) !important; + --color-surface-elevated: rgb(49 50 68 / 95%) !important; + --color-border: #45475a !important; + --color-border-secondary: rgb(69 71 90 / 50%) !important; + --color-primary: #89b4fa !important; + --color-primary-hover: #b4befe !important; + --color-accent: #cba6f7 !important; + --color-accent-hover: #f5c2e7 !important; + --accent-rgb: 203, 166, 247 !important; + --color-blue-common: #89b4fa !important; + --color-light-blue: rgb(137 180 250 / 10%) !important; + --color-success: #a6e3a1 !important; + --color-warning: #f9e2af !important; + --color-danger: #f38ba8 !important; + --color-error: #f38ba8 !important; + --color-error-surface: rgb(243 139 168 / 10%) !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #4c4f69 !important; + --color-text-secondary: #5c5f77 !important; + --color-text-tertiary: #6c6f85 !important; + --color-background-primary: #eff1f5 !important; + --color-background-secondary: #e6e9ef !important; + --color-background-tertiary: #dce0e8 !important; + --color-surface: rgb(255 255 255 / 80%) !important; + --color-surface-elevated: rgb(255 255 255 / 95%) !important; + --color-border: #bcc0cc !important; + --color-border-secondary: rgb(188 192 204 / 50%) !important; + --color-primary: #1e66f5 !important; + --color-primary-hover: #7287fd !important; + --color-accent: #8839ef !important; + --color-accent-hover: #ea76cb !important; + --accent-rgb: 136, 57, 239 !important; + --color-blue-common: #1e66f5 !important; + --color-light-blue: rgb(30 102 245 / 10%) !important; + --color-success: #40a02b !important; + --color-warning: #df8e1d !important; + --color-danger: #d20f39 !important; + --color-error: #d20f39 !important; + --color-error-surface: rgb(210 15 57 / 10%) !important; +} diff --git a/resources/theme/CoolApk.css b/resources/theme/CoolApk.css new file mode 100644 index 00000000..98dcf860 --- /dev/null +++ b/resources/theme/CoolApk.css @@ -0,0 +1,48 @@ +/* CoolApk */ +.dark, [data-theme="dark"] { + --color-text-primary: #f5f5f7 !important; + --color-text-secondary: #a1a1a6 !important; + --color-text-tertiary: #86868b !important; + --color-background-primary: #1c1c1e !important; + --color-background-secondary: #2c2c2e !important; + --color-background-tertiary: #3a3a3c !important; + --color-surface: rgb(44 44 46 / 80%) !important; + --color-surface-elevated: rgb(58 58 60 / 95%) !important; + --color-border: rgb(255 255 255 / 10%) !important; + --color-border-secondary: rgb(255 255 255 / 5%) !important; + --color-primary: #0bb976 !important; + --color-primary-hover: #20df94 !important; + --color-accent: #0bb976 !important; + --color-accent-hover: #20df94 !important; + --accent-rgb: 11, 185, 118 !important; + --color-blue-common: #0bb976 !important; + --color-light-blue: rgb(11 185 118 / 10%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #1d1d1f !important; + --color-text-secondary: #6e6e73 !important; + --color-text-tertiary: #86868b !important; + --color-background-primary: #ffffff !important; + --color-background-secondary: #f5f5f7 !important; + --color-background-tertiary: #fbfbfd !important; + --color-surface: rgb(255 255 255 / 80%) !important; + --color-surface-elevated: rgb(255 255 255 / 95%) !important; + --color-border: rgb(0 0 0 / 10%) !important; + --color-border-secondary: rgb(0 0 0 / 5%) !important; + --color-primary: #0bb976 !important; + --color-primary-hover: #078c58 !important; + --color-accent: #0bb976 !important; + --color-accent-hover: #078c58 !important; + --accent-rgb: 11, 185, 118 !important; + --color-blue-common: #0bb976 !important; + --color-light-blue: rgb(11 185 118 / 10%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; +} diff --git a/resources/theme/Cupertino.css b/resources/theme/Cupertino.css new file mode 100644 index 00000000..ccdb3838 --- /dev/null +++ b/resources/theme/Cupertino.css @@ -0,0 +1,51 @@ +/* Cupertino */ + +.dark, [data-theme="dark"] { + --color-text-primary: #ffffff !important; + --color-text-secondary: #ebebf5 !important; + --color-text-tertiary: #ebebf5 !important; + --color-background-primary: #1e1e1e !important; + --color-background-secondary: #2c2c2e !important; + --color-background-tertiary: #3a3a3c !important; + --color-surface: rgb(44 44 46 / 90%) !important; + --color-surface-elevated: rgb(58 58 60 / 95%) !important; + --color-border: #38383a !important; + --color-border-secondary: rgb(56 56 58 / 50%) !important; + --color-primary: #0a84ff !important; + --color-primary-hover: #409cff !important; + --color-accent: #0a84ff !important; + --color-accent-hover: #409cff !important; + --accent-rgb: 10, 132, 255 !important; + --color-blue-common: #0a84ff !important; + --color-light-blue: rgb(10 132 255 / 10%) !important; + --color-success: #32d74b !important; + --color-warning: #ff9f0a !important; + --color-danger: #ff453a !important; + --color-error: #ff453a !important; + --color-error-surface: rgb(255 69 58 / 10%) !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #000000 !important; + --color-text-secondary: #3c3c43 !important; + --color-text-tertiary: #3c3c43 !important; + --color-background-primary: #ffffff !important; + --color-background-secondary: #f2f2f7 !important; + --color-background-tertiary: #ffffff !important; + --color-surface: rgb(255 255 255 / 90%) !important; + --color-surface-elevated: rgb(255 255 255 / 100%) !important; + --color-border: #d1d1d6 !important; + --color-border-secondary: rgb(209 209 214 / 50%) !important; + --color-primary: #007aff !important; + --color-primary-hover: #0051a8 !important; + --color-accent: #007aff !important; + --color-accent-hover: #0051a8 !important; + --accent-rgb: 0, 122, 255 !important; + --color-blue-common: #007aff !important; + --color-light-blue: rgb(0 122 255 / 10%) !important; + --color-success: #34c759 !important; + --color-warning: #ff9500 !important; + --color-danger: #ff3b30 !important; + --color-error: #ff3b30 !important; + --color-error-surface: rgb(255 59 48 / 10%) !important; +} diff --git a/resources/theme/Huorong.css b/resources/theme/Huorong.css new file mode 100644 index 00000000..0ba572c1 --- /dev/null +++ b/resources/theme/Huorong.css @@ -0,0 +1,49 @@ +/* 火绒 */ + +.dark, [data-theme="dark"] { + --color-text-primary: #f5f5f7 !important; + --color-text-secondary: #a1a1a6 !important; + --color-text-tertiary: #86868b !important; + --color-background-primary: #1c1c1e !important; + --color-background-secondary: #2c2c2e !important; + --color-background-tertiary: #3a3a3c !important; + --color-surface: rgb(44 44 46 / 80%) !important; + --color-surface-elevated: rgb(58 58 60 / 95%) !important; + --color-border: rgb(255 255 255 / 10%) !important; + --color-border-secondary: rgb(255 255 255 / 5%) !important; + --color-primary: #fa8b15 !important; + --color-primary-hover: #ff9f38 !important; + --color-accent: #fa8b15 !important; + --color-accent-hover: #ff9f38 !important; + --accent-rgb: 250, 139, 21 !important; + --color-blue-common: #fa8b15 !important; + --color-light-blue: rgb(250 139 21 / 10%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #1d1d1f !important; + --color-text-secondary: #6e6e73 !important; + --color-text-tertiary: #86868b !important; + --color-background-primary: #ffffff !important; + --color-background-secondary: #f5f5f7 !important; + --color-background-tertiary: #fbfbfd !important; + --color-surface: rgb(255 255 255 / 80%) !important; + --color-surface-elevated: rgb(255 255 255 / 95%) !important; + --color-border: rgb(0 0 0 / 10%) !important; + --color-border-secondary: rgb(0 0 0 / 5%) !important; + --color-primary: #fa8b15 !important; + --color-primary-hover: #d9770e !important; + --color-accent: #fa8b15 !important; + --color-accent-hover: #d9770e !important; + --accent-rgb: 250, 139, 21 !important; + --color-blue-common: #fa8b15 !important; + --color-light-blue: rgb(250 139 21 / 10%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; +} diff --git a/resources/theme/adwaita.css b/resources/theme/adwaita.css new file mode 100644 index 00000000..04356543 --- /dev/null +++ b/resources/theme/adwaita.css @@ -0,0 +1,51 @@ +/* Adwaita */ + +.dark, [data-theme="dark"] { + --color-text-primary: #eeeeec !important; + --color-text-secondary: #9a9996 !important; + --color-text-tertiary: #77767b !important; + --color-background-primary: #242424 !important; + --color-background-secondary: #303030 !important; + --color-background-tertiary: #1e1e1e !important; + --color-surface: rgb(48 48 48 / 90%) !important; + --color-surface-elevated: rgb(56 56 56 / 95%) !important; + --color-border: #1b1b1b !important; + --color-border-secondary: rgb(27 27 27 / 50%) !important; + --color-primary: #3584e4 !important; + --color-primary-hover: #62a0ea !important; + --color-accent: #3584e4 !important; + --color-accent-hover: #62a0ea !important; + --accent-rgb: 53, 132, 228 !important; + --color-blue-common: #3584e4 !important; + --color-light-blue: rgb(53 132 228 / 10%) !important; + --color-success: #33d17a !important; + --color-warning: #f29c37 !important; + --color-danger: #e01b24 !important; + --color-error: #c01c28 !important; + --color-error-surface: rgb(192 28 40 / 10%) !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #2e3436 !important; + --color-text-secondary: #5e5c64 !important; + --color-text-tertiary: #9a9996 !important; + --color-background-primary: #fafafa !important; + --color-background-secondary: #f6f5f4 !important; + --color-background-tertiary: #ffffff !important; + --color-surface: rgb(255 255 255 / 90%) !important; + --color-surface-elevated: rgb(255 255 255 / 100%) !important; + --color-border: #cdc7c2 !important; + --color-border-secondary: rgb(205 199 194 / 50%) !important; + --color-primary: #3584e4 !important; + --color-primary-hover: #1c71d8 !important; + --color-accent: #3584e4 !important; + --color-accent-hover: #1c71d8 !important; + --accent-rgb: 53, 132, 228 !important; + --color-blue-common: #3584e4 !important; + --color-light-blue: rgb(53 132 228 / 10%) !important; + --color-success: #26a269 !important; + --color-warning: #e66100 !important; + --color-danger: #c01c28 !important; + --color-error: #a51d2d !important; + --color-error-surface: rgb(165 29 45 / 10%) !important; +} diff --git a/resources/theme/anime.css b/resources/theme/anime.css new file mode 100644 index 00000000..557c23ec --- /dev/null +++ b/resources/theme/anime.css @@ -0,0 +1,57 @@ +/* 二次元 */ + +.dark, [data-theme="dark"] { + --background-image: url("https://w.wallhaven.cc/full/gj/wallhaven-gje69q.png") !important; + --background-image-opacity: 0.7 !important; + --background-blur: blur(5px) !important; + --color-text-primary: #f2cee2 !important; + --color-text-secondary: #d4a5c0 !important; + --color-text-tertiary: #b080a0 !important; + --color-background-primary: transparent !important; + --color-background-secondary: transparent !important; + --color-background-tertiary: #402834 !important; + --color-surface: #4f3d47cd !important; + --color-surface-elevated: rgb(220 220 220 / 50%) !important; + --color-border: #6d4c5e !important; + --color-border-secondary: #efd0d671 !important; + --color-primary: #ffb7c5 !important; + --color-primary-hover: #ffcfd8 !important; + --color-accent: #23ade0 !important; + --color-accent-hover: #0c9bcb !important; + --accent-rgb: 255, 183, 197 !important; + --color-blue-common: #a0e6ff !important; + --color-light-blue: rgb(160 230 255 / 10%) !important; + --color-success: #98e8b1 !important; + --color-warning: #ffe69c !important; + --color-danger: #ff99aa !important; + --color-error: #ff99aa !important; + --color-error-surface: rgb(255 153 170 / 10%) !important; +} + +.light, [data-theme="light"] { + --background-image: url("https://w.wallhaven.cc/full/2k/wallhaven-2ky11m.png") !important; + --background-image-opacity: 0.7 !important; + --background-blur: blur(5px) !important; + --color-text-primary: #5c3a49 !important; + --color-text-secondary: #8c6075 !important; + --color-text-tertiary: #b080a0 !important; + --color-background-primary: transparent !important; + --color-background-secondary: transparent !important; + --color-background-tertiary: #ffe0eb !important; + --color-surface: rgb(255 255 255 / 60%) !important; + --color-surface-elevated: rgb(255 255 255 / 90%) !important; + --color-border: #f8c2d6 !important; + --color-border-secondary: rgb(248 194 214 / 50%) !important; + --color-primary: #ff85a2 !important; + --color-primary-hover: #ff6085 !important; + --color-accent: #60c3eb !important; + --color-accent-hover: #3daade !important; + --accent-rgb: 255, 133, 162 !important; + --color-blue-common: #60c3eb !important; + --color-light-blue: rgb(96 195 235 / 10%) !important; + --color-success: #55c97b !important; + --color-warning: #ffcf5c !important; + --color-danger: #ff6b85 !important; + --color-error: #ff6b85 !important; + --color-error-surface: rgb(255 107 133 / 10%) !important; +} diff --git a/resources/theme/bilibili.css b/resources/theme/bilibili.css new file mode 100644 index 00000000..4f35e03d --- /dev/null +++ b/resources/theme/bilibili.css @@ -0,0 +1,51 @@ +/* Bilibili */ + +.dark, [data-theme="dark"] { + --color-text-primary: #ffffff !important; + --color-text-secondary: #eeeeee !important; + --color-text-tertiary: #999999 !important; + --color-background-primary: #222222 !important; + --color-background-secondary: #333333 !important; + --color-background-tertiary: #1a1a1a !important; + --color-surface: rgb(51 51 51 / 90%) !important; + --color-surface-elevated: rgb(60 60 60 / 95%) !important; + --color-border: #444444 !important; + --color-border-secondary: rgb(68 68 68 / 50%) !important; + --color-primary: #fb7299 !important; + --color-primary-hover: #ff85a7 !important; + --color-accent: #fb7299 !important; + --color-accent-hover: #ff85a7 !important; + --accent-rgb: 251, 114, 153 !important; + --color-blue-common: #fb7299 !important; + --color-light-blue: rgb(251 114 153 / 10%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; + --color-error-surface: rgb(255 59 48 / 10%) !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #18191c !important; + --color-text-secondary: #61666d !important; + --color-text-tertiary: #9499a0 !important; + --color-background-primary: #ffffff !important; + --color-background-secondary: #f6f7f8 !important; + --color-background-tertiary: #f1f2f3 !important; + --color-surface: rgb(255 255 255 / 90%) !important; + --color-surface-elevated: rgb(255 255 255 / 100%) !important; + --color-border: #e3e5e7 !important; + --color-border-secondary: rgb(227 229 231 / 50%) !important; + --color-primary: #fb7299 !important; + --color-primary-hover: #c45674 !important; + --color-accent: #fb7299 !important; + --color-accent-hover: #c45674 !important; + --accent-rgb: 251, 114, 153 !important; + --color-blue-common: #fb7299 !important; + --color-light-blue: rgb(251 114 153 / 5%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; + --color-error-surface: rgb(255 59 48 / 10%) !important; +} diff --git a/resources/theme/default.css b/resources/theme/default.css new file mode 100644 index 00000000..1a89eb67 --- /dev/null +++ b/resources/theme/default.css @@ -0,0 +1,51 @@ +/* 默认 */ + +.dark, [data-theme="dark"] { + --color-text-primary: #f5f5f7 !important; + --color-text-secondary: #a1a1a6 !important; + --color-text-tertiary: #86868b !important; + --color-background-primary: #000000 !important; + --color-background-secondary: #1c1c1e !important; + --color-background-tertiary: #2c2c2e !important; + --color-surface: rgb(28 28 30 / 80%) !important; + --color-surface-elevated: rgb(44 44 46 / 95%) !important; + --color-border: rgb(255 255 255 / 10%) !important; + --color-border-secondary: rgb(255 255 255 / 5%) !important; + --color-primary: #6366f1 !important; + --color-primary-hover: #818cf8 !important; + --color-accent: #0a84ff !important; + --color-accent-hover: #409cff !important; + --accent-rgb: #449af7 !important; + --color-blue-common: #409eff !important; + --color-light-blue: rgb(0 122 255 / 5%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; + --color-error-surface: rgb(255 59 48 / 10%) !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #1d1d1f !important; + --color-text-secondary: #6e6e73 !important; + --color-text-tertiary: #86868b !important; + --color-background-primary: #ffffff !important; + --color-background-secondary: #f5f5f7 !important; + --color-background-tertiary: #fbfbfd !important; + --color-surface: rgb(255 255 255 / 80%) !important; + --color-surface-elevated: rgb(255 255 255 / 95%) !important; + --color-border: rgb(0 0 0 / 10%) !important; + --color-border-secondary: rgb(0 0 0 / 5%) !important; + --color-primary: #6366f1 !important; + --color-primary-hover: #4f46e5 !important; + --color-accent: #007aff !important; + --color-accent-hover: #3b82f6 !important; + --accent-rgb: #449af7 !important; + --color-blue-common: #409eff !important; + --color-light-blue: rgb(0 122 255 / 5%) !important; + --color-success: #34c759 !important; + --color-warning: #f1930f !important; + --color-danger: #ff3b30 !important; + --color-error: #cb2431 !important; + --color-error-surface: rgb(255 59 48 / 10%) !important; +} diff --git a/resources/theme/gemini.css b/resources/theme/gemini.css new file mode 100644 index 00000000..4c91ffba --- /dev/null +++ b/resources/theme/gemini.css @@ -0,0 +1,50 @@ +/* Gemini */ +.dark, [data-theme="dark"] { + --color-text-primary: #e3e3e3 !important; + --color-text-secondary: #c4c7c5 !important; + --color-text-tertiary: #a8c7fa !important; + --color-background-primary: #131314 !important; + --color-background-secondary: #1e1f20 !important; + --color-background-tertiary: #2e2f31 !important; + --color-surface: rgb(30 31 32 / 90%) !important; + --color-surface-elevated: rgb(40 41 42 / 95%) !important; + --color-border: #444746 !important; + --color-border-secondary: rgb(68 71 70 / 50%) !important; + --color-primary: #a8c7fa !important; + --color-primary-hover: #d2e3fc !important; + --color-accent: #a8c7fa !important; + --color-accent-hover: #d2e3fc !important; + --accent-rgb: 168, 199, 250 !important; + --color-blue-common: #a8c7fa !important; + --color-light-blue: rgb(168 199 250 / 10%) !important; + --color-success: #6dd58c !important; + --color-warning: #fdc365 !important; + --color-danger: #f28b82 !important; + --color-error: #f28b82 !important; + --color-error-surface: rgb(242 139 130 / 10%) !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #1f1f1f !important; + --color-text-secondary: #444746 !important; + --color-text-tertiary: #0b57d0 !important; + --color-background-primary: #ffffff !important; + --color-background-secondary: #f0f4f9 !important; + --color-background-tertiary: #e9eef6 !important; + --color-surface: rgb(255 255 255 / 90%) !important; + --color-surface-elevated: rgb(240 244 249 / 100%) !important; + --color-border: #e0e3e1 !important; + --color-border-secondary: rgb(224 227 225 / 50%) !important; + --color-primary: #0b57d0 !important; + --color-primary-hover: #0842a0 !important; + --color-accent: #0b57d0 !important; + --color-accent-hover: #0842a0 !important; + --accent-rgb: 11, 87, 208 !important; + --color-blue-common: #0b57d0 !important; + --color-light-blue: rgb(11 87 208 / 10%) !important; + --color-success: #1e8e3e !important; + --color-warning: #e37400 !important; + --color-danger: #d93025 !important; + --color-error: #d93025 !important; + --color-error-surface: rgb(217 48 37 / 10%) !important; +} diff --git a/resources/theme/wechat.css b/resources/theme/wechat.css new file mode 100644 index 00000000..3f9e27e6 --- /dev/null +++ b/resources/theme/wechat.css @@ -0,0 +1,51 @@ +/* 微信 */ + +.dark, [data-theme="dark"] { + --color-text-primary: #ffffff !important; + --color-text-secondary: #7d7d7d !important; + --color-text-tertiary: #4c4c4c !important; + --color-background-primary: #191919 !important; + --color-background-secondary: #242424 !important; + --color-background-tertiary: #111111 !important; + --color-surface: rgb(36 36 36 / 90%) !important; + --color-surface-elevated: rgb(42 42 42 / 95%) !important; + --color-border: #333333 !important; + --color-border-secondary: rgb(51 51 51 / 50%) !important; + --color-primary: #07c160 !important; + --color-primary-hover: #06ad56 !important; + --color-accent: #07c160 !important; + --color-accent-hover: #06ad56 !important; + --accent-rgb: 7, 193, 96 !important; + --color-blue-common: #07c160 !important; + --color-light-blue: rgb(7 193 96 / 10%) !important; + --color-success: #07c160 !important; + --color-warning: #ffbe00 !important; + --color-danger: #fa5151 !important; + --color-error: #fa5151 !important; + --color-error-surface: rgb(250 81 81 / 10%) !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #000000 !important; + --color-text-secondary: #b2b2b2 !important; + --color-text-tertiary: #999999 !important; + --color-background-primary: #f5f5f5 !important; + --color-background-secondary: #eaeaea !important; + --color-background-tertiary: #ffffff !important; + --color-surface: rgb(255 255 255 / 90%) !important; + --color-surface-elevated: rgb(255 255 255 / 100%) !important; + --color-border: #d6d6d6 !important; + --color-border-secondary: rgb(214 214 214 / 50%) !important; + --color-primary: #07c160 !important; + --color-primary-hover: #06ad56 !important; + --color-accent: #07c160 !important; + --color-accent-hover: #06ad56 !important; + --accent-rgb: 7, 193, 96 !important; + --color-blue-common: #07c160 !important; + --color-light-blue: rgb(7 193 96 / 10%) !important; + --color-success: #07c160 !important; + --color-warning: #ffbe00 !important; + --color-danger: #fa5151 !important; + --color-error: #fa5151 !important; + --color-error-surface: rgb(250 81 81 / 10%) !important; +} diff --git a/resources/theme/win11.css b/resources/theme/win11.css new file mode 100644 index 00000000..9743caf2 --- /dev/null +++ b/resources/theme/win11.css @@ -0,0 +1,51 @@ +/* Windows 11 */ + +.dark, [data-theme="dark"] { + --color-text-primary: #ffffff !important; + --color-text-secondary: #cccccc !important; + --color-text-tertiary: #999999 !important; + --color-background-primary: #202020 !important; + --color-background-secondary: #2b2b2b !important; + --color-background-tertiary: #1f1f1f !important; + --color-surface: rgb(44 44 44 / 90%) !important; + --color-surface-elevated: rgb(50 50 50 / 95%) !important; + --color-border: #333333 !important; + --color-border-secondary: rgb(51 51 51 / 50%) !important; + --color-primary: #60cdff !important; + --color-primary-hover: #98e7ff !important; + --color-accent: #60cdff !important; + --color-accent-hover: #98e7ff !important; + --accent-rgb: 96, 205, 255 !important; + --color-blue-common: #60cdff !important; + --color-light-blue: rgb(96 205 255 / 10%) !important; + --color-success: #6cc4a1 !important; + --color-warning: #fce100 !important; + --color-danger: #ff99a4 !important; + --color-error: #ff99a4 !important; + --color-error-surface: rgb(255 153 164 / 10%) !important; +} + +.light, [data-theme="light"] { + --color-text-primary: #000000 !important; + --color-text-secondary: #5d5d5d !important; + --color-text-tertiary: #767676 !important; + --color-background-primary: #ffffff !important; + --color-background-secondary: #f3f3f3 !important; + --color-background-tertiary: #eeeeee !important; + --color-surface: rgb(255 255 255 / 90%) !important; + --color-surface-elevated: rgb(255 255 255 / 100%) !important; + --color-border: #e5e5e5 !important; + --color-border-secondary: rgb(229 229 229 / 50%) !important; + --color-primary: #005fb8 !important; + --color-primary-hover: #004578 !important; + --color-accent: #005fb8 !important; + --color-accent-hover: #004578 !important; + --accent-rgb: 0, 95, 184 !important; + --color-blue-common: #005fb8 !important; + --color-light-blue: rgb(0 95 184 / 10%) !important; + --color-success: #0f7b0f !important; + --color-warning: #9d5d00 !important; + --color-danger: #c50f1f !important; + --color-error: #c50f1f !important; + --color-error-surface: rgb(197 15 31 / 10%) !important; +} diff --git a/src/main/apis/app/theme/index.ts b/src/main/apis/app/theme/index.ts new file mode 100644 index 00000000..92ccc703 --- /dev/null +++ b/src/main/apis/app/theme/index.ts @@ -0,0 +1,81 @@ +import path from 'node:path' + +import { themesDir } from '@core/datastore/dirs' +import * as fsWalk from '@nodelib/fs.walk' +import AdmZip from 'adm-zip' +import windowManager from 'apis/app/window/windowManager' +import axios from 'axios' +import fs from 'fs-extra' + +import { IWindowList } from '~/utils/enum' + +let insertedCSSKeyMain: string | undefined + +export async function resolveThemes(): Promise<{ key: string; label: string }[]> { + const files = fsWalk.walkSync(themesDir(), { + followSymbolicLinks: true, + fs, + stats: true, + throwErrorOnBrokenSymbolicLink: false, + }) + const result: string[] = [] + files.forEach(item => { + if (item.stats?.isFile()) { + result.push(item.path.replace(themesDir() + '/', '')) + } + }) + const themes = await Promise.all( + result + .filter(file => file.endsWith('.css')) + .map(async file => { + const css = (await fs.readFile(file, 'utf-8')) || '' + let name = file + if (css.startsWith('/*')) { + name = css.split('\n')[0].replace('/*', '').replace('*/', '').trim() || file + } + return { key: file, label: name } + }), + ) + if (themes.find(theme => theme.key === 'default.css')) { + return themes + } else { + return [{ key: 'default.css', label: '默认' }, ...themes] + } +} + +export async function fetchThemes(): Promise { + const zipUrl = 'https://github.com/Kuingsmile/piclist-themeHub/releases/download/latest/themes.zip' + const zipData = await axios.get(zipUrl, { + responseType: 'arraybuffer', + headers: { 'Content-Type': 'application/octet-stream' }, + }) + const zip = new AdmZip(zipData.data as Buffer) + zip.extractAllTo(themesDir(), true) +} + +export async function importThemes(files: string[]): Promise { + for (const file of files) { + if (fs.existsSync(file)) + await fs.copyFile(file, path.join(themesDir(), `${new Date().getTime().toString(16)}-${path.basename(file)}`)) + } +} + +export async function readTheme(theme: string): Promise { + if (!fs.existsSync(path.join(themesDir(), theme))) return '' + const result = await fs.readFile(path.join(themesDir(), theme), 'utf-8') + return result +} + +export async function applyTheme(theme: string): Promise { + theme = path.basename(theme) + console.log('Applying theme:', theme) + const css = await readTheme(theme) + if (windowManager.has(IWindowList.SETTING_WINDOW)) { + try { + await windowManager.get(IWindowList.SETTING_WINDOW)?.webContents.removeInsertedCSS(insertedCSSKeyMain || '') + insertedCSSKeyMain = await windowManager.get(IWindowList.SETTING_WINDOW)?.webContents.insertCSS(css) + } catch (e) { + console.error(e) + } + } +} diff --git a/src/main/apis/app/window/windowList.ts b/src/main/apis/app/window/windowList.ts index 2f5526e5..4fc06e7e 100644 --- a/src/main/apis/app/window/windowList.ts +++ b/src/main/apis/app/window/windowList.ts @@ -12,6 +12,7 @@ import { configPaths } from '~/utils/configPaths' import { IWindowList } from '~/utils/enum' import logo from '../../../../../resources/logo.png?asset&asarUnpack' +import { applyTheme } from '../theme' const windowList = new Map() @@ -205,6 +206,10 @@ windowList.set(IWindowList.SETTING_WINDOW, { }) } }) + window.on('ready-to-show', () => { + const customTheme = picgo.getConfig(configPaths.settings.theme) || 'default.css' + applyTheme(customTheme) + }) bus.emit(CREATE_APP_MENU) windowManager.create(IWindowList.MINI_WINDOW) }, diff --git a/src/main/events/rpc/routes/system/app.ts b/src/main/events/rpc/routes/system/app.ts index 625a72fa..80a4859b 100644 --- a/src/main/events/rpc/routes/system/app.ts +++ b/src/main/events/rpc/routes/system/app.ts @@ -1,8 +1,9 @@ import picgo from '@core/picgo' -import { app, shell } from 'electron' +import { app, nativeTheme, shell } from 'electron' +import { applyTheme, fetchThemes, importThemes, resolveThemes } from '~/apis/app/theme' import { i18nManager } from '~/i18n' -import { IRPCActionType } from '~/utils/enum' +import { IRPCActionType, IRPCType } from '~/utils/enum' export default [ { @@ -32,4 +33,51 @@ export default [ picgo.i18n.setLanguage(lang) }, }, + { + action: IRPCActionType.GET_SYSTEM_THEME, + handler: async () => { + return nativeTheme.shouldUseDarkColors ? 'dark' : 'light' + }, + type: IRPCType.INVOKE, + }, + { + action: IRPCActionType.SET_SYSTEM_THEME, + handler: async (_: IIPCEvent, args: [theme: 'light' | 'dark' | 'system']) => { + nativeTheme.themeSource = args[0] + }, + }, + { + action: IRPCActionType.APPLY_THEME, + handler: async (_: IIPCEvent, args: [theme: string]) => { + applyTheme(args[0]) + }, + }, + { + action: IRPCActionType.THEME_RESOLVE_THEMES, + handler: async () => { + return await resolveThemes() + }, + type: IRPCType.INVOKE, + }, + { + action: IRPCActionType.THEME_FETCH_THEMES, + handler: async () => { + await fetchThemes() + }, + type: IRPCType.INVOKE, + }, + { + action: IRPCActionType.THEME_IMPORT_THEMES, + handler: async (_: IIPCEvent, args: [files: string[]]) => { + await importThemes(args[0]) + }, + type: IRPCType.INVOKE, + }, + { + action: IRPCActionType.THEME_APPLY_THEME, + handler: async (_: IIPCEvent, args: [theme: string]) => { + await applyTheme(args[0]) + }, + type: IRPCType.INVOKE, + }, ] diff --git a/src/main/lifeCycle/index.ts b/src/main/lifeCycle/index.ts index 67f65a64..6d9c6bf8 100644 --- a/src/main/lifeCycle/index.ts +++ b/src/main/lifeCycle/index.ts @@ -11,7 +11,7 @@ import { createTray, setDockMenu } from 'apis/app/system' import { uploadChoosedFiles, uploadClipboardFiles } from 'apis/app/uploader/apis' import windowManager from 'apis/app/window/windowManager' import axios from 'axios' -import { app, globalShortcut, Notification, protocol, screen } from 'electron' +import { app, globalShortcut, nativeTheme, Notification, protocol, screen } from 'electron' import updater from 'electron-updater' import fs from 'fs-extra' @@ -180,6 +180,12 @@ class LifeCycle { windowManager.create(IWindowList.TRAY_WINDOW) windowManager.create(IWindowList.SETTING_WINDOW) const isAutoListenClipboard = picgo.getConfig(configPaths.settings.isAutoListenClipboard) || false + const systemTheme = picgo.getConfig<'light' | 'dark' | 'system' | undefined>(configPaths.settings.systemTheme) + if (systemTheme) { + nativeTheme.themeSource = systemTheme + } else { + nativeTheme.themeSource = 'system' + } const ClipboardWatcher = clipboardPoll if (isAutoListenClipboard) { picgo.saveConfig({ [configPaths.settings.isListeningClipboard]: true }) @@ -362,7 +368,6 @@ class LifeCycle { } async launchApp() { - console.log('launchApp called', app.getPath('exe')) const gotTheLock = app.requestSingleInstanceLock() if (!gotTheLock) { app.quit() diff --git a/src/main/utils/beforeOpen.ts b/src/main/utils/beforeOpen.ts index fc0109ce..9e82c03f 100644 --- a/src/main/utils/beforeOpen.ts +++ b/src/main/utils/beforeOpen.ts @@ -2,7 +2,8 @@ import os from 'node:os' import path from 'node:path' import { fileURLToPath } from 'node:url' -import { appConfigPath } from '@core/datastore/dirs' +import { appConfigPath, themesDir } from '@core/datastore/dirs' +import * as fsWalk from '@nodelib/fs.walk' import fs from 'fs-extra' import yaml from 'yaml' @@ -17,6 +18,7 @@ function beforeOpen() { resolveMacWorkFlow() } resolveClipboardImageGenerator() + resolveCss() resolveOtherI18nFiles() } @@ -86,16 +88,50 @@ function resolveClipboardImageGenerator() { diffFilesAndUpdate(item.origin, item.dest) }) } +} - function getClipboardFiles() { - const files = ['linux.sh', 'mac.applescript', 'windows.ps1', 'windows10.ps1', 'wsl.sh'] +function getClipboardFiles() { + const files = ['linux.sh', 'mac.applescript', 'windows.ps1', 'windows10.ps1', 'wsl.sh'] - return files.map(item => { - return { - origin: path.join(dirname, '../../resources', item).replace('app.asar', 'app.asar.unpacked'), - dest: path.join(CONFIG_DIR, item), + return files.map(item => { + return { + origin: path.join(dirname, '../../resources', item).replace('app.asar', 'app.asar.unpacked'), + dest: path.join(CONFIG_DIR, item), + } + }) +} + +function getFileInCssDir() { + const cssDir = path.join(dirname, '../../resources/theme').replace('app.asar', 'app.asar.unpacked') + const res = fsWalk.walkSync(cssDir, { + followSymbolicLinks: true, + fs, + stats: true, + throwErrorOnBrokenSymbolicLink: false, + }) + const result: string[] = [] + res.forEach(item => { + if (item.stats?.isFile()) { + result.push(item.path) + } + }) + return result +} + +function resolveCss() { + try { + fs.ensureDirSync(themesDir()) + const css = getFileInCssDir() + css.forEach(item => { + const dest = path.join(themesDir(), path.basename(item)) + if (!fs.pathExistsSync(dest)) { + fs.copyFileSync(item, dest) + } else { + diffFilesAndUpdate(item, dest) } }) + } catch (e) { + console.error(e) } } diff --git a/src/main/utils/configPaths.ts b/src/main/utils/configPaths.ts index 20dfa89a..73836e18 100644 --- a/src/main/utils/configPaths.ts +++ b/src/main/utils/configPaths.ts @@ -30,6 +30,8 @@ export interface IConfigStruct { } settings: { shortKey: Record + systemTheme: 'light' | 'dark' | 'auto' + customTheme: string logLevel: string[] logPath: string logFileSizeLimit: number @@ -85,6 +87,7 @@ export interface IConfigStruct { galleryPicBedFilter: string[] enableSecondUploader?: boolean lastSyncTime?: number + theme: string } needReload: boolean picgoPlugins: IPicGoPlugins @@ -120,6 +123,8 @@ export const configPaths = { _path: 'settings.shortKey', 'picgo:upload': 'settings.shortKey[picgo:upload]', }, + systemTheme: 'settings.systemTheme', + customTheme: 'settings.customTheme', logLevel: 'settings.logLevel', logPath: 'settings.logPath', logFileSizeLimit: 'settings.logFileSizeLimit', @@ -175,6 +180,7 @@ export const configPaths = { galleryPicBedFilter: 'settings.galleryPicBedFilter', enableSecondUploader: 'settings.enableSecondUploader', lastSyncTime: 'settings.lastSyncTime', + theme: 'settings.theme', }, needReload: 'needReload', picgoPlugins: 'picgoPlugins', diff --git a/src/main/utils/enum.ts b/src/main/utils/enum.ts index b6835238..c1e78bac 100644 --- a/src/main/utils/enum.ts +++ b/src/main/utils/enum.ts @@ -70,6 +70,13 @@ export const IRPCType = { export const IRPCActionType = { // system rpc + GET_SYSTEM_THEME: 'GET_SYSTEM_THEME', + SET_SYSTEM_THEME: 'SET_SYSTEM_THEME', + APPLY_THEME: 'APPLY_THEME', + THEME_RESOLVE_THEMES: 'THEME_RESOLVE_THEMES', + THEME_FETCH_THEMES: 'THEME_FETCH_THEMES', + THEME_IMPORT_THEMES: 'THEME_IMPORT_THEMES', + THEME_APPLY_THEME: 'THEME_APPLY_THEME', RELOAD_APP: 'RELOAD_APP', OPEN_URL: 'OPEN_URL', OPEN_FILE: 'OPEN_FILE', diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 28f11c03..148e928e 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -1,34 +1,25 @@ - + diff --git a/src/renderer/components/css/ImageProcessSetting.css b/src/renderer/components/css/ImageProcessSetting.css index 114d82e9..de1603cc 100644 --- a/src/renderer/components/css/ImageProcessSetting.css +++ b/src/renderer/components/css/ImageProcessSetting.css @@ -5,7 +5,6 @@ height: 100%; min-height: 100vh; color: var(--color-text-primary); - background: var(--color-background-primary); } /* ==================== Tab Navigation ==================== */ @@ -16,7 +15,6 @@ border: 1px solid var(--color-border); border-radius: 14px; padding: 6px; - background: var(--color-background-primary); box-shadow: 0 2px 12px rgb(0 0 0 / 6%), inset 0 1px 0 rgb(255 255 255 / 5%); @@ -29,7 +27,7 @@ z-index: 0; border-radius: 10px; height: calc(100% - 12px); - background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); + background: var(--color-accent); box-shadow: 0 2px 8px rgb(64 158 255 / 35%); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @@ -383,7 +381,7 @@ } .switch-input:checked + .switch-slider { - background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); + background: var(--color-accent); box-shadow: inset 0 1px 3px rgb(0 0 0 / 10%), 0 2px 8px rgb(64 158 255 / 30%); @@ -432,7 +430,7 @@ } .radio-option:hover { - border-color: #409eff; + border-color: var(--color-accent); background: rgb(64 158 255 / 8%); } @@ -451,7 +449,7 @@ } .radio-input:checked + .radio-indicator { - border-color: #409eff; + border-color: var(--color-accent); background: var(--color-background-primary); } @@ -462,7 +460,7 @@ border-radius: 50%; width: 10px; height: 10px; - background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); + background: var(--color-accent); content: ''; transform: translate(-50%, -50%); } @@ -656,158 +654,6 @@ small { } } -/* ==================== Dark mode adjustments ==================== */ -:root.dark .image-process-settings, -:root.auto.dark .image-process-settings { - background: linear-gradient(180deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%); -} - -:root.dark .settings-header, -:root.auto.dark .settings-header { - border-color: var(--color-border); - background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-surface) 100%); -} - -:root.dark .tab-navigation, -:root.auto.dark .tab-navigation { - border-color: var(--color-border); - background: var(--color-background-tertiary); -} - -:root.dark .settings-section, -:root.auto.dark .settings-section { - border-color: var(--color-border); - background: var(--color-background-tertiary); -} - -:root.dark .form-input, -:root.dark .form-textarea, -:root.auto.dark .form-input, -:root.auto.dark .form-textarea { - border-color: var(--color-border); - color: var(--color-text-primary); - background: var(--color-surface); -} - -:root.dark .form-range, -:root.auto.dark .form-range { - background: linear-gradient(90deg, #409eff 0%, #4a4a52 0%); -} - -:root.dark .switch-slider, -:root.auto.dark .switch-slider { - background: linear-gradient(180deg, #4a4a52 0%, #3a3a42 100%); -} - -:root.dark .switch-slider::before, -:root.auto.dark .switch-slider::before { - background: linear-gradient(180deg, #e0e0e0 0%, #d0d0d0 100%); -} - -:root.dark .btn-secondary, -:root.auto.dark .btn-secondary { - border-color: var(--color-border); - color: var(--color-text-secondary); - background: var(--color-surface); -} - -:root.dark .btn-secondary:hover, -:root.auto.dark .btn-secondary:hover { - border-color: var(--color-border-hover); - color: var(--color-text-primary); - background: var(--color-background-tertiary); -} - -:root.dark .switch-label, -:root.auto.dark .switch-label { - border-color: var(--color-border); - background: var(--color-surface); -} - -:root.dark .switch-label:hover, -:root.auto.dark .switch-label:hover { - border-color: #409eff; - background: var(--color-background-tertiary); -} - -:root.dark .switch-title, -:root.auto.dark .switch-title { - color: var(--color-text-primary); -} - -:root.dark .switch-description, -:root.auto.dark .switch-description { - color: var(--color-text-secondary); -} - -:root.dark .position-button, -:root.auto.dark .position-button { - border-color: var(--color-border); - color: var(--color-text-secondary); - background: var(--color-surface); -} - -:root.dark .position-button:hover, -:root.auto.dark .position-button:hover { - border-color: #409eff; - color: var(--color-text-primary); - background: var(--color-background-tertiary); -} - -:root.dark .position-button.active, -:root.auto.dark .position-button.active { - border-color: #409eff; - color: white; - background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); -} - -:root.dark .radio-option, -:root.auto.dark .radio-option { - border-color: var(--color-border); - background: var(--color-surface); -} - -:root.dark .radio-option:hover, -:root.auto.dark .radio-option:hover { - border-color: #409eff; - background: var(--color-background-tertiary); -} - -:root.dark .section-icon, -:root.auto.dark .section-icon { - background: linear-gradient(135deg, #409eff25 0%, #409eff35 100%); -} - -:root.dark .section-icon.watermark-icon, -:root.auto.dark .section-icon.watermark-icon { - background: linear-gradient(135deg, #67c23a25 0%, #67c23a35 100%); -} - -:root.dark .section-icon.transform-icon, -:root.auto.dark .section-icon.transform-icon { - background: linear-gradient(135deg, #e6a23c25 0%, #e6a23c35 100%); -} - -:root.dark .section-icon.rotate-icon, -:root.auto.dark .section-icon.rotate-icon { - background: linear-gradient(135deg, #90939925 0%, #90939935 100%); -} - -:root.dark .section-icon.resize-icon, -:root.auto.dark .section-icon.resize-icon { - background: linear-gradient(135deg, #f56c6c25 0%, #f56c6c35 100%); -} - -:root.dark .section-icon.percent-icon, -:root.auto.dark .section-icon.percent-icon { - background: linear-gradient(135deg, #b37feb25 0%, #b37feb35 100%); -} - -:root.dark small, -:root.auto.dark small { - background: var(--color-surface); -} - /* Placeholder Help Styles */ .placeholder-help { overflow-y: auto; @@ -932,43 +778,3 @@ small { .section-icon.rename-icon { background: linear-gradient(135deg, #52c41a25 0%, #52c41a35 100%); } - -/* Dark theme adjustments */ -:root.dark .placeholder-help, -:root.auto.dark .placeholder-help { - border-color: var(--color-border); - background: var(--color-background-secondary); - box-shadow: 0 2px 8px rgb(0 0 0 / 20%); -} - -:root.dark .category-title, -:root.auto.dark .category-title { - border-bottom-color: var(--color-border); - background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%); -} - -:root.dark .placeholder-category, -:root.auto.dark .placeholder-category { - border-bottom-color: var(--color-border); -} - -:root.dark .placeholder-item:hover, -:root.auto.dark .placeholder-item:hover { - background: rgb(var(--color-accent-rgb), 0.12); -} - -:root.dark .placeholder-item code, -:root.auto.dark .placeholder-item code { - border-color: rgb(255 255 255 / 15%); - background: var(--color-blue-common); -} - -:root.dark .rename-toggle-card, -:root.auto.dark .rename-toggle-card { - background: var(--color-background-tertiary); -} - -:root.dark .section-icon.rename-icon, -:root.auto.dark .section-icon.rename-icon { - background: linear-gradient(135deg, #52c41a25 0%, #52c41a35 100%); -} diff --git a/src/renderer/components/css/InputBox.css b/src/renderer/components/css/InputBox.css new file mode 100644 index 00000000..257dd8f1 --- /dev/null +++ b/src/renderer/components/css/InputBox.css @@ -0,0 +1,232 @@ +/* Transitions */ +.inputbox-fade-enter-active, +.inputbox-fade-leave-active { + transition: opacity 0.2s ease; +} + +.inputbox-fade-enter-from, +.inputbox-fade-leave-to { + opacity: 0; +} + +.inputbox-scale-enter-active { + transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.inputbox-scale-leave-active { + transition: all 0.2s ease; +} + +.inputbox-scale-enter-from { + opacity: 0; + transform: scale(0.9) translateY(-10px); +} + +.inputbox-scale-leave-to { + opacity: 0; + transform: scale(0.95); +} + +/* Overlay */ +.inputbox-overlay { + position: fixed; + inset: 0; + z-index: 2000; + display: flex; + justify-content: center; + align-items: center; + padding: 1rem; + background: rgb(0 0 0 / 40%); +} + +/* Container */ +.inputbox-container { + position: relative; + overflow: hidden; + border: 1px solid var(--color-border); + border-radius: 1rem; + width: 100%; + max-width: 28rem; + background: var(--color-background-tertiary); +} + +/* Close Button */ +.inputbox-close { + position: absolute; + top: 1rem; + right: 1rem; + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + border: none; + border-radius: 0.5rem; + padding: 0.375rem; + color: var(--color-text-secondary); + background: var(--color-surface-elevated); + transition: all 0.15s ease; + cursor: pointer; +} + +.inputbox-close:hover { + color: var(--color-text-primary); + background: var(--color-surface-elevated); +} + +/* Body */ +.inputbox-body { + padding: 1rem 1rem 0.5rem; +} + +.inputbox-title { + margin: 0 0 1.25rem; + padding-right: 2rem; + font-size: 1.125rem; + font-weight: 600; + line-height: 1.4; + color: var(--color-text-primary); +} + +.inputbox-content { + position: relative; +} + +/* Input */ +.inputbox-input { + border: 1.5px solid var(--color-border); + border-radius: 0.625rem; + padding: 0.75rem 1rem; + width: 100%; + font-size: 0.9375rem; + font-family: inherit; + color: var(--color-text-primary); + background: var(--color-background-tertiary); + outline: none; + transition: all 0.2s ease; +} + +.inputbox-input:hover { + border-color: var(--color-border-hover); + background: var(--color-background-elevated); +} + +.inputbox-input:focus { + border-color: var(--color-primary); + background: var(--color-background-elevated); + box-shadow: 0 0 0 3px rgb(59 130 246 / 10%); +} + +.inputbox-input::placeholder { + color: var(--color-text-primary); +} + +/* Textarea */ +.inputbox-textarea { + border: 1.5px solid var(--color-border); + border-radius: 0.625rem; + padding: 0.75rem 1rem; + width: 100%; + min-height: 6rem; + font-size: 0.9375rem; + font-family: inherit; + line-height: 1.6; + color: var(--color-text-primary); + background: var(--color-background-tertiary); + outline: none; + resize: vertical; + transition: all 0.2s ease; +} + +.inputbox-textarea:hover { + border-color: var(--color-border-hover); + background: var(--color-background-elevated); +} + +.inputbox-textarea:focus { + border-color: var(--color-primary); + background: var(--color-background-elevated); +} + +.inputbox-textarea::placeholder { + color: var(--color-text-primary); +} + +/* Actions */ +.inputbox-actions { + display: flex; + border-top: 1px solid var(--color-border); + padding: 1rem 1.5rem; + gap: 0.75rem; +} + +.inputbox-btn { + flex: 1; + border: none; + border-radius: 0.5rem; + padding: 0.625rem 1.25rem; + font-size: 0.875rem; + font-weight: 500; + transition: all 0.15s ease; + cursor: pointer; +} + +.inputbox-btn:active { + transform: scale(0.98); +} + +.inputbox-btn:disabled { + opacity: 0.8; + cursor: not-allowed; +} + +.inputbox-btn:disabled:active { + transform: none; +} + +/* Cancel Button */ +.cancel-btn { + border: 1px solid var(--color-border); + color: var(--color-text-secondary); + background: var(--color-background-elevated); +} + +.cancel-btn:hover { + border-color: var(--color-border-hover); + background: var(--color-background-elevated-hover); +} + +/* Confirm Button */ +.confirm-btn { + border: none; + color: var(--color-text-on-primary); + background: var(--color-accent); +} + +.confirm-btn:hover:not(:disabled) { + background: var(--color-accent-hover); +} + +/* Responsive */ +@media (width <= 640px) { + .inputbox-overlay { + align-items: flex-end; + padding: 0; + } + + .inputbox-container { + border-radius: 1rem 1rem 0 0; + max-width: 100%; + } + + .inputbox-body { + padding: 1.75rem 1.5rem 1.25rem; + } + + .inputbox-actions { + flex-direction: column-reverse; + } + + .inputbox-btn { + width: 100%; + } +} diff --git a/src/renderer/components/css/NavigationPage.css b/src/renderer/components/css/NavigationPage.css index b8261223..31217dfa 100644 --- a/src/renderer/components/css/NavigationPage.css +++ b/src/renderer/components/css/NavigationPage.css @@ -1,7 +1,7 @@ .navigation { display: flex; overflow: hidden; - border-right: 1px solid rgb(229 231 235); + border-right: 1px solid var(--color-border-secondary); width: 150px; height: 100vh; background: var(--color-background-secondary); @@ -13,12 +13,6 @@ width: 60px; } -:root.dark .navigation, -:root.auto.dark .navigation { - border-right-color: var(--color-background-secondary); - background: var(--color-background-secondary); -} - .title-bar { position: relative; display: flex; @@ -60,12 +54,6 @@ transform: none; } -:root.dark .title-bar, -:root.auto.dark .title-bar { - border-bottom-color: var(--color-border); - background: var(--color-background-secondary); -} - .app-title { display: flex; flex-direction: column; @@ -92,7 +80,7 @@ font-size: 10px; font-weight: 500; color: var(--color-text-secondary); - background: var(--color-surface-elevated); + background: var(--color-surface); } .theme-section { @@ -103,11 +91,6 @@ padding: 0.75rem; } -:root.dark .theme-section, -:root.auto.dark .theme-section { - border-bottom-color: var(--color-border); -} - .nav-menu { overflow-y: auto; padding: 1rem 0; @@ -123,7 +106,7 @@ font-size: 0.875rem; font-weight: 500; text-decoration: none; - color: rgb(75 85 99); + color: var(--color-text-secondary); transition: all 0.2s ease; gap: 0.75rem; cursor: pointer; @@ -139,33 +122,15 @@ display: none; } -:root.dark .nav-item, -:root.auto.dark .nav-item { - color: rgb(209 213 219); -} - .nav-item:hover { - color: rgb(17 24 39); - background: rgb(243 244 246); -} - -:root.dark .nav-item:hover, -:root.auto.dark .nav-item:hover { - color: rgb(243 244 246); - background: rgb(55 65 81); + color: var(--color-text-primary); + background: var(--color-surface); } .nav-item.router-link-active { - border-right: 3px solid rgb(99 102 241); - color: rgb(99 102 241); - background: rgb(239 246 255); -} - -:root.dark .nav-item.router-link-active, -:root.auto.dark .nav-item.router-link-active { - border-right-color: rgb(129 140 248); - color: rgb(129 140 248); - background: rgb(30 58 138 / 20%); + border-right: 3px solid var(--color-accent); + color: var(--color-accent); + background: var(--color-surface); } .nav-icon-container { @@ -190,7 +155,7 @@ border: none; border-radius: 6px; padding: 8px; - color: var(--color-text-secondary); + color: var(--color-text-tertiary); background: transparent; cursor: pointer; } @@ -217,27 +182,16 @@ font-size: 0.875rem; font-weight: 500; text-decoration: none; - color: rgb(75 85 99); + color: var(--color-text-secondary); background: transparent; transition: all 0.2s ease; gap: 0.75rem; cursor: pointer; } -:root.dark .submenu-trigger, -:root.auto.dark .submenu-trigger { - color: rgb(209 213 219); -} - .submenu-trigger:hover { - color: rgb(17 24 39); - background: rgb(243 244 246); -} - -:root.dark .submenu-trigger:hover, -:root.auto.dark .submenu-trigger:hover { - color: rgb(243 244 246); - background: rgb(55 65 81); + color: var(--color-text-primary); + background: var(--color-surface-elevated); } .submenu-trigger .nav-icon-container { @@ -290,14 +244,8 @@ } .collapsed-picbed:hover { - color: rgb(17 24 39); - background: rgb(243 244 246); -} - -:root.dark .collapsed-picbed:hover, -:root.auto.dark .collapsed-picbed:hover { - color: rgb(243 244 246); - background: rgb(55 65 81); + color: var(--color-text-primary); + background: var(--color-surface-elevated); } .qr-dialog { @@ -328,7 +276,7 @@ border-radius: 16px; width: 100%; max-width: 500px; - background: var(--color-background-primary); + background: var(--color-background-secondary); box-shadow: var(--shadow-md); } diff --git a/src/renderer/components/css/PerPicbedSetting.css b/src/renderer/components/css/PerPicbedSetting.css index 01e49070..5a413bac 100644 --- a/src/renderer/components/css/PerPicbedSetting.css +++ b/src/renderer/components/css/PerPicbedSetting.css @@ -122,7 +122,7 @@ border-radius: 12px; width: 44px; height: 24px; - background: var(--color-border); + background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%); transition: all 0.3s ease; flex-shrink: 0; } @@ -141,7 +141,7 @@ } .switch-input:checked + .switch-slider { - background: var(--color-blue-common); + background: var(--color-accent); } .switch-input:checked + .switch-slider::before { @@ -342,97 +342,3 @@ select.form-input:focus { align-items: flex-start; } } - -/* Dark mode styles */ -:root.dark .map-settings-panel, -:root.auto.dark .map-settings-panel { - border-color: var(--color-border); - background: var(--color-background-tertiary); - box-shadow: 0 2px 8px rgb(0 0 0 / 30%); -} - -:root.dark .picbed-setting-item, -:root.auto.dark .picbed-setting-item { - border-color: var(--color-border); - background: var(--color-surface); -} - -:root.dark .picbed-setting-item:hover, -:root.auto.dark .picbed-setting-item:hover { - border-color: var(--color-primary); - box-shadow: 0 2px 4px rgb(0 0 0 / 30%); -} - -:root.dark .form-input, -:root.dark .form-color, -:root.auto.dark .form-input, -:root.auto.dark .form-color { - border-color: var(--color-border); - color: var(--color-text-primary); - background: var(--color-surface); -} - -:root.dark .form-input:focus, -:root.dark .form-color:focus, -:root.auto.dark .form-input:focus, -:root.auto.dark .form-color:focus { - border-color: var(--color-primary); - box-shadow: 0 0 0 2px rgb(64 158 255 / 30%); -} - -:root.dark .btn-secondary, -:root.auto.dark .btn-secondary { - border-color: var(--color-border); - color: var(--color-text-secondary); - background: var(--color-surface); -} - -:root.dark .btn-secondary:hover, -:root.auto.dark .btn-secondary:hover { - border-color: var(--color-border-hover); - color: var(--color-text-primary); - background: var(--color-background-tertiary); -} - -:root.dark .switch-slider::before, -:root.auto.dark .switch-slider::before { - background: var(--color-surface); -} - -:root.dark .radio-option.small, -:root.auto.dark .radio-option.small { - border-color: var(--color-border); - background: var(--color-surface); -} - -:root.dark .radio-option.small:hover, -:root.auto.dark .radio-option.small:hover { - border-color: var(--color-primary); - background: rgb(64 158 255 / 20%); -} - -:root.dark .radio-indicator, -:root.auto.dark .radio-indicator { - border-color: var(--color-border); - background: var(--color-surface); -} - -:root.dark .radio-input:checked + .radio-indicator, -:root.auto.dark .radio-input:checked + .radio-indicator { - border-color: var(--color-primary); -} - -:root.dark .radio-input:checked + .radio-indicator::after, -:root.auto.dark .radio-input:checked + .radio-indicator::after { - background: var(--color-primary); -} - -:root.dark select.form-input, -:root.auto.dark select.form-input { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); -} - -:root.dark select.form-input:focus, -:root.auto.dark select.form-input:focus { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23409eff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); -} diff --git a/src/renderer/components/css/UnifiedConfigForm.css b/src/renderer/components/css/UnifiedConfigForm.css index c6c51a79..570b1433 100644 --- a/src/renderer/components/css/UnifiedConfigForm.css +++ b/src/renderer/components/css/UnifiedConfigForm.css @@ -17,7 +17,7 @@ .form-group.required .form-label::after { content: ' *'; - color: var(--color-error, #ef4444); + color: var(--color-error); } .form-label-wrapper { @@ -72,7 +72,7 @@ max-width: 300px; font-size: 0.75rem; color: var(--color-text-primary); - background: var(--color-surface-elevated); + background: var(--color-background-secondary); box-shadow: var(--shadow-lg); line-height: 1.4; } @@ -86,12 +86,13 @@ font-size: 0.875rem; font-family: inherit; color: var(--color-text-primary); - background: var(--color-surface-elevated); + background: var(--color-background-secondary); transition: var(--transition-fast); } .form-input:focus { border-color: var(--color-accent); + background: var(--color-surface); outline: none; box-shadow: 0 0 0 2px rgb(0 122 255 / 20%); } @@ -101,7 +102,7 @@ } .form-input.error { - border-color: var(--color-error, #ef4444); + border-color: var(--color-error); } .form-input.error:focus { @@ -134,7 +135,7 @@ } .form-select.error { - border-color: var(--color-error, #ef4444); + border-color: var(--color-error); } .form-select.error:focus { @@ -294,33 +295,7 @@ .error-message { margin-top: 0.25rem; font-size: 0.75rem; - color: var(--color-error, #ef4444); -} - -/* White theme adjustments */ -.white .form-input, -.white .form-select { - border-color: #dddddd; - background: white; -} - -.white .form-input:focus, -.white .form-select:focus { - border-color: var(--color-accent); -} - -.white .checkbox-custom { - border-color: #dddddd; - background: white; -} - -.white .switch-slider { - background: #dddddd; -} - -.white .tooltip-content { - border-color: #dddddd; - background: white; + color: var(--color-error); } /* Responsive Design */ @@ -344,32 +319,6 @@ } } -/* Dark mode adjustments */ -:root.dark .form-input, -:root.auto.dark .form-input, -:root.dark .form-select, -:root.auto.dark .form-select { - border-color: var(--color-border); - background: var(--color-surface-elevated); -} - -:root.dark .checkbox-custom, -:root.auto.dark .checkbox-custom { - border-color: var(--color-border); - background: var(--color-surface-elevated); -} - -:root.dark .switch-slider, -:root.auto.dark .switch-slider { - background: var(--color-border); -} - -:root.dark .tooltip-content, -:root.auto.dark .tooltip-content { - border-color: var(--color-border); - background: var(--color-surface-elevated); -} - /* Focus styles for accessibility */ .form-input:focus-visible, .form-select:focus-visible, diff --git a/src/renderer/components/ui/ConfirmMessageBox.vue b/src/renderer/components/ui/ConfirmMessageBox.vue index 209d19a2..e573d30d 100644 --- a/src/renderer/components/ui/ConfirmMessageBox.vue +++ b/src/renderer/components/ui/ConfirmMessageBox.vue @@ -163,12 +163,6 @@ export default { 0 10px 10px -5px rgb(0 0 0 / 4%); } -:root.dark .messagebox-container, -:root.auto.dark .messagebox-container { - border-color: rgb(55 65 81); - background: rgb(31 41 55); -} - /* Close Button */ .messagebox-close { position: absolute; @@ -192,17 +186,6 @@ export default { background: rgb(243 244 246); } -:root.dark .messagebox-close, -:root.auto.dark .messagebox-close { - color: rgb(156 163 175); -} - -:root.dark .messagebox-close:hover, -:root.auto.dark .messagebox-close:hover { - color: rgb(209 213 219); - background: rgb(55 65 81); -} - /* Body */ .messagebox-body { padding: 1.75rem 2rem 1.5rem; @@ -247,45 +230,21 @@ export default { background: rgb(254 243 199); } -:root.dark .messagebox-icon-warning, -:root.auto.dark .messagebox-icon-warning { - color: rgb(251 191 36); - background: rgb(120 53 15 / 30%); -} - .messagebox-icon-info { color: rgb(59 130 246); background: rgb(219 234 254); } -:root.dark .messagebox-icon-info, -:root.auto.dark .messagebox-icon-info { - color: rgb(96 165 250); - background: rgb(30 58 138 / 30%); -} - .messagebox-icon-success { color: rgb(34 197 94); background: rgb(220 252 231); } -:root.dark .messagebox-icon-success, -:root.auto.dark .messagebox-icon-success { - color: rgb(74 222 128); - background: rgb(20 83 45 / 30%); -} - .messagebox-icon-error { color: rgb(239 68 68); background: rgb(254 226 226); } -:root.dark .messagebox-icon-error, -:root.auto.dark .messagebox-icon-error { - color: rgb(248 113 113); - background: rgb(127 29 29 / 30%); -} - /* Content */ .messagebox-content { flex: 1; @@ -300,11 +259,6 @@ export default { color: rgb(17 24 39); } -:root.dark .messagebox-title, -:root.auto.dark .messagebox-title { - color: rgb(243 244 246); -} - .messagebox-message { margin: 0; font-size: 0.9375rem; @@ -312,11 +266,6 @@ export default { color: rgb(107 114 128); } -:root.dark .messagebox-message, -:root.auto.dark .messagebox-message { - color: rgb(156 163 175); -} - /* Actions */ .messagebox-actions { display: flex; @@ -325,11 +274,6 @@ export default { gap: 0.75rem; } -:root.dark .messagebox-actions, -:root.auto.dark .messagebox-actions { - border-top-color: rgb(55 65 81); -} - .messagebox-actions.center { justify-content: center; } @@ -361,19 +305,6 @@ export default { background: rgb(249 250 251); } -:root.dark .cancel-btn, -:root.auto.dark .cancel-btn { - border-color: rgb(55 65 81); - color: rgb(209 213 219); - background: rgb(55 65 81); -} - -:root.dark .cancel-btn:hover, -:root.auto.dark .cancel-btn:hover { - border-color: rgb(75 85 99); - background: rgb(75 85 99); -} - /* Confirm Buttons */ .confirm-btn { border: none; diff --git a/src/renderer/components/ui/MessageToast.vue b/src/renderer/components/ui/MessageToast.vue index d2526f05..116db606 100644 --- a/src/renderer/components/ui/MessageToast.vue +++ b/src/renderer/components/ui/MessageToast.vue @@ -145,12 +145,6 @@ export default { overflow-wrap: break-word; } -:root.dark .message-toast, -:root.auto.dark .message-toast { - border-color: rgb(55 65 81); - background: rgb(31 41 55); -} - .message-info { border-left: 4px solid rgb(59 130 246); } @@ -198,11 +192,6 @@ export default { hyphens: auto; } -:root.dark .message-content, -:root.auto.dark .message-content { - color: rgb(209 213 219); -} - .message-close { display: flex; justify-content: center; @@ -222,17 +211,6 @@ export default { background: rgb(243 244 246); } -:root.dark .message-close, -:root.auto.dark .message-close { - color: rgb(156 163 175); -} - -:root.dark .message-close:hover, -:root.auto.dark .message-close:hover { - color: rgb(209 213 219); - background: rgb(55 65 81); -} - /* Transition animations */ .message-enter-active, .message-leave-active { diff --git a/src/renderer/components/ui/ThemeSwitcher.vue b/src/renderer/components/ui/ThemeSwitcher.vue index 53db3828..9836c038 100644 --- a/src/renderer/components/ui/ThemeSwitcher.vue +++ b/src/renderer/components/ui/ThemeSwitcher.vue @@ -1,10 +1,9 @@