feat(theme): add color pickers

addons/preference/locales/zh-CN.json

@@ -9,6 +9,5 @@
   "Edit %F#!preference.8": "编辑 %F",
   "Current version: %V#!preference.9": "当前版本: %V",
   "Visit our website#!preference.10": "访问网站",
-  "Search#!preference.11": "搜索",
   "Reset to default#!preference.12": "重置为默认值"
 }

addons/theme/locales/zh-CN.json

@@ -5,5 +5,23 @@
   "Dark Mode#!theme.4": "深色模式",
   "Follow Theme#!theme.5": "跟随主题",
   "Light#!theme.6": "浅色",
-  "Dark#!theme.7": "深色"
+  "Dark#!theme.7": "深色",
+  "Foreground#!theme.field.foreground": "前景色",
+  "Background#!theme.field.background": "背景色",
+  "Black#!theme.field.black": "黑色",
+  "Bright Black#!theme.field.brightBlack": "亮黑色",
+  "Red#!theme.field.red": "红色",
+  "Bright Red#!theme.field.brightRed": "亮红色",
+  "Green#!theme.field.green": "绿色",
+  "Bright Green#!theme.field.brightGreen": "亮绿色",
+  "Yellow#!theme.field.yellow": "黄色",
+  "Bright Yellow#!theme.field.brightYellow": "亮黄色",
+  "Blue#!theme.field.blue": "蓝色",
+  "Bright Blue#!theme.field.brightBlue": "亮蓝色",
+  "Magenta#!theme.field.magenta": "品红色",
+  "Bright Magenta#!theme.field.brightMagenta": "亮品红色",
+  "Cyan#!theme.field.cyan": "青色",
+  "Bright Cyan#!theme.field.brightCyan": "亮青色",
+  "White#!theme.field.white": "白色",
+  "Bright White#!theme.field.brightWhite": "亮白色"
 }

addons/theme/src/renderer/ThemeColorPicker.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import * as commas from 'commas:api/renderer'
+import { startCase } from 'lodash'
+
+const { vI18n } = commas.ui.vueAssets
+
+const { field } = defineProps<{
+  field: string,
+}>()
+
+const name = $computed(() => startCase(field))
+
+const settings = commas.remote.useSettings()
+const theme = commas.remote.useTheme()
+
+const model = $computed({
+  get: () => {
+    return settings['terminal.theme.customization'][field] ?? theme[field]
+  },
+  set: value => {
+    const customization: Record<string, string> = {
+      ...settings['terminal.theme.customization'],
+    }
+    if (theme[field] === value) {
+      delete customization[field]
+    } else {
+      customization[field] = value
+    }
+    settings['terminal.theme.customization'] = customization
+  },
+})
+</script>
+
+<template>
+  <div class="theme-color-picker">
+    <label v-i18n class="form-label">{{ name }}#!theme.field.{{ field }}</label>
+    <input v-model.lazy="model" type="color" class="color-indicator">
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.theme-color-picker {
+  display: flex;
+  align-items: center;
+}
+.color-indicator {
+  border: none;
+  background: rgb(127 127 127 / 0.2);
+  border-radius: 4px;
+}
+</style>

addons/theme/src/renderer/ThemePane.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import * as commas from 'commas:api/renderer'
 import { shell, ipcRenderer } from 'electron'
+import ThemeColorPicker from './ThemeColorPicker.vue'
 import { fetchThemeList } from './utils'
 import type { ThemeEntry } from './utils'
 
@@ -19,9 +20,7 @@ const filteredList = $computed(() => {
 
 const settings = commas.remote.useSettings()
 
-const currentTheme = $computed<string>(() => {
-  return settings['terminal.theme.name']
-})
+const currentTheme = $computed<string>(() => settings['terminal.theme.name'])
 
 const themeType = $computed<string>({
   get() {
@@ -40,9 +39,26 @@ const themeType = $computed<string>({
   },
 })
 
-function updateTheme(name: string) {
-  settings['terminal.theme.name'] = name
-}
+const fields = [
+  'foreground',
+  'background',
+  'black',
+  'brightBlack',
+  'red',
+  'brightRed',
+  'green',
+  'brightGreen',
+  'yellow',
+  'brightYellow',
+  'blue',
+  'brightBlue',
+  'magenta',
+  'brightMagenta',
+  'cyan',
+  'brightCyan',
+  'white',
+  'brightWhite',
+]
 
 function reset() {
   ipcRenderer.invoke('reset-theme')
@@ -57,7 +73,7 @@ async function applyItem(item: ThemeEntry) {
   loading = item.name
   const result = await commas.remote.downloadUserFile(`themes/${item.name}.json`, item.url)
   if (result) {
-    updateTheme(item.name)
+    settings['terminal.theme.name'] = item.name
   }
   loading = false
 }
@@ -68,17 +84,27 @@ async function applyItem(item: ThemeEntry) {
     <h2 v-i18n class="group-title">Configure theme#!theme.2</h2>
     <div class="group">
       <div class="form-line">
+        <span v-i18n class="link" @click="reset">Reset to default#!preference.12</span>
+      </div>
+      <div class="form-line dark-mode">
         <label v-i18n class="form-label">Dark Mode#!theme.4</label>
         <select v-model="themeType" class="form-control">
           <option v-i18n value="">Follow Theme#!theme.5</option>
           <option v-i18n value="light">Light#!theme.6</option>
           <option v-i18n value="dark">Dark#!theme.7</option>
         </select>
       </div>
-      <span v-i18n class="link" @click="reset">Reset to default#!preference.12</span>
-      <div class="form-line">
-        <label v-i18n class="form-label">Search#!preference.11</label>
-        <input v-model="keyword" type="search" class="form-control">
+      <div class="form-line color-list">
+        <ThemeColorPicker v-for="field in fields" :key="field" :field="field" />
+      </div>
+      <div class="form-line theme-searcher">
+        <input
+          v-model="keyword"
+          v-i18n:placeholder
+          type="search"
+          placeholder="Find#!terminal.5"
+          class="form-control"
+        >
         <div class="form-line-tip">
           <span v-i18n>Theme will be downloaded from#!theme.3</span>
           <span class="link github-link" @click="openMarketplace">mbadolato/iTerm2-Color-Schemes</span>
@@ -102,6 +128,24 @@ async function applyItem(item: ThemeEntry) {
 </template>
 
 <style lang="scss" scoped>
+.color-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0 24px;
+}
+.dark-mode .form-label,
+:deep(.theme-color-picker) .form-label {
+  width: 10em;
+}
+.theme-searcher {
+  width: 100%;
+  .form-control {
+    width: 50%;
+  }
+  .form-line-tip {
+    margin-top: 8px;
+  }
+}
 .theme-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(90px, 1fr));

api/modules/remote.ts

@@ -7,6 +7,7 @@ import {
   useSettingsSpecs,
 } from '../../src/renderer/compositions/settings'
 import { openCodeEditorTab } from '../../src/renderer/compositions/terminal'
+import { useTheme } from '../../src/renderer/compositions/theme'
 import { translate } from '../../src/renderer/utils/i18n'
 
 export * from '../shim'
@@ -39,6 +40,7 @@ export {
   useLanguage,
   useSettings,
   useSettingsSpecs,
+  useTheme,
   useFile,
   getAddonManifest,
   openUserDirectory,