Update Light & Dark themes

Nate Butler created

Change summary

crates/zed/assets/themes/dark.json    |  27 ++--
crates/zed/assets/themes/light.json   | 141 ++++++++++++++--------------
styles/src/styleTree/editor.ts        |   7 -
styles/src/styleTree/selectorModal.ts |   2 
styles/src/styleTree/workspace.ts     |   2 
styles/src/themes/dark.ts             |  18 +-
styles/src/themes/light.ts            |  42 ++++----
7 files changed, 119 insertions(+), 120 deletions(-)

Detailed changes

crates/zed/assets/themes/dark.json 🔗

@@ -51,7 +51,7 @@
     "empty": {
       "text": {
         "family": "Zed Sans",
-        "color": "#808080",
+        "color": "#474747",
         "size": 14
       },
       "padding": {
@@ -272,7 +272,7 @@
         }
       },
       "hovered_sign_in_prompt": {
-        "family": "Zed Mono",
+        "family": "Zed Sans",
         "color": "#ffffff",
         "size": 13,
         "underline": true,
@@ -327,17 +327,17 @@
   "editor": {
     "text_color": "#d5d5d5",
     "background": "#000000",
-    "active_line_background": "#0e0e0e",
-    "code_actions_indicator": "#9c9c9c",
+    "active_line_background": "#ffffff12",
+    "code_actions_indicator": "#555555",
     "diff_background_deleted": "#f15656",
     "diff_background_inserted": "#1b9447",
-    "document_highlight_read_background": "#14a89829",
-    "document_highlight_write_background": "#14a89852",
+    "document_highlight_read_background": "#ffffff1f",
+    "document_highlight_write_background": "#ffffff29",
     "error_color": "#f15656",
     "gutter_background": "#000000",
     "gutter_padding_factor": 3.5,
-    "highlighted_line_background": "#070707",
-    "line_number": "#808080",
+    "highlighted_line_background": "#ffffff1f",
+    "line_number": "#474747",
     "line_number_active": "#ffffff",
     "rename_fade": 0.6,
     "unnecessary_code_fade": 0.5,
@@ -400,14 +400,15 @@
           "right": 6,
           "top": 2
         },
-        "background": "#070707"
+        "background": "#ffffff14"
       },
       "margin": {
         "left": -14
       },
       "match_highlight": {
-        "color": "#4f8ff7",
-        "weight": "normal"
+        "family": "Zed Mono",
+        "color": "#1096d3",
+        "size": 14
       },
       "selected_item": {
         "corner_radius": 6,
@@ -417,7 +418,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#0e0e0e"
+        "background": "#ffffff1f"
       }
     },
     "diagnostic_header": {
@@ -453,7 +454,7 @@
       }
     },
     "diagnostic_path_header": {
-      "background": "#0e0e0e",
+      "background": "#ffffff12",
       "text_scale_factor": 0.857,
       "filename": {
         "family": "Zed Mono",

crates/zed/assets/themes/light.json 🔗

@@ -1,6 +1,6 @@
 {
   "selector": {
-    "background": "#f1f1f1",
+    "background": "#f8f8f8",
     "corner_radius": 6,
     "padding": 8,
     "item": {
@@ -42,16 +42,16 @@
         "weight": "bold",
         "size": 14
       },
-      "background": "#d5d5d5"
+      "background": "#dcdcdc"
     },
     "border": {
-      "color": "#c6c6c6",
+      "color": "#d5d5d5",
       "width": 1
     },
     "empty": {
       "text": {
         "family": "Zed Sans",
-        "color": "#636363",
+        "color": "#808080",
         "size": 14
       },
       "padding": {
@@ -79,7 +79,7 @@
         "size": 14
       },
       "border": {
-        "color": "#e3e3e3",
+        "color": "#d5d5d5",
         "width": 1
       },
       "padding": {
@@ -103,13 +103,13 @@
     }
   },
   "workspace": {
-    "background": "#f1f1f1",
+    "background": "#f8f8f8",
     "leader_border_opacity": 0.7,
     "leader_border_width": 2,
     "tab": {
       "height": 32,
-      "background": "#f1f1f1",
-      "icon_close": "#717171",
+      "background": "#f8f8f8",
+      "icon_close": "#9c9c9c",
       "icon_close_active": "#000000",
       "icon_conflict": "#f7bf17",
       "icon_dirty": "#135acd",
@@ -121,7 +121,7 @@
         "size": 14
       },
       "border": {
-        "color": "#c6c6c6",
+        "color": "#d5d5d5",
         "width": 1,
         "left": true,
         "bottom": true,
@@ -135,7 +135,7 @@
     "active_tab": {
       "height": 32,
       "background": "#ffffff",
-      "icon_close": "#717171",
+      "icon_close": "#9c9c9c",
       "icon_close_active": "#000000",
       "icon_conflict": "#f7bf17",
       "icon_dirty": "#135acd",
@@ -147,7 +147,7 @@
         "size": 14
       },
       "border": {
-        "color": "#c6c6c6",
+        "color": "#d5d5d5",
         "width": 1,
         "left": true,
         "bottom": false,
@@ -160,15 +160,15 @@
     },
     "left_sidebar": {
       "width": 30,
-      "background": "#f1f1f1",
+      "background": "#f8f8f8",
       "border": {
-        "color": "#c6c6c6",
+        "color": "#d5d5d5",
         "width": 1,
         "right": true
       },
       "item": {
         "height": 32,
-        "icon_color": "#555555",
+        "icon_color": "#717171",
         "icon_size": 18
       },
       "active_item": {
@@ -177,7 +177,7 @@
         "icon_size": 18
       },
       "resize_handle": {
-        "background": "#c6c6c6",
+        "background": "#d5d5d5",
         "padding": {
           "left": 1
         }
@@ -185,15 +185,15 @@
     },
     "right_sidebar": {
       "width": 30,
-      "background": "#f1f1f1",
+      "background": "#f8f8f8",
       "border": {
-        "color": "#c6c6c6",
+        "color": "#d5d5d5",
         "width": 1,
         "left": true
       },
       "item": {
         "height": 32,
-        "icon_color": "#555555",
+        "icon_color": "#717171",
         "icon_size": 18
       },
       "active_item": {
@@ -202,14 +202,14 @@
         "icon_size": 18
       },
       "resize_handle": {
-        "background": "#c6c6c6",
+        "background": "#d5d5d5",
         "padding": {
           "left": 1
         }
       }
     },
     "pane_divider": {
-      "color": "#e3e3e3",
+      "color": "#d5d5d5",
       "width": 1
     },
     "status_bar": {
@@ -238,8 +238,8 @@
     "titlebar": {
       "avatar_width": 18,
       "height": 32,
-      "background": "#e3e3e3",
-      "share_icon_color": "#555555",
+      "background": "#eaeaea",
+      "share_icon_color": "#717171",
       "share_icon_active_color": "#484bed",
       "title": {
         "family": "Zed Sans",
@@ -258,7 +258,7 @@
         "width": 12
       },
       "border": {
-        "color": "#c6c6c6",
+        "color": "#d5d5d5",
         "width": 1,
         "bottom": true
       },
@@ -272,7 +272,7 @@
         }
       },
       "hovered_sign_in_prompt": {
-        "family": "Zed Mono",
+        "family": "Zed Sans",
         "color": "#000000",
         "size": 13,
         "underline": true,
@@ -281,7 +281,7 @@
         }
       },
       "offline_icon": {
-        "color": "#555555",
+        "color": "#717171",
         "width": 16,
         "padding": {
           "right": 4
@@ -297,7 +297,7 @@
       "height": 34,
       "background": "#ffffff",
       "border": {
-        "color": "#e3e3e3",
+        "color": "#d5d5d5",
         "width": 1,
         "bottom": true
       },
@@ -327,16 +327,16 @@
   "editor": {
     "text_color": "#1c1c1c",
     "background": "#ffffff",
-    "active_line_background": "#f1f1f1",
-    "code_actions_indicator": "#555555",
+    "active_line_background": "#0000000f",
+    "code_actions_indicator": "#9c9c9c",
     "diff_background_deleted": "#fcc6c6",
     "diff_background_inserted": "#b7f9ce",
-    "document_highlight_read_background": "#de900c0f",
-    "document_highlight_write_background": "#de900c42",
+    "document_highlight_read_background": "#0000000f",
+    "document_highlight_write_background": "#00000029",
     "error_color": "#eb2d2d",
     "gutter_background": "#ffffff",
     "gutter_padding_factor": 3.5,
-    "highlighted_line_background": "#f1f1f1",
+    "highlighted_line_background": "#0000001f",
     "line_number": "#aaaaaa",
     "line_number_active": "#000000",
     "rename_fade": 0.6,
@@ -380,7 +380,7 @@
       "corner_radius": 6,
       "padding": 6,
       "border": {
-        "color": "#e3e3e3",
+        "color": "#d5d5d5",
         "width": 1
       },
       "item": {
@@ -400,14 +400,15 @@
           "right": 6,
           "top": 2
         },
-        "background": "#f8f8f8"
+        "background": "#00000008"
       },
       "margin": {
         "left": -14
       },
       "match_highlight": {
-        "color": "#1819a1",
-        "weight": "normal"
+        "family": "Zed Mono",
+        "color": "#484bed",
+        "size": 14
       },
       "selected_item": {
         "corner_radius": 6,
@@ -417,15 +418,15 @@
           "right": 6,
           "top": 2
         },
-        "background": "#f1f1f1"
+        "background": "#0000000f"
       }
     },
     "diagnostic_header": {
-      "background": "#f1f1f1",
+      "background": "#f8f8f8",
       "icon_width_factor": 1.5,
       "text_scale_factor": 0.857,
       "border": {
-        "color": "#e3e3e3",
+        "color": "#d5d5d5",
         "width": 1,
         "bottom": true,
         "top": true
@@ -453,7 +454,7 @@
       }
     },
     "diagnostic_path_header": {
-      "background": "#f1f1f1",
+      "background": "#0000000f",
       "text_scale_factor": 0.857,
       "filename": {
         "family": "Zed Mono",
@@ -473,7 +474,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#c6c6c6",
+          "color": "#d5d5d5",
           "width": 1,
           "top": true
         }
@@ -496,7 +497,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#c6c6c6",
+          "color": "#d5d5d5",
           "width": 1,
           "top": true
         }
@@ -519,7 +520,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#c6c6c6",
+          "color": "#d5d5d5",
           "width": 1,
           "top": true
         }
@@ -542,7 +543,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#c6c6c6",
+          "color": "#d5d5d5",
           "width": 1,
           "top": true
         }
@@ -565,7 +566,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#c6c6c6",
+          "color": "#d5d5d5",
           "width": 1,
           "top": true
         }
@@ -588,7 +589,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#c6c6c6",
+          "color": "#d5d5d5",
           "width": 1,
           "top": true
         }
@@ -611,7 +612,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#c6c6c6",
+          "color": "#d5d5d5",
           "width": 1,
           "top": true
         }
@@ -634,7 +635,7 @@
       "text_scale_factor": 0.857,
       "header": {
         "border": {
-          "color": "#c6c6c6",
+          "color": "#d5d5d5",
           "width": 1,
           "top": true
         }
@@ -708,7 +709,7 @@
     },
     "entry": {
       "height": 22,
-      "icon_color": "#717171",
+      "icon_color": "#9c9c9c",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
@@ -719,8 +720,8 @@
     },
     "hovered_entry": {
       "height": 22,
-      "background": "#e3e3e3",
-      "icon_color": "#717171",
+      "background": "#eaeaea",
+      "icon_color": "#9c9c9c",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
@@ -731,7 +732,7 @@
     },
     "selected_entry": {
       "height": 22,
-      "icon_color": "#717171",
+      "icon_color": "#9c9c9c",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
@@ -742,8 +743,8 @@
     },
     "hovered_selected_entry": {
       "height": 22,
-      "background": "#e3e3e3",
-      "icon_color": "#717171",
+      "background": "#eaeaea",
+      "icon_color": "#9c9c9c",
       "icon_size": 8,
       "icon_spacing": 8,
       "text": {
@@ -827,7 +828,7 @@
             "right": 8
           }
         },
-        "background": "#e3e3e3",
+        "background": "#eaeaea",
         "corner_radius": 6
       },
       "active_item": {
@@ -862,7 +863,7 @@
             "right": 8
           }
         },
-        "background": "#e3e3e3",
+        "background": "#eaeaea",
         "corner_radius": 6
       },
       "menu": {
@@ -870,7 +871,7 @@
         "corner_radius": 6,
         "padding": 4,
         "border": {
-          "color": "#c6c6c6",
+          "color": "#d5d5d5",
           "width": 1
         },
         "shadow": {
@@ -961,7 +962,7 @@
         "selection": "#2472f23d"
       },
       "border": {
-        "color": "#e3e3e3",
+        "color": "#d5d5d5",
         "width": 1
       },
       "padding": {
@@ -980,7 +981,7 @@
       "right": 12
     },
     "host_row_height": 28,
-    "tree_branch_color": "#f1f1f1",
+    "tree_branch_color": "#e3e3e3",
     "tree_branch_width": 1,
     "host_avatar": {
       "corner_radius": 10,
@@ -1031,7 +1032,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#f1f1f1",
+      "background": "#f8f8f8",
       "corner_radius": 6
     },
     "hovered_shared_project": {
@@ -1052,7 +1053,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#e3e3e3",
+      "background": "#eaeaea",
       "corner_radius": 6
     },
     "unshared_project": {
@@ -1096,17 +1097,17 @@
     }
   },
   "search": {
-    "match_background": "#993bf31f",
+    "match_background": "#eb2d2d33",
     "tab_icon_spacing": 4,
     "tab_icon_width": 14,
     "active_hovered_option_button": {
       "family": "Zed Mono",
       "color": "#474747",
       "size": 14,
-      "background": "#e3e3e3",
+      "background": "#eaeaea",
       "corner_radius": 6,
       "border": {
-        "color": "#c6c6c6",
+        "color": "#d5d5d5",
         "width": 1
       },
       "margin": {
@@ -1124,10 +1125,10 @@
       "family": "Zed Mono",
       "color": "#474747",
       "size": 14,
-      "background": "#e3e3e3",
+      "background": "#eaeaea",
       "corner_radius": 6,
       "border": {
-        "color": "#c6c6c6",
+        "color": "#d5d5d5",
         "width": 1
       },
       "margin": {
@@ -1161,7 +1162,7 @@
         "size": 14
       },
       "border": {
-        "color": "#e3e3e3",
+        "color": "#d5d5d5",
         "width": 1
       },
       "margin": {
@@ -1178,10 +1179,10 @@
       "family": "Zed Mono",
       "color": "#474747",
       "size": 14,
-      "background": "#e3e3e3",
+      "background": "#eaeaea",
       "corner_radius": 6,
       "border": {
-        "color": "#c6c6c6",
+        "color": "#d5d5d5",
         "width": 1
       },
       "margin": {
@@ -1238,10 +1239,10 @@
       "family": "Zed Mono",
       "color": "#474747",
       "size": 14,
-      "background": "#f1f1f1",
+      "background": "#f8f8f8",
       "corner_radius": 6,
       "border": {
-        "color": "#c6c6c6",
+        "color": "#d5d5d5",
         "width": 1
       },
       "margin": {

styles/src/styleTree/editor.ts 🔗

@@ -42,7 +42,7 @@ export default function editor(theme: Theme) {
         textColor: theme.syntax.primary.color.value,
         background: backgroundColor(theme, 500),
         activeLineBackground: theme.editor.line.active.value,
-        codeActionsIndicator: iconColor(theme, "secondary"),
+        codeActionsIndicator: iconColor(theme, "muted"),
         diffBackgroundDeleted: backgroundColor(theme, "error"),
         diffBackgroundInserted: backgroundColor(theme, "ok"),
         documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
@@ -78,10 +78,7 @@ export default function editor(theme: Theme) {
             margin: {
                 left: -14,
             },
-            matchHighlight: {
-                color: theme.syntax.keyword.color.value,
-                weight: theme.syntax.keyword.weight.value,
-            },
+            matchHighlight: text(theme, "mono", "feature"),
             selectedItem: {
                 ...autocompleteItem,
                 background: backgroundColor(theme, 500, "active"),

styles/src/styleTree/selectorModal.ts 🔗

@@ -28,7 +28,7 @@ export default function selectorModal(theme: Theme): Object {
         activeItem,
         border: border(theme, "primary"),
         empty: {
-            text: text(theme, "sans", "muted"),
+            text: text(theme, "sans", "placeholder"),
             padding: {
                 bottom: 4,
                 left: 16,

styles/src/styleTree/workspace.ts 🔗

@@ -117,7 +117,7 @@ export default function workspace(theme: Theme) {
             signInPrompt,
             hoveredSignInPrompt: {
                 ...signInPrompt,
-                ...text(theme, "mono", "active"),
+                ...text(theme, "sans", "active"),
                 size: 13,
             },
             offlineIcon: {

styles/src/themes/dark.ts 🔗

@@ -6,19 +6,19 @@ const backgroundColor = {
     100: {
         base: colors.neutral[750],
         hovered: colors.neutral[725],
-        active: colors.neutral[700],
+        active: colors.neutral[800],
         focused: colors.neutral[675],
     },
     300: {
         base: colors.neutral[800],
         hovered: colors.neutral[775],
         active: colors.neutral[750],
-        focused: colors.neutral[725],
+        focused: colors.neutral[775],
     },
     500: {
         base: colors.neutral[900],
-        hovered: colors.neutral[875],
-        active: colors.neutral[850],
+        hovered: withOpacity(colors.neutral[0], 0.08),
+        active: withOpacity(colors.neutral[0], 0.12),
         focused: colors.neutral[825],
     },
     ok: {
@@ -103,23 +103,23 @@ const editor = {
     indent_guide: borderColor.muted,
     indent_guide_active: borderColor.secondary,
     line: {
-        active: backgroundColor[500].active,
-        highlighted: backgroundColor[500].hovered,
+        active: withOpacity(colors.neutral[0], 0.07),
+        highlighted: withOpacity(colors.neutral[0], 0.12),
         inserted: backgroundColor.ok.active,
         deleted: backgroundColor.error.active,
         modified: backgroundColor.info.active,
     },
     highlight: {
         selection: player[1].selectionColor,
-        occurrence: withOpacity(colors.teal[500], 0.16),
-        activeOccurrence: withOpacity(colors.teal[500], 0.32),
+        occurrence: withOpacity(colors.neutral[0], 0.12),
+        activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
         matchingBracket: backgroundColor[500].active,
         match: withOpacity(colors.sky[500], 0.16),
         activeMatch: withOpacity(colors.sky[800], 0.32),
         related: backgroundColor[500].focused,
     },
     gutter: {
-        primary: textColor.muted,
+        primary: textColor.placeholder,
         active: textColor.active,
     },
 };

styles/src/themes/light.ts 🔗

@@ -4,22 +4,22 @@ import Theme, { buildPlayer, Syntax } from "./theme";
 
 const backgroundColor = {
     100: {
-        base: colors.neutral[100],
-        hovered: colors.neutral[150],
-        active: colors.neutral[200],
-        focused: colors.neutral[150],
-    },
-    300: {
-        base: colors.neutral[50],
+        base: colors.neutral[75],
         hovered: colors.neutral[100],
         active: colors.neutral[150],
         focused: colors.neutral[100],
     },
+    300: {
+        base: colors.neutral[25],
+        hovered: colors.neutral[75],
+        active: colors.neutral[125],
+        focused: colors.neutral[75],
+    },
     500: {
         base: colors.neutral[0],
-        hovered: colors.neutral[25],
-        active: colors.neutral[50],
-        focused: colors.neutral[75],
+        hovered: withOpacity(colors.neutral[900], 0.03),
+        active: withOpacity(colors.neutral[900], 0.06),
+        focused: colors.neutral[50],
     },
     ok: {
         base: colors.green[100],
@@ -48,9 +48,9 @@ const backgroundColor = {
 };
 
 const borderColor = {
-    primary: colors.neutral[200],
-    secondary: colors.neutral[100],
-    muted: colors.neutral[50],
+    primary: colors.neutral[150],
+    secondary: colors.neutral[150],
+    muted: colors.neutral[100],
     focused: colors.neutral[100],
     active: colors.neutral[250],
     ok: colors.green[200],
@@ -74,8 +74,8 @@ const textColor = {
 
 const iconColor = {
     primary: colors.neutral[700],
-    secondary: colors.neutral[600],
-    muted: colors.neutral[500],
+    secondary: colors.neutral[500],
+    muted: colors.neutral[350],
     placeholder: colors.neutral[300],
     active: colors.neutral[900],
     feature: colors.indigo[500],
@@ -102,19 +102,19 @@ const editor = {
     indent_guide: borderColor.muted,
     indent_guide_active: borderColor.secondary,
     line: {
-        active: backgroundColor[500].active,
-        highlighted: backgroundColor[500].active,
+        active: withOpacity(colors.neutral[900], 0.06),
+        highlighted: withOpacity(colors.neutral[900], 0.12),
         inserted: backgroundColor.ok.active,
         deleted: backgroundColor.error.active,
         modified: backgroundColor.info.active,
     },
     highlight: {
         selection: player[1].selectionColor,
-        occurrence: withOpacity(colors.amber[500], 0.06),
-        activeOccurrence: withOpacity(colors.amber[500], 0.26),
+        occurrence: withOpacity(colors.neutral[900], 0.06),
+        activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
         matchingBracket: colors.neutral[0],
-        match: withOpacity(colors.purple[500], 0.12),
-        activeMatch: withOpacity(colors.purple[400], 0.36),
+        match: withOpacity(colors.red[500], 0.2),
+        activeMatch: withOpacity(colors.indigo[400], 0.36),
         related: colors.neutral[0],
     },
     gutter: {