Add some preset colors and custom color.

AndroidIDE-CN · Oct 10, 2024 · 2568172 · 2568172
1 parent 960056c
commit 2568172
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 7 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -13,6 +13,21 @@ import i18n from "@/lang/i18n"
 if (CUSTOM_THEME_COLOR) setColorScheme(CUSTOM_THEME_COLOR)
 let path = document.location.pathname.split('/').pop()
 let title = (path) ? `menu.${path}` : 'menu.home'
+function rgbToHex(rgb: string) {
+  // 匹配 rgb 或 rgba 值
+  let result = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([01]|0?\.\d+))?\)$/);
+
+  if (!result) {
+    return rgb; // 如果不是rgb/rgba，直接返回原值（如已有hex值）
+  }
+
+  // 将 RGB 分量转换为 16 进制，确保两位数
+  let r = parseInt(result[1]).toString(16).padStart(2, '0');
+  let g = parseInt(result[2]).toString(16).padStart(2, '0');
+  let b = parseInt(result[3]).toString(16).padStart(2, '0');
+
+  return `#${r}${g}${b}`.toUpperCase(); // 返回大写的 HEX 颜色
+}
 document.title = `${i18n.global.t(title)} - AIDE Plus`
 export default {
   data() {
@@ -34,6 +49,16 @@ export default {
       this.appBarTitle = title
       document.title = `${title} - AIDE Plus`
       if (window.innerWidth < 840) this.isOpen = false
+    },
+    async setColor(event: any) {
+      let background = rgbToHex(window.getComputedStyle(event.target, null)
+          .getPropertyValue('background-color'))
+      localStorage.setItem('themeColor', background)
+      setColorScheme(background)
+    },
+    async handleColorChange(event: any) {
+      localStorage.setItem('themeColor', event.target?.value)
+      setColorScheme(event.target?.value)
     }
   }
 }
@@ -53,11 +78,20 @@ export default {
         </mdui-dropdown>
 
         <mdui-dropdown trigger="hover">
-          <mdui-button-icon icon="more_vert" slot="trigger"></mdui-button-icon>
-          <mdui-menu>
-            <mdui-menu-item>Item 1</mdui-menu-item>
-            <mdui-menu-item>Item 2</mdui-menu-item>
-          </mdui-menu>
+          <mdui-button-icon icon="color_lens" slot="trigger"></mdui-button-icon>
+          <mdui-card data-v-e56655cb="" class="card" variant="elevated">
+            <div data-v-e56655cb="" class="color-label">{{ $t('menu.color.preset') }}</div>
+            <div data-v-e56655cb="" class="color-preset">
+              <div data-v-e56655cb="" class="red" @click="setColor($event)"></div>
+              <div data-v-e56655cb="" class="purple" @click="setColor($event)"></div>
+              <div data-v-e56655cb="" class="blue" @click="setColor($event)"></div>
+              <div data-v-e56655cb="" class="green" @click="setColor($event)"></div>
+              <div data-v-e56655cb="" class="yellow" @click="setColor($event)"></div>
+              <div data-v-e56655cb="" class="grey" @click="setColor($event)"></div>
+            </div>
+            <div data-v-e56655cb="" class="color-label">{{ $t('menu.color.custom') }}</div>
+            <input data-v-e56655cb="" type="color" class="color-custom" @input="handleColorChange">
+          </mdui-card>
         </mdui-dropdown>
       </mdui-top-app-bar>
       <mdui-navigation-drawer class="navigation-drawer" contained :open="isOpen" @overlay-click="isOpen=false">

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -71,4 +71,131 @@ body {
 /* 针对Webkit浏览器隐藏滚动条的样式 */
 .hide-scrollbar::-webkit-scrollbar {
   display: none; /* 完全隐藏滚动条 */
+}
+
+.icon .filled[data-v-e56655cb],.icon:hover .outlined[data-v-e56655cb] {
+  display: none
+}
+
+.icon:hover .filled[data-v-e56655cb] {
+  display: block
+}
+
+.card[data-v-e56655cb] {
+  padding: 1rem
+}
+
+.color-label[data-v-e56655cb] {
+  cursor: default;
+  color: rgb(var(--mdui-color-on-surface-variant));
+  font-size: var(--mdui-typescale-title-small-size);
+  font-weight: var(--mdui-typescale-title-small-weight);
+  letter-spacing: var(--mdui-typescale-title-small-tracking);
+  line-height: var(--mdui-typescale-title-small-line-height)
+}
+
+.color-label[data-v-e56655cb]:not(:first-child) {
+  margin-top: .5rem
+}
+
+.color-preset[data-v-e56655cb] {
+  display: flex;
+  padding: .5rem 0
+}
+
+.color-preset div[data-v-e56655cb] {
+  cursor: pointer;
+  box-sizing: border-box;
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: var(--mdui-shape-corner-extra-small);
+  border: .0625rem solid rgb(var(--mdui-color-outline))
+}
+
+.color-preset div+div[data-v-e56655cb] {
+  margin-left: .5rem
+}
+
+.color-preset .red[data-v-e56655cb] {
+  background-color: #bb1614
+}
+
+.color-preset .purple[data-v-e56655cb] {
+  background-color: #9a25ae
+}
+
+.color-preset .blue[data-v-e56655cb] {
+  background-color: #0061a4
+}
+
+.color-preset .green[data-v-e56655cb] {
+  background-color: #006e1c
+}
+
+.color-preset .yellow[data-v-e56655cb] {
+  background-color: #695f00
+}
+
+.color-preset .grey[data-v-e56655cb] {
+  background-color: #006874
+}
+
+.mdui-theme-dark .color-preset .red[data-v-e56655cb] {
+  background-color: #ffb4aa
+}
+
+.mdui-theme-dark .color-preset .purple[data-v-e56655cb] {
+  background-color: #f9abff
+}
+
+.mdui-theme-dark .color-preset .blue[data-v-e56655cb] {
+  background-color: #9ecaff
+}
+
+.mdui-theme-dark .color-preset .green[data-v-e56655cb] {
+  background-color: #78dc77
+}
+
+.mdui-theme-dark .color-preset .yellow[data-v-e56655cb] {
+  background-color: #dbc90a
+}
+
+.mdui-theme-dark .color-preset .grey[data-v-e56655cb] {
+  background-color: #4fd8eb
+}
+
+@media (prefers-color-scheme: dark) {
+  .mdui-theme-auto .color-preset .red[data-v-e56655cb] {
+    background-color:#ffb4aa
+  }
+
+  .mdui-theme-auto .color-preset .purple[data-v-e56655cb] {
+    background-color: #f9abff
+  }
+
+  .mdui-theme-auto .color-preset .blue[data-v-e56655cb] {
+    background-color: #9ecaff
+  }
+
+  .mdui-theme-auto .color-preset .green[data-v-e56655cb] {
+    background-color: #78dc77
+  }
+
+  .mdui-theme-auto .color-preset .yellow[data-v-e56655cb] {
+    background-color: #dbc90a
+  }
+
+  .mdui-theme-auto .color-preset .grey[data-v-e56655cb] {
+    background-color: #4fd8eb
+  }
+}
+
+.color-custom[data-v-e56655cb] {
+  cursor: pointer;
+  box-sizing: border-box;
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: var(--mdui-shape-corner-extra-small);
+  border: .0625rem solid rgb(var(--mdui-color-outline));
+  margin: .5rem 0
 }
diff --git a/src/lang/en.ts b/src/lang/en.ts
@@ -2,6 +2,10 @@ export default {
   menu: {
     home: 'Home',
     feature: 'Feature',
-    about: 'About Us'
+    about: 'About Us',
+    color: {
+      preset: "Preset Colors",
+      custom: "Custom Color"
+    }
   }
 }
diff --git a/src/lang/zh.ts b/src/lang/zh.ts
@@ -2,6 +2,10 @@ export default {
   menu: {
     home: "首页",
     feature: "版本特性",
-    about: "关于我们"
+    about: "关于我们",
+    color: {
+      preset: "预设颜色",
+      custom: "自选颜色"
+    }
   }
 }