feat: add vibrancy to macOS system frame

CyanSalt · Mar 10, 2022 · bd266be · bd266be
1 parent 74f2778
commit bd266be
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 12 deletions.
diff --git a/addons/cli/src/main/index.ts b/addons/cli/src/main/index.ts
@@ -48,7 +48,7 @@ commas.context.provide('cli', {
   handler() {
     /** {@link https://patorjk.com/software/taag/#p=display&f=ANSI%20Shadow&t=COMMAS} */
     return `
-██████╗ ██████╗ ███╗   ███╗███╗   ███╗ █████╗ ███████╗
+ ██████╗ ██████╗ ███╗   ███╗███╗   ███╗ █████╗ ███████╗
 ██╔════╝██╔═══██╗████╗ ████║████╗ ████║██╔══██╗██╔════╝
 ██║     ██║   ██║██╔████╔██║██╔████╔██║███████║███████╗
 ██║     ██║   ██║██║╚██╔╝██║██║╚██╔╝██║██╔══██║╚════██║

diff --git a/addons/settings/locales/zh-CN.json b/addons/settings/locales/zh-CN.json
@@ -9,7 +9,9 @@
   "Extra environment variables#!settings.comments.0.terminal.shell.env": "额外的环境变量",
   "Open External Path In#!settings.label.terminal.external.openPathIn": "打开外部路径于",
   "Specify how to open external paths#!settings.comments.0.terminal.external.openPathIn": "指定如何打开外部路径",
-  "Options: 'new-tab' or 'new-window'#!settings.comments.1.terminal.external.openPathIn": "可选项: 'new-tab' 或 'new-window'",
+  "Options: 'new-tab' or 'new-window'#!settings.comments.1.terminal.external.openPathIn": "可选项: '新标签页' 或 '新窗口'",
+  "new-tab#!settings.options.0.terminal.external.openPathIn": "新标签页",
+  "new-window#!settings.options.1.terminal.external.openPathIn": "新窗口",
   "External Explorer#!settings.label.terminal.external.explorer": "外部资源管理程序",
   "Command for starting external file manager (or code editor, etc)#!settings.comments.0.terminal.external.explorer": "用于启动外部文件管理器的命令 (也可以指定代码编辑器等)",
   "Use ${directory} to interpolate the variable at runtime#!settings.comments.1.terminal.external.explorer": "使用 ${directory} 以在运行时插入变量",
@@ -43,8 +45,7 @@
   "immersive#!settings.options.1.terminal.style.frameType": "沉浸式",
   "Background Opacity#!settings.label.terminal.style.opacity": "背景不透明度",
   "Background opacity of window#!settings.comments.0.terminal.style.opacity": "窗口的背景不透明度",
-  "It will not work if RGBA background is specified in theme file#!settings.comments.1.terminal.style.opacity": "当主题文件中声明了 RGBA 格式的背景，",
-  "Or when using the system frame#!settings.comments.2.terminal.style.opacity": "或者是使用系统框架时将不起作用",
+  "It will not work if RGBA background is specified in theme file#!settings.comments.1.terminal.style.opacity": "当主题文件中声明了 RGBA 格式的背景时将不起作用",
   "Font Size#!settings.label.terminal.style.fontSize": "字体大小",
   "Font size for window in pixels#!settings.comments.0.terminal.style.fontSize": "窗口的字体尺寸像素数",
   "Font Family#!settings.label.terminal.style.fontFamily": "字体名称",

diff --git a/main/lib/theme.ts b/main/lib/theme.ts
@@ -84,6 +84,12 @@ const themeRef = computed(async () => {
   }
   const accentColor = systemPreferences.getAccentColor()
   theme.systemAccent = accentColor ? `#${accentColor.slice(0, 6)}` : ''
+  theme.vibrancy = process.platform === 'darwin'
+    ? settings['terminal.style.frameType'] === 'system' || theme.opacity === 0
+    : false
+  if (theme.vibrancy) {
+    theme.opacity = (1 - (1 - theme.opacity) ** 0.5)
+  }
   theme.variables = Object.fromEntries([
     ...Object.entries(CSS_COLORS).map(([key, attr]) => {
       let value = theme[key]
@@ -115,7 +121,7 @@ function handleThemeMessages() {
     const backgroundRGBA = toRGBA(theme.background!)
     themeOptionsRef.value = {
       backgroundColor: toElectronColor({ ...backgroundRGBA, a: 0 }),
-      vibrancy: theme.opacity === 0 ? 'sidebar' : undefined,
+      vibrancy: theme.vibrancy ? 'sidebar' : undefined,
     }
     // Enable system dark mode
     nativeTheme.themeSource = theme.type

diff --git a/main/lib/window.ts b/main/lib/window.ts
@@ -31,7 +31,7 @@ async function createWindow(...args: string[]) {
       ],
     },
   }
-  if (frameType === 'immersive') {
+  if (frameType !== 'system') {
     options.titleBarStyle = process.platform === 'darwin' ? 'hiddenInset' : 'hidden'
     // Transparent window on Windows will lose border and shadow
     options.transparent = process.platform !== 'win32'

diff --git a/renderer/components/app.vue b/renderer/components/app.vue
@@ -19,7 +19,7 @@ import {
   handleTerminalMessages,
   createTerminalTab,
 } from '../compositions/terminal'
-import { injectTheme } from '../compositions/theme'
+import { injectTheme, useTheme } from '../compositions/theme'
 import FindBox from './find-box.vue'
 import TabList from './tab-list.vue'
 import TerminalTeletype from './terminal-teletype.vue'
@@ -32,6 +32,7 @@ const isTabListEnabled = $(useIsTabListEnabled())
 const terminal = $(useCurrentTerminal())
 const tabs = $(useTerminalTabs())
 const willQuit = $(useWillQuit())
+const theme = $(useTheme())
 
 const slots = commas.proxy.context.getCollection('@ui-slot')
 
@@ -73,7 +74,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="['app', { opaque: isFullscreen }]">
+  <div :class="['app', { 'is-opaque': isFullscreen, 'is-vibrancy': theme.vibrancy }]">
     <TitleBar />
     <div class="content">
       <TabList v-show="isTabListEnabled" />
@@ -146,9 +147,12 @@ onMounted(() => {
   overflow: hidden;
   background: rgb(var(--theme-background) / var(--theme-opacity));
   transition: background 0.2s;
-  &.opaque {
+  &.is-opaque {
     background: rgb(var(--theme-background));
   }
+  &.is-vibrancy {
+    background: transparent;
+  }
 }
 .content {
   z-index: 1;
@@ -162,5 +166,8 @@ onMounted(() => {
   flex: auto;
   flex-direction: column;
   width: 0;
+  .app.is-vibrancy & {
+    background: rgb(var(--theme-background) / var(--theme-opacity));
+  }
 }
 </style>
diff --git a/renderer/components/title-bar.vue b/renderer/components/title-bar.vue
@@ -21,7 +21,7 @@ let iconBuffer = $ref<Buffer | undefined>()
 let branch = $ref('')
 
 const isEnabled = $computed(() => {
-  return settings['terminal.style.frameType'] === 'immersive'
+  return settings['terminal.style.frameType'] !== 'system'
 })
 
 const directory = $computed(() => {

diff --git a/resources/settings.spec.json b/resources/settings.spec.json
@@ -179,8 +179,7 @@
     "label": "Background Opacity",
     "comments": [
       "Background opacity of window",
-      "It will not work if RGBA background is specified in theme file",
-      "Or when using the system frame"
+      "It will not work if RGBA background is specified in theme file"
     ],
     "schema": {
       "type": "number",

diff --git a/typings/theme.ts b/typings/theme.ts
@@ -6,4 +6,5 @@ export interface Theme extends ITheme {
   systemAccent: string,
   opacity: number,
   variables: Record<string, string>,
+  vibrancy: boolean,
 }