feat: light theme

wiidede · Jun 13, 2023 · 2f4556f · 2f4556f
1 parent b4f0c16
commit 2f4556f
Show file tree

Hide file tree

Showing 5 changed files with 1,213 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -25,6 +25,11 @@
   ],
   "contributes": {
     "themes": [
+      {
+        "label": "Liquid Ray Light",
+        "uiTheme": "vs",
+        "path": "./themes/liquid-ray-light.json"
+      },
       {
         "label": "Liquid Ray",
         "uiTheme": "vs-dark",

diff --git a/src/colors.ts b/src/colors.ts
@@ -13,8 +13,8 @@ export const colors = {
 
 // [dark, light]
 export const ThemesColors = {
-  primary: ['#997ADB', '#9D86DE'],
-  primaryLight: ['#C0AEE7', '#C6B5ED'],
+  primary: ['#997ADB', '#5618DB'],
+  primaryLight: ['#C0AEE7', '#8253E7'],
 
   foreground: ['#ACA79F', '#393a34'],
   activeForeground: ['#BCB7B2', '#4e4f47'],
@@ -24,7 +24,7 @@ export const ThemesColors = {
   border: ['#252526', '#ffffff'],
 
   background: ['#252526', '#ffffff'],
-  hoverBackground: ['#29292A', '#ffffff'],
+  hoverBackground: ['#29292A', '#fbfafc'],
   activeBackground: ['#202021', '#f5f5f5'],
   focusBackground: ['#19191A', '#f0f0f0'],
   deepBackground: ['#101011', '#eaeaea'],
@@ -33,34 +33,35 @@ export const ThemesColors = {
   lowActiveBackground: ['#292929', '#E7E5DB'],
   lowBorder: ['#252525', '#E7E5DB'],
 
-  comment: ['#9D9994', '#9E978E'],
-  string: ['#F1F0B0', '#F9F6B6'],
-  variable: ['#FFA7D1', '#FF9BCB'],
-  keyword: ['#78E6D0', '#9DE7D7'],
-  number: ['#FFAD93', '#FFB098'],
-  boolean: ['#FFBBA4', '#FFC3AF'],
-  operator: ['#F686E1', '#F57FE0'],
-  function: ['#29C0E7', '#00BCE3'],
-  constant: ['#ADF29C', '#A9EE8A'],
-  class: ['#8A69D4', '#7B5EC6'],
-  interface: ['#B29EE7', '#AB92E1'],
-  type: ['#53CFBA', '#2BC9AF'],
-  builtin: ['#19C2A9', '#00C0A3'],
-  property: ['#BDF4AA', '#B9EFA3'],
-  namespace: ['#FFC7CE', '#FFC0C8'],
-  punctuation: ['#C4D5C6', '#B9CDBE'],
-  decorator: ['#F3B198', '#F3B39C'],
-  regex: ['#BA93DF', '#BF9BDE'],
+  comment: ['#9D9994', '#BDB4AA'],
+  string: ['#F1F0B0', '#4F4E00'],
+  variable: ['#FFA7D1', '#B8477D'],
+  keyword: ['#78E6D0', '#128A72'],
+  number: ['#FFAD93', '#FF6230'],
+  boolean: ['#FFBBA4', '#B53F16'],
+  operator: ['#F686E1', '#F65BD9'],
+  function: ['#29C0E7', '#0F9BBF'],
+  constant: ['#ADF29C', '#83b46f'],
+  class: ['#8A69D4', '#8A69D4'],
+  interface: ['#B29EE7', '#B29EE7'],
+  type: ['#53CFBA', '#348275'],
+  builtin: ['#19C2A9', '#149E8A'],
+  property: ['#BDF4AA', '#279600'],
+  namespace: ['#FFC7CE', '#AB858A'],
+  punctuation: ['#C4D5C6', '#6BB373'],
+  decorator: ['#F3B198', '#A84E2C'],
+  regex: ['#BA93DF', '#BA93DF'],
 
   // colors
-  green: ['#44D62C', '#3BD23D'],
+  green: ['#44D62C', '#0EAB10'],
   cyan: ['#00B796', '#00AC8E'],
   blue: ['#009ACE', '#009CCD'],
   red: ['#FF7276', '#FF7477'],
-  orange: ['#FFAA4D', '#FFAA52'],
-  yellow: ['#FFE900', '#FFE916'],
+  orange: ['#FFAA4D', '#E87600'],
+  yellow: ['#FFE900', '#BDAA00'],
   magenta: ['#EA27C2', '#E838BF'],
   purple: ['#775FC0', '#856ACE'],
 
   colorful: ['#775FC0', '#71D34C', '#FBEA4E', '#009ACE', '#EE7A7A', '#EB50B1', '#52B498', '#F3AE5F'],
+  colorfulLight: ['#856ACE', '#0EAB10', '#DEC800', '#009ACE', '#EE7A7A', '#EB50B1', '#52B498', '#E08F31'],
 }
diff --git a/src/index.ts b/src/index.ts
@@ -3,13 +3,13 @@ import getTheme from './theme'
 
 fs.mkdir('./themes', { recursive: true })
   .then(() => Promise.all([
-    // fs.writeFile(
-    //   './themes/vitesse-light.json',
-    //   `${JSON.stringify(getTheme({
-    //     style: 'light',
-    //     name: 'Vitesse Light',
-    //   }), null, 2)}\n`,
-    // ),
+    fs.writeFile(
+      './themes/liquid-ray-light.json',
+      `${JSON.stringify(getTheme({
+        style: 'light',
+        name: 'Liquid Ray Light',
+      }), null, 2)}\n`,
+    ),
     fs.writeFile(
       './themes/liquid-ray-theme.json',
       `${JSON.stringify(getTheme({

diff --git a/src/theme.ts b/src/theme.ts
@@ -33,6 +33,8 @@ export default function getTheme({ style, name, soft = false, black = false }) {
   const selectionBackgroundActive = pick({ light: '#22222215', dark: '#eeeeee15' })
   const selectionBackground = pick({ light: '#22222215', dark: '#eeeeee15' })
 
+  const colorful = pick({ light: ThemesColors.colorfulLight, dark: ThemesColors.colorful })
+
   const theme = {
     name,
     base: pick({ light: 'vs', dark: 'vs-dark' }),
@@ -234,14 +236,14 @@ export default function getTheme({ style, name, soft = false, black = false }) {
       'editorGutter.addedBackground': themeColor('green'),
       'editorGutter.deletedBackground': themeColor('red'),
 
-      'editorBracketHighlight.foreground1': ThemesColors.colorful[0],
-      'editorBracketHighlight.foreground2': ThemesColors.colorful[1],
-      'editorBracketHighlight.foreground3': ThemesColors.colorful[2],
-      'editorBracketHighlight.foreground4': ThemesColors.colorful[3],
-      'editorBracketHighlight.foreground5': ThemesColors.colorful[4],
-      'editorBracketHighlight.foreground6': ThemesColors.colorful[5],
-      'editorBracketHighlight.foreground7': ThemesColors.colorful[6],
-      'editorBracketHighlight.foreground8': ThemesColors.colorful[7],
+      'editorBracketHighlight.foreground1': colorful[0],
+      'editorBracketHighlight.foreground2': colorful[1],
+      'editorBracketHighlight.foreground3': colorful[2],
+      'editorBracketHighlight.foreground4': colorful[3],
+      'editorBracketHighlight.foreground5': colorful[4],
+      'editorBracketHighlight.foreground6': colorful[5],
+      'editorBracketHighlight.foreground7': colorful[6],
+      'editorBracketHighlight.foreground8': colorful[7],
 
       'debugToolBar.background': background,
       'editor.stackFrameHighlightBackground': `${primary}80`, // pick({ light: primer.yellow[1], dark: '#a707' }),
@@ -275,8 +277,8 @@ export default function getTheme({ style, name, soft = false, black = false }) {
       'statusBarItem.remoteBackground': background,
       'statusBarItem.remoteForeground': activeForeground,
 
-      'editorStickyScroll.background': activeBackground,
-      'editorStickyScrollHover.background': hoverBackground,
+      'editorStickyScroll.background': pick({ light: hoverBackground, dark: activeBackground }),
+      'editorStickyScrollHover.background': pick({ light: activeBackground, dark: hoverBackground }),
     },
     semanticHighlighting: true,
     semanticTokenColors: {