fix(gpt-runner-web): add custom theme

2023-07-10 18:31:49 +08:00
parent f28187de29
commit f244c72291
8 changed files with 127 additions and 5 deletions
--- a/packages/gpt-runner-vscode/src/register/webview.ts
+++ b/packages/gpt-runner-vscode/src/register/webview.ts
@@ -118,9 +118,10 @@ class ChatViewProvider implements vscode.WebviewViewProvider {
        showDiffCodesBtn: true,
        showInsertCodesBtn: true,
        defaultLangId: '${getLang()}',
+        defaultTheme: 'vscodeDynamic',
        showIdeFileContextOptions: true,
        showUserSelectedTextContextOptions: true,
-        editFileInIde: true
+        editFileInIde: true,
      }

      window.addEventListener('message', event => {
--- a/packages/gpt-runner-web/client/src/components/logo/index.tsx
+++ b/packages/gpt-runner-web/client/src/components/logo/index.tsx
@@ -6,7 +6,7 @@ export interface LogoProps extends React.SVGProps<SVGSVGElement> {
 }

 export const Logo: FC<LogoProps> = memo((props) => {
-  const { color = 'var(--link-foreground)', ...otherProps } = props
+  const { color = '#19c37d', ...otherProps } = props

  return <svg width="100%" height="100%" viewBox="0 0 395.52 53.60552078266557" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" {...otherProps}>
    <g transform="matrix(1,0,0,1,0,10.897599999999997)"><svg width="103.85"
--- a/packages/gpt-runner-web/client/src/helpers/global-config.ts
+++ b/packages/gpt-runner-web/client/src/helpers/global-config.ts
@@ -1,6 +1,7 @@
 import { getSearchParams } from '@nicepkg/gpt-runner-shared/browser'
 import type { LocaleLang } from '@nicepkg/gpt-runner-shared/common'
 import { EnvConfig, toUnixPath, urlRemoveLocalhost } from '@nicepkg/gpt-runner-shared/common'
+import type { ThemeName } from '../styles/themes'
 import { getLang } from './i18n'

 export interface GlobalConfig {
@@ -15,6 +16,7 @@ export interface GlobalConfig {
  showIdeFileContextOptions: boolean
  showUserSelectedTextContextOptions: boolean
  editFileInIde: boolean
+  defaultTheme: ThemeName
 }

 window.__DEFAULT_GLOBAL_CONFIG__ = {
@@ -29,6 +31,7 @@ window.__DEFAULT_GLOBAL_CONFIG__ = {
  showIdeFileContextOptions: false,
  showUserSelectedTextContextOptions: false,
  editFileInIde: false,
+  defaultTheme: 'default',
 }

 export function getGlobalConfig() {
--- a/packages/gpt-runner-web/client/src/pages/chat/components/settings/components/general-settings/index.tsx
+++ b/packages/gpt-runner-web/client/src/pages/chat/components/settings/components/general-settings/index.tsx
@@ -31,6 +31,18 @@ export const GeneralSettings: FC = memo(() => {
      label: 'Default',
      value: 'default',
    },
+    {
+      label: 'GPT-Runner Dark',
+      value: 'gptrDark',
+    },
+    {
+      label: 'GPT-Runner Light',
+      value: 'gptrLight',
+    },
+    {
+      label: 'VSCode Dynamic',
+      value: 'vscodeDynamic',
+    },
    {
      label: 'VSCode Dark',
      value: 'vscodeDark',
--- a/packages/gpt-runner-web/client/src/store/zustand/global/general.slice.ts
+++ b/packages/gpt-runner-web/client/src/store/zustand/global/general.slice.ts
@@ -16,7 +16,7 @@ export type GeneralState = GetState<GeneralSlice>
 function getInitialState() {
  return {
    langId: getGlobalConfig().defaultLangId,
-    themeName: 'default',
+    themeName: getGlobalConfig().defaultTheme,
  } satisfies GeneralState
 }

--- a/packages/gpt-runner-web/client/src/styles/themes/gptr-dark.theme.ts
+++ b/packages/gpt-runner-web/client/src/styles/themes/gptr-dark.theme.ts
@@ -0,0 +1,44 @@
+import type { Theme } from './vscode-dark.theme'
+
+export const gptrDarkTheme: Theme = {
+  '--background': '#1e1e1e',
+  '--contrast-active-border': '#19c37d',
+  '--contrast-border': '#19c37d',
+  '--focus-border': '#19c37d',
+  '--foreground': '#cccccc',
+  '--scrollbar-slider-background': '#79797966',
+  '--scrollbar-slider-hover-background': '#646464b3',
+  '--scrollbar-slider-active-background': '#bfbfbf66',
+  '--badge-background': '#4d4d4d',
+  '--badge-foreground': '#ffffff',
+  '--button-border': 'transparent',
+  '--button-icon-background': 'transparent',
+  '--button-icon-hover-background': 'rgba(90, 93, 94, 0.31)',
+  '--button-primary-background': '#0b4638',
+  '--button-primary-foreground': '#19c37d',
+  '--button-primary-hover-background': '#0f694b',
+  '--button-secondary-background': '#3a3d41',
+  '--button-secondary-foreground': '#ffffff',
+  '--button-secondary-hover-background': '#45494e',
+  '--checkbox-background': '#3c3c3c',
+  '--checkbox-border': '#3c3c3c',
+  '--checkbox-foreground': '#f0f0f0',
+  '--list-active-selection-background': '#19c37d',
+  '--list-active-selection-foreground': '#0b4638',
+  '--list-hover-background': '#2a2d2e',
+  '--divider-background': '#454545',
+  '--dropdown-background': '#3c3c3c',
+  '--dropdown-border': '#3c3c3c',
+  '--dropdown-foreground': '#f0f0f0',
+  '--input-background': '#3c3c3c',
+  '--input-foreground': '#cccccc',
+  '--input-placeholder-foreground': '#cccccc',
+  '--link-active-foreground': '#19c37d',
+  '--link-foreground': '#19c37d',
+  '--progress-background': '#19c37d',
+  '--panel-tab-active-border': '#e7e7e7',
+  '--panel-tab-active-foreground': '#e7e7e7',
+  '--panel-tab-foreground': '#e7e7e799',
+  '--panel-view-background': '#1e1e1e',
+  '--panel-view-border': '#80808059',
+} as const
--- a/packages/gpt-runner-web/client/src/styles/themes/gptr-light.theme.ts
+++ b/packages/gpt-runner-web/client/src/styles/themes/gptr-light.theme.ts
@@ -0,0 +1,57 @@
+import type { Theme } from './vscode-dark.theme'
+
+// const colorShades = {
+//   50: '#e6f2ec',
+//   100: '#c1e4d0',
+//   200: '#9bd6b2',
+//   300: '#74c895',
+//   400: '#4dba77',
+//   500: '#19c37d',
+//   600: '#16af70',
+//   700: '#128c5d',
+//   800: '#0f694b',
+//   900: '#0b4638',
+// };
+
+export const gptrLightTheme: Theme = {
+  '--background': '#ffffff',
+  '--contrast-active-border': '#19c37d',
+  '--contrast-border': '#19c37d',
+  '--focus-border': '#19c37d',
+  '--foreground': '#333333',
+  '--scrollbar-slider-background': '#cccccc',
+  '--scrollbar-slider-hover-background': '#b3b3b3',
+  '--scrollbar-slider-active-background': '#999999',
+  '--badge-background': '#e0e0e0',
+  '--badge-foreground': '#000000',
+  '--button-border': 'transparent',
+  '--button-icon-background': 'transparent',
+  '--button-icon-hover-background': 'rgba(90, 93, 94, 0.31)',
+  '--button-primary-background': '#e6f2ec',
+  '--button-primary-foreground': '#19c37d',
+  '--button-primary-hover-background': '#c1e4d0',
+  '--button-secondary-background': '#f0f0f0',
+  '--button-secondary-foreground': '#000000',
+  '--button-secondary-hover-background': '#e0e0e0',
+  '--checkbox-background': '#f0f0f0',
+  '--checkbox-border': '#f0f0f0',
+  '--checkbox-foreground': '#333333',
+  '--list-active-selection-background': '#19c37d',
+  '--list-active-selection-foreground': '#e6f2ec',
+  '--list-hover-background': '#f5f5f5',
+  '--divider-background': '#e0e0e0',
+  '--dropdown-background': '#f0f0f0',
+  '--dropdown-border': '#f0f0f0',
+  '--dropdown-foreground': '#333333',
+  '--input-background': '#f0f0f0',
+  '--input-foreground': '#333333',
+  '--input-placeholder-foreground': '#999999',
+  '--link-active-foreground': '#19c37d',
+  '--link-foreground': '#19c37d',
+  '--progress-background': '#19c37d',
+  '--panel-tab-active-border': '#cccccc',
+  '--panel-tab-active-foreground': '#333333',
+  '--panel-tab-foreground': '#999999',
+  '--panel-view-background': '#ffffff',
+  '--panel-view-border': '#cccccc',
+} as const
--- a/packages/gpt-runner-web/client/src/styles/themes/index.ts
+++ b/packages/gpt-runner-web/client/src/styles/themes/index.ts
@@ -1,3 +1,5 @@
+import { gptrLightTheme } from './gptr-light.theme'
+import { gptrDarkTheme } from './gptr-dark.theme'
 import { jetbrainsDarkTheme } from './jetbrains-dark.theme'
 import { jetbrainsLightTheme } from './jetbrains-light.theme'
 import type { Theme } from './vscode-dark.theme'
@@ -5,7 +7,10 @@ import { vscodeDarkTheme } from './vscode-dark.theme'
 import { vscodeLightTheme } from './vscode-light.theme'

 export const themeMap = {
-  default: {} as Theme,
+  default: gptrDarkTheme,
+  gptrLight: gptrLightTheme,
+  gptrDark: gptrDarkTheme,
+  vscodeDynamic: {} as Theme,
  vscodeDark: vscodeDarkTheme,
  vscodeLight: vscodeLightTheme,
  jetbrainsDark: jetbrainsDarkTheme,
@@ -13,7 +18,7 @@ export const themeMap = {
 } as const

 export function isDarkTheme(themeName: ThemeName) {
-  const darkThemes: ThemeName[] = ['default', 'vscodeDark', 'jetbrainsDark']
+  const darkThemes: ThemeName[] = ['default', 'gptrDark', 'vscodeDynamic', 'vscodeDark', 'jetbrainsDark']
  return darkThemes.includes(themeName)
 }