feat(theme): preview bright colors

CyanSalt · Jul 14, 2022 · 495b317 · 495b317
1 parent a170b91
commit 495b317
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/addons/theme/src/renderer/ThemeCard.vue b/addons/theme/src/renderer/ThemeCard.vue
@@ -1,20 +1,39 @@
 <script lang="ts" setup>
-import type { ThemeDefinition } from '../../../../src/typings/theme'
+import type { RemoteTheme } from './utils'
 
 const { theme } = defineProps<{
-  theme: ThemeDefinition,
+  theme: RemoteTheme,
 }>()
 </script>
 
 <template>
   <div class="theme-card" :style="{ 'background-color': theme.background, color: theme.foreground }">
     <div class="theme-line"></div>
-    <div class="theme-line" :style="{ color: theme.red }"></div>
-    <div class="theme-line" :style="{ color: theme.green }"></div>
-    <div class="theme-line" :style="{ color: theme.yellow }"></div>
-    <div class="theme-line" :style="{ color: theme.blue }"></div>
-    <div class="theme-line" :style="{ color: theme.magenta ?? theme.purple }"></div>
-    <div class="theme-line" :style="{ color: theme.cyan }"></div>
+    <div class="theme-line" :style="{ color: theme.brightRed }">
+      <div class="theme-line" :style="{ color: theme.red }"></div>
+    </div>
+    <div class="theme-line" :style="{ color: theme.brightGreen }">
+      <div class="theme-line" :style="{ color: theme.green }"></div>
+    </div>
+    <div class="theme-line" :style="{ color: theme.brightYellow }">
+      <div class="theme-line" :style="{ color: theme.yellow }"></div>
+    </div>
+    <div class="theme-line" :style="{ color: theme.brightBlue }">
+      <div class="theme-line" :style="{ color: theme.blue }"></div>
+    </div>
+    <div class="theme-line" :style="{ color: theme.brightMagenta ?? theme.brightPurple }">
+      <div class="theme-line" :style="{ color: theme.magenta ?? theme.purple }"></div>
+    </div>
+    <div class="theme-line" :style="{ color: theme.brightCyan }">
+      <div class="theme-line" :style="{ color: theme.cyan }"></div>
+    </div>
+    <div class="theme-line" :style="{ color: theme.meta.isDark ? theme.white : theme.black }">
+      <div class="theme-line" :style="{ color: theme.meta.isDark ? theme.brightWhite : theme.brightBlack }"></div>
+    </div>
+    <!-- Invert brightWhite and white for light themes -->
+    <div class="theme-line" :style="{ color: theme.meta.isDark ? theme.black : theme.brightWhite }">
+      <div class="theme-line" :style="{ color: theme.meta.isDark ? theme.brightBlack : theme.white }"></div>
+    </div>
   </div>
 </template>
 
@@ -29,12 +48,15 @@ const { theme } = defineProps<{
   background: currentColor;
   border-radius: 2px;
   @for $i from 1 through 7 {
-    &:nth-child(#{$i}) {
+    .theme-card > &:nth-child(#{$i}) {
       width: #{math.abs(math.sin($i)) * 100} + '%';
     }
   }
   & + & {
     margin-top: 0.5em;
   }
+  & > & {
+    width: 80%;
+  }
 }
 </style>
diff --git a/addons/theme/src/renderer/ThemePane.vue b/addons/theme/src/renderer/ThemePane.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import * as commas from 'commas:api/renderer'
 import { shell, ipcRenderer } from 'electron'
-import type { ThemeDefinition } from '../../../../src/typings/theme'
 import ThemeCard from './ThemeCard.vue'
 import ThemeColorPicker from './ThemeColorPicker.vue'
+import type { RemoteTheme } from './utils'
 import { fetchThemeList } from './utils'
 
 const { vI18n, LoadingSpinner, TerminalPane } = commas.ui.vueAssets
@@ -51,7 +51,7 @@ function openMarketplace() {
   shell.openExternal('https://windowsterminalthemes.dev')
 }
 
-async function applyTheme(item: ThemeDefinition & { name: string }) {
+async function applyTheme(item: RemoteTheme) {
   await commas.remote.writeUserFile(`themes/${item.name}.json`, JSON.stringify(item, null, 2))
   settings['terminal.theme.name'] = item.name
 }

diff --git a/addons/theme/src/renderer/utils.ts b/addons/theme/src/renderer/utils.ts
@@ -1,6 +1,13 @@
 import type { ThemeDefinition } from '../../../../src/typings/theme'
 
+export interface RemoteTheme extends ThemeDefinition {
+  name: string,
+  meta: {
+    isDark: boolean,
+  },
+}
+
 export async function fetchThemeList() {
   const response = await fetch(`https://www.atomcorp.dev/api/v1/themes`)
-  return await response.json() as (ThemeDefinition & { name: string })[]
+  return await response.json() as RemoteTheme[]
 }