modes folder and argument parsing

3 files changed, 703 insertions, 350 deletions

diff --git a/generate_theme b/generate_theme
index 1646593..67accbb 100755
--- a/generate_theme
+++ b/generate_theme
@@ -2,12 +2,51 @@
 
 # shellcheck disable=SC2154
 
-# Your wal colour scheme file
-WAL_COLOURS_FILE="${HOME}/.cache/wal/colors.json"
+# Default mode
+MODE="original"
 # The directory of this script, so that this script can be called from anywhere
 EXTENSION_DIRECTORY="$(dirname "${0}")"
+
+# Parse command line arguments
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        --mode)
+            MODE="$2"
+            shift 2
+            ;;
+        --list)
+            echo "Available modes:"
+            for template in "${EXTENSION_DIRECTORY}/modes"/*.json.template; do
+                if [[ -f "$template" ]]; then
+                    echo "  $(basename "$template" .json.template)"
+                fi
+            done
+            exit 0
+            ;;
+        --help|-h)
+            echo "Usage: $0 [--mode MODE] [--list]"
+            echo ""
+            echo "Options:"
+            echo "  --mode MODE    Select theme mode (default: original)"
+            echo "  --list         List available modes"
+            echo "  --help, -h     Show this help"
+            echo ""
+            exit 0
+            ;;
+        *)
+            echo "Unknown option: $1"
+            echo "Use --help for usage information"
+            exit 1
+            ;;
+    esac
+done
+
+# Your wal colour scheme file
+WAL_COLOURS_FILE="${HOME}/.cache/wal/colors.json"
 # The file to write the generated theme to, and that Zed will read
 THEME_FILE="${EXTENSION_DIRECTORY}/themes/wal-theme.json"
+# The template file for the selected mode (contains theme JSON with variable placeholders)
+TEMPLATE_FILE="${EXTENSION_DIRECTORY}/modes/${MODE}.json.template"
 
 # If the wal colour scheme file does not exist, exit with an error
 if [[ ! -f "${WAL_COLOURS_FILE}" ]]; then
@@ -15,361 +54,46 @@ if [[ ! -f "${WAL_COLOURS_FILE}" ]]; then
 	exit 1
 fi
 
+# Check if mode file exists
+if [[ ! -f "${TEMPLATE_FILE}" ]]; then
+    echo "error: mode '${MODE}' not found. Available modes:"
+    for template in "${EXTENSION_DIRECTORY}/modes"/*.json.template; do
+        if [[ -f "$template" ]]; then
+            echo "  $(basename "$template" .json.template)"
+        fi
+    done
+    exit 1
+fi
+
 # Create the themes directory if it does not exist
 mkdir -p "${EXTENSION_DIRECTORY}/themes"
 
+# Extract wal colors and export them
 eval "$(jq -r '
   .special as $special |
   .colors as $colors |
-  "background=\($special.background) foreground=\($special.foreground)
-   cursor=\($special.cursor) color0=\($colors.color0) color1=\($colors.color1)
-   color2=\($colors.color2) color3=\($colors.color3) color4=\($colors.color4)
-   color5=\($colors.color5) color6=\($colors.color6) color7=\($colors.color7)
-   color8=\($colors.color8) color9=\($colors.color9) color10=\($colors.color10)
-   color11=\($colors.color11) color12=\($colors.color12)
-   color13=\($colors.color13) color14=\($colors.color14)
-   color15=\($colors.color15)"
+  "export background=\($special.background)
+   export foreground=\($special.foreground)
+   export cursor=\($special.cursor)
+   export color0=\($colors.color0)
+   export color1=\($colors.color1)
+   export color2=\($colors.color2)
+   export color3=\($colors.color3)
+   export color4=\($colors.color4)
+   export color5=\($colors.color5)
+   export color6=\($colors.color6)
+   export color7=\($colors.color7)
+   export color8=\($colors.color8)
+   export color9=\($colors.color9)
+   export color10=\($colors.color10)
+   export color11=\($colors.color11)
+   export color12=\($colors.color12)
+   export color13=\($colors.color13)
+   export color14=\($colors.color14)
+   export color15=\($colors.color15)"
   ' "${WAL_COLOURS_FILE}" || true)"
 
 # Generate the Zed theme
-cat <<EOF >"${THEME_FILE}"
-{
-  "\$schema": "https://zed.dev/schema/themes/v0.1.0.json",
-  "name": "wal Theme",
-  "author": "Fuwn <[email protected]>",
-  "themes": [
-    {
-      "name": "wal",
-      "appearance": "dark",
-      "style": {
-        "background.appearance": "opaque",
-        "border": "${color8}77",
-        "border.variant": "${color8}55",
-        "border.focused": "${color1}",
-        "border.selected": "${color1}77",
-        "border.transparent": "${color8}33",
-        "border.disabled": "${color8}55",
-        "elevated_surface.background": "${color0}",
-        "surface.background": "${color0}",
-        "background": "${background}",
-        "element.background": "${color0}",
-        "element.hover": "${color8}33",
-        "element.active": "${color8}55",
-        "element.selected": "${color8}77",
-        "element.disabled": "${color8}33",
-        "drop_target.background": "${color1}33",
-        "ghost_element.background": "${color0}",
-        "ghost_element.hover": "${color8}22",
-        "ghost_element.active": "${color8}44",
-        "ghost_element.selected": "${color8}66",
-        "ghost_element.disabled": "${color8}22",
-        "text": "${foreground}",
-        "text.muted": "${color8}b0",
-        "text.placeholder": "${color8}77",
-        "text.disabled": "${color8}55",
-        "text.accent": "${color1}",
-        "icon": "${color8}",
-        "icon.muted": "${color8}77",
-        "icon.disabled": "${color8}55",
-        "icon.placeholder": "${color8}66",
-        "icon.accent": "${color1}",
-        "status_bar.background": "${background}",
-        "title_bar.background": "${background}",
-        "toolbar.background": "${background}",
-        "tab_bar.background": "${background}",
-        "tab.inactive_background": "${background}",
-        "tab.active_background": "${background}",
-        "tab.active_foreground": "${foreground}",
-        "tab.inactive_foreground": "${foreground}99",
-        "tab.unfocused_active_foreground": "${foreground}99",
-        "tab.unfocused_inactive_foreground": "${foreground}77",
-        "search.match_background": "${color1}44",
-        "panel.background": "${background}",
-        "panel.focused_border": "${color1}",
-        "pane.focused_border": "${color1}",
-        "pane_group.border": "${color8}33",
-        "scrollbar.thumb.background": "${color7}44",
-        "scrollbar.thumb.hover_background": "${color7}77",
-        "scrollbar.thumb.border": "transparent",
-        "scrollbar.track.background": "${background}",
-        "scrollbar.track.border": "transparent",
-        "editor.foreground": "${foreground}",
-        "editor.background": "${background}",
-        "editor.gutter.background": "${background}",
-        "editor.subheader.background": "${color0}",
-        "editor.active_line.background": "${color7}22",
-        "editor.highlighted_line.background": "${color8}33",
-        "editor.line_number": "${color8}92",
-        "editor.active_line_number": "${color8}",
-        "editor.invisible": "${color8}66",
-        "editor.wrap_guide": "${color8}44",
-        "editor.active_wrap_guide": "${color8}77",
-        "editor.document_highlight.read_background": "${color8}44",
-        "editor.document_highlight.write_background": "${color2}77",
-        "terminal.background": "${background}",
-        "terminal.foreground": "${foreground}",
-        "terminal.bright_foreground": "${color15}",
-        "terminal.dim_foreground": "${color8}",
-        "terminal.ansi.black": "${color0}",
-        "terminal.ansi.bright_black": "${color8}",
-        "terminal.ansi.dim_black": "${color8}",
-        "terminal.ansi.red": "${color1}",
-        "terminal.ansi.bright_red": "${color9}",
-        "terminal.ansi.dim_red": "${color9}",
-        "terminal.ansi.green": "${color2}",
-        "terminal.ansi.bright_green": "${color10}",
-        "terminal.ansi.dim_green": "${color10}",
-        "terminal.ansi.yellow": "${color3}",
-        "terminal.ansi.bright_yellow": "${color11}",
-        "terminal.ansi.dim_yellow": "${color11}",
-        "terminal.ansi.blue": "${color4}",
-        "terminal.ansi.bright_blue": "${color12}",
-        "terminal.ansi.dim_blue": "${color12}",
-        "terminal.ansi.magenta": "${color5}",
-        "terminal.ansi.bright_magenta": "${color13}",
-        "terminal.ansi.dim_magenta": "${color13}",
-        "terminal.ansi.cyan": "${color6}",
-        "terminal.ansi.bright_cyan": "${color14}",
-        "terminal.ansi.dim_cyan": "${color14}",
-        "terminal.ansi.white": "${color7}",
-        "terminal.ansi.bright_white": "${color15}",
-        "terminal.ansi.dim_white": "${color15}",
-        "link_text.hover": "${color1}",
-        "conflict": "${color1}",
-        "conflict.background": "${color1}33",
-        "conflict.border": "${color1}",
-        "created": "${color2}",
-        "created.background": "${color2}33",
-        "created.border": "${color2}",
-        "deleted": "${color4}",
-        "deleted.background": "${color4}33",
-        "deleted.border": "${color4}",
-        "error": "${color1}",
-        "error.background": "${color1}22",
-        "error.border": "${color1}",
-        "hidden": "${color8}77",
-        "hidden.background": "${color8}22",
-        "hidden.border": "${color8}55",
-        "hint": "${color8}b0",
-        "hint.background": "${color8}22",
-        "hint.border": "${color8}55",
-        "ignored": "${color8}66",
-        "ignored.background": "${color8}22",
-        "ignored.border": "${color8}44",
-        "info": "${color4}",
-        "info.background": "${color4}22",
-        "info.border": "${color4}",
-        "modified": "${color3}",
-        "modified.background": "${color3}33",
-        "modified.border": "${color3}",
-        "predictive": "${color5}",
-        "predictive.background": "${color5}22",
-        "predictive.border": "${color5}",
-        "renamed": "${color6}",
-        "renamed.background": "${color6}33",
-        "renamed.border": "${color6}",
-        "success": "${color2}",
-        "success.background": "${color2}22",
-        "success.border": "${color2}",
-        "unreachable": "${color8}55",
-        "unreachable.background": "${color8}22",
-        "unreachable.border": "${color8}44",
-        "warning": "${color3}",
-        "warning.background": "${color3}22",
-        "warning.border": "${color3}",
-        "players": [
-          {
-            "cursor": "${cursor}",
-            "background": "${color1}33",
-            "selection": "${color8}77"
-          }
-        ],
-        "syntax": {
-          "attribute": {
-            "color": "${color11}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "comment": {
-            "color": "${color8}b0",
-            "font_style": "italic",
-            "font_weight": "normal"
-          },
-          "comment.doc": {
-            "color": "${color8}b0",
-            "font_style": "italic",
-            "font_weight": "normal"
-          },
-          "constant": {
-            "color": "${color5}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "constant.builtin": {
-            "color": "${color1}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "constant.language": {
-            "color": "${color1}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "constructor": {
-            "color": "${color13}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "embedded": {
-            "color": "${foreground}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "function": {
-            "color": "${color13}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "function.builtin": {
-            "color": "${color5}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "function.call": {
-            "color": "${color11}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "keyword": {
-            "color": "${color1}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "keyword.operator": {
-            "color": "${color11}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "link_text": {
-            "color": "${color2}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "link_uri": {
-            "color": "${color2}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "number": {
-            "color": "${color5}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "operator": {
-            "color": "${color11}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "property": {
-            "color": "${color2}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "punctuation": {
-            "color": "${foreground}b0",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "punctuation.bracket": {
-            "color": "${foreground}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "punctuation.delimiter": {
-            "color": "${foreground}b0",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "punctuation.list_marker": {
-            "color": "${color11}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "punctuation.special": {
-            "color": "${color3}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "string": {
-            "color": "${color10}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "string.escape": {
-            "color": "${color14}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "string.regex": {
-            "color": "${color14}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "string.special": {
-            "color": "${color14}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "string.special.symbol": {
-            "color": "${color10}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "tag": {
-            "color": "${color2}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "text.literal": {
-            "color": "${color10}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "type": {
-            "color": "${color12}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "type.builtin": {
-            "color": "${color2}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "variable": {
-            "color": "${foreground}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "variable.member": {
-            "color": "${color1}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "variable.parameter": {
-            "color": "${color15}",
-            "font_style": "normal",
-            "font_weight": "normal"
-          },
-          "variable.special": {
-            "color": "${color2}",
-            "font_style": "italic",
-            "font_weight": "normal"
-          }
-        }
-      }
-    }
-  ]
-}
-EOF
+envsubst < "${TEMPLATE_FILE}" > "${THEME_FILE}"
 
-echo "zed theme generated: ${THEME_FILE}"
+echo "zed theme generated with '${MODE}' mode: ${THEME_FILE}"
diff --git a/modes/original.json.template b/modes/original.json.template
new file mode 100644
index 0000000..2941381
--- /dev/null
+++ b/modes/original.json.template
@@ -0,0 +1,292 @@
+{
+    "$schema": "https://zed.dev/schema/themes/v0.1.0.json",
+    "name": "wal Theme",
+    "author": "Fuwn <[email protected]>",
+    "themes": [
+        {
+            "name": "wal",
+            "appearance": "dark",
+            "style": {
+                "background.appearance": "opaque",
+                "border": "${color8}",
+                "border.variant": "${color8}",
+                "border.focused": "${color9}",
+                "border.selected": "${color8}",
+                "border.transparent": "${color8}",
+                "border.disabled": "${color8}",
+                "elevated_surface.background": "${color0}",
+                "surface.background": "${color0}",
+                "background": "${background}",
+                "element.background": "${color0}",
+                "element.hover": "${color1}",
+                "element.active": "${color2}",
+                "element.selected": "${color3}",
+                "element.disabled": "${color8}",
+                "drop_target.background": "${color3}",
+                "ghost_element.background": "${color0}",
+                "ghost_element.hover": "${color1}",
+                "ghost_element.active": "${color2}",
+                "ghost_element.selected": "${color3}",
+                "ghost_element.disabled": "${color8}",
+                "text": "${foreground}",
+                "text.muted": "${color8}",
+                "text.placeholder": "${color8}",
+                "text.disabled": "${color8}",
+                "text.accent": "${color10}",
+                "icon": "${color8}",
+                "icon.muted": "${color8}",
+                "icon.disabled": "${color8}",
+                "icon.placeholder": "${color8}",
+                "icon.accent": "${color10}",
+                "status_bar.background": "${background}",
+                "title_bar.background": "${background}",
+                "toolbar.background": "${background}",
+                "tab_bar.background": "${background}",
+                "tab.inactive_background": "${background}",
+                "tab.active_background": "${background}10",
+                "tab.active_foreground": "${foreground}",
+                "tab.inactive_foreground": "${foreground}",
+                "tab.unfocused_active_foreground": "${color1}",
+                "tab.unfocused_inactive_foreground": "${background}",
+                "search.match_background": "${color3}",
+                "panel.background": "${background}",
+                "panel.focused_border": "${color9}",
+                "pane.focused_border": "${color9}",
+                "pane_group.border": "${color8}",
+                "scrollbar.thumb.background": "${color8}",
+                "scrollbar.thumb.hover_background": "${color7}",
+                "scrollbar.thumb.border": "${color8}",
+                "scrollbar.track.background": "${background}",
+                "scrollbar.track.border": "${color8}",
+                "editor.foreground": "${foreground}",
+                "editor.background": "${background}",
+                "editor.gutter.background": "${background}",
+                "editor.subheader.background": "${color0}",
+                "editor.active_line.background": "${color3}",
+                "editor.highlighted_line.background": "${color1}",
+                "editor.line_number": "${color7}",
+                "editor.active_line_number": "${color8}",
+                "editor.invisible": "${color8}",
+                "editor.wrap_guide": "${color8}",
+                "editor.active_wrap_guide": "${color8}",
+                "editor.document_highlight.read_background": "${color3}",
+                "editor.document_highlight.write_background": "${color4}",
+                "terminal.background": "${background}",
+                "terminal.foreground": "${foreground}",
+                "terminal.bright_foreground": "${color15}",
+                "terminal.dim_foreground": "${color8}",
+                "terminal.ansi.black": "${color0}",
+                "terminal.ansi.bright_black": "${color8}",
+                "terminal.ansi.dim_black": "${color8}",
+                "terminal.ansi.red": "${color1}",
+                "terminal.ansi.bright_red": "${color9}",
+                "terminal.ansi.dim_red": "${color9}",
+                "terminal.ansi.green": "${color2}",
+                "terminal.ansi.bright_green": "${color10}",
+                "terminal.ansi.dim_green": "${color10}",
+                "terminal.ansi.yellow": "${color3}",
+                "terminal.ansi.bright_yellow": "${color11}",
+                "terminal.ansi.dim_yellow": "${color11}",
+                "terminal.ansi.blue": "${color4}",
+                "terminal.ansi.bright_blue": "${color12}",
+                "terminal.ansi.dim_blue": "${color12}",
+                "terminal.ansi.magenta": "${color5}",
+                "terminal.ansi.bright_magenta": "${color13}",
+                "terminal.ansi.dim_magenta": "${color13}",
+                "terminal.ansi.cyan": "${color6}",
+                "terminal.ansi.bright_cyan": "${color14}",
+                "terminal.ansi.dim_cyan": "${color14}",
+                "terminal.ansi.white": "${color7}",
+                "terminal.ansi.bright_white": "${color15}",
+                "terminal.ansi.dim_white": "${color15}",
+                "link_text.hover": "${color4}",
+                "conflict": "${color1}",
+                "conflict.background": "${color0}",
+                "conflict.border": "${color1}",
+                "created": "${color2}",
+                "created.background": "${color0}",
+                "created.border": "${color2}",
+                "deleted": "${color1}",
+                "deleted.background": "${color0}",
+                "deleted.border": "${color1}",
+                "error": "${color1}",
+                "error.background": "${color0}",
+                "error.border": "${color1}",
+                "hidden": "${color8}",
+                "hidden.background": "${color0}",
+                "hidden.border": "${color8}",
+                "hint": "${color8}",
+                "hint.background": "${color0}",
+                "hint.border": "${color8}",
+                "ignored": "${color8}",
+                "ignored.background": "${color0}",
+                "ignored.border": "${color8}",
+                "info": "${color4}",
+                "info.background": "${color0}",
+                "info.border": "${color4}",
+                "modified": "${color3}",
+                "modified.background": "${color0}",
+                "modified.border": "${color3}",
+                "predictive": "${color5}",
+                "predictive.background": "${color0}",
+                "predictive.border": "${color5}",
+                "renamed": "${color6}",
+                "renamed.background": "${color0}",
+                "renamed.border": "${color6}",
+                "success": "${color2}",
+                "success.background": "${color0}",
+                "success.border": "${color2}",
+                "unreachable": "${color8}",
+                "unreachable.background": "${color0}",
+                "unreachable.border": "${color8}",
+                "warning": "${color3}",
+                "warning.background": "${color0}",
+                "warning.border": "${color3}",
+                "players": [
+                    {
+                        "cursor": "${cursor}",
+                        "background": "${color0}",
+                        "selection": "${color1}"
+                    }
+                ],
+                "syntax": {
+                    "attribute": {
+                        "color": "${color13}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "comment": {
+                        "color": "${color8}",
+                        "font_style": "italic",
+                        "font_weight": "normal"
+                    },
+                    "comment.doc": {
+                        "color": "${color8}",
+                        "font_style": "italic",
+                        "font_weight": "normal"
+                    },
+                    "constant": {
+                        "color": "${color3}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "constructor": {
+                        "color": "${color5}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "embedded": {
+                        "color": "${foreground}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "function": {
+                        "color": "${color1}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "keyword": {
+                        "color": "${color2}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "link_text": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "link_uri": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "number": {
+                        "color": "${color3}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "operator": {
+                        "color": "${color6}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "property": {
+                        "color": "${foreground}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation": {
+                        "color": "${color7}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation.bracket": {
+                        "color": "${color7}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation.delimiter": {
+                        "color": "${color7}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation.list_marker": {
+                        "color": "${color7}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation.special": {
+                        "color": "${color7}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string.escape": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string.regex": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string.special": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string.special.symbol": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "tag": {
+                        "color": "${color2}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "text.literal": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "variable": {
+                        "color": "${foreground}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "variable.special": {
+                        "color": "${foreground}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    }
+                }
+            }
+        }
+    ]
+}
diff --git a/modes/readability.json.template b/modes/readability.json.template
new file mode 100644
index 0000000..696ad2c
--- /dev/null
+++ b/modes/readability.json.template
@@ -0,0 +1,337 @@
+{
+    "$schema": "https://zed.dev/schema/themes/v0.1.0.json",
+    "name": "wal Theme",
+    "author": "Fuwn <[email protected]>",
+    "themes": [
+        {
+            "name": "wal",
+            "appearance": "dark",
+            "style": {
+                "background.appearance": "opaque",
+                "border": "${color8}77",
+                "border.variant": "${color8}55",
+                "border.focused": "${color1}",
+                "border.selected": "${color1}77",
+                "border.transparent": "${color8}33",
+                "border.disabled": "${color8}55",
+                "elevated_surface.background": "${color0}",
+                "surface.background": "${color0}",
+                "background": "${background}",
+                "element.background": "${color0}",
+                "element.hover": "${color8}33",
+                "element.active": "${color8}55",
+                "element.selected": "${color8}77",
+                "element.disabled": "${color8}33",
+                "drop_target.background": "${color1}33",
+                "ghost_element.background": "${color0}",
+                "ghost_element.hover": "${color8}22",
+                "ghost_element.active": "${color8}44",
+                "ghost_element.selected": "${color8}66",
+                "ghost_element.disabled": "${color8}22",
+                "text": "${foreground}",
+                "text.muted": "${color8}b0",
+                "text.placeholder": "${color8}77",
+                "text.disabled": "${color8}55",
+                "text.accent": "${color1}",
+                "icon": "${color8}",
+                "icon.muted": "${color8}77",
+                "icon.disabled": "${color8}55",
+                "icon.placeholder": "${color8}66",
+                "icon.accent": "${color1}",
+                "status_bar.background": "${background}",
+                "title_bar.background": "${background}",
+                "toolbar.background": "${background}",
+                "tab_bar.background": "${background}",
+                "tab.inactive_background": "${background}",
+                "tab.active_background": "${background}",
+                "tab.active_foreground": "${foreground}",
+                "tab.inactive_foreground": "${foreground}99",
+                "tab.unfocused_active_foreground": "${foreground}99",
+                "tab.unfocused_inactive_foreground": "${foreground}77",
+                "search.match_background": "${color1}44",
+                "panel.background": "${background}",
+                "panel.focused_border": "${color1}",
+                "pane.focused_border": "${color1}",
+                "pane_group.border": "${color8}33",
+                "scrollbar.thumb.background": "${color7}44",
+                "scrollbar.thumb.hover_background": "${color7}77",
+                "scrollbar.thumb.border": "transparent",
+                "scrollbar.track.background": "${background}",
+                "scrollbar.track.border": "transparent",
+                "editor.foreground": "${foreground}",
+                "editor.background": "${background}",
+                "editor.gutter.background": "${background}",
+                "editor.subheader.background": "${color0}",
+                "editor.active_line.background": "${color7}22",
+                "editor.highlighted_line.background": "${color8}33",
+                "editor.line_number": "${color8}92",
+                "editor.active_line_number": "${color8}",
+                "editor.invisible": "${color8}66",
+                "editor.wrap_guide": "${color8}44",
+                "editor.active_wrap_guide": "${color8}77",
+                "editor.document_highlight.read_background": "${color8}44",
+                "editor.document_highlight.write_background": "${color2}77",
+                "terminal.background": "${background}",
+                "terminal.foreground": "${foreground}",
+                "terminal.bright_foreground": "${color15}",
+                "terminal.dim_foreground": "${color8}",
+                "terminal.ansi.black": "${color0}",
+                "terminal.ansi.bright_black": "${color8}",
+                "terminal.ansi.dim_black": "${color8}",
+                "terminal.ansi.red": "${color1}",
+                "terminal.ansi.bright_red": "${color9}",
+                "terminal.ansi.dim_red": "${color9}",
+                "terminal.ansi.green": "${color2}",
+                "terminal.ansi.bright_green": "${color10}",
+                "terminal.ansi.dim_green": "${color10}",
+                "terminal.ansi.yellow": "${color3}",
+                "terminal.ansi.bright_yellow": "${color11}",
+                "terminal.ansi.dim_yellow": "${color11}",
+                "terminal.ansi.blue": "${color4}",
+                "terminal.ansi.bright_blue": "${color12}",
+                "terminal.ansi.dim_blue": "${color12}",
+                "terminal.ansi.magenta": "${color5}",
+                "terminal.ansi.bright_magenta": "${color13}",
+                "terminal.ansi.dim_magenta": "${color13}",
+                "terminal.ansi.cyan": "${color6}",
+                "terminal.ansi.bright_cyan": "${color14}",
+                "terminal.ansi.dim_cyan": "${color14}",
+                "terminal.ansi.white": "${color7}",
+                "terminal.ansi.bright_white": "${color15}",
+                "terminal.ansi.dim_white": "${color15}",
+                "link_text.hover": "${color1}",
+                "conflict": "${color1}",
+                "conflict.background": "${color1}33",
+                "conflict.border": "${color1}",
+                "created": "${color2}",
+                "created.background": "${color2}33",
+                "created.border": "${color2}",
+                "deleted": "${color4}",
+                "deleted.background": "${color4}33",
+                "deleted.border": "${color4}",
+                "error": "${color1}",
+                "error.background": "${color1}22",
+                "error.border": "${color1}",
+                "hidden": "${color8}77",
+                "hidden.background": "${color8}22",
+                "hidden.border": "${color8}55",
+                "hint": "${color8}b0",
+                "hint.background": "${color8}22",
+                "hint.border": "${color8}55",
+                "ignored": "${color8}66",
+                "ignored.background": "${color8}22",
+                "ignored.border": "${color8}44",
+                "info": "${color4}",
+                "info.background": "${color4}22",
+                "info.border": "${color4}",
+                "modified": "${color3}",
+                "modified.background": "${color3}33",
+                "modified.border": "${color3}",
+                "predictive": "${color5}",
+                "predictive.background": "${color5}22",
+                "predictive.border": "${color5}",
+                "renamed": "${color6}",
+                "renamed.background": "${color6}33",
+                "renamed.border": "${color6}",
+                "success": "${color2}",
+                "success.background": "${color2}22",
+                "success.border": "${color2}",
+                "unreachable": "${color8}55",
+                "unreachable.background": "${color8}22",
+                "unreachable.border": "${color8}44",
+                "warning": "${color3}",
+                "warning.background": "${color3}22",
+                "warning.border": "${color3}",
+                "players": [
+                    {
+                        "cursor": "${cursor}",
+                        "background": "${color1}33",
+                        "selection": "${color8}77"
+                    }
+                ],
+                "syntax": {
+                    "attribute": {
+                        "color": "${color11}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "comment": {
+                        "color": "${color8}b0",
+                        "font_style": "italic",
+                        "font_weight": "normal"
+                    },
+                    "comment.doc": {
+                        "color": "${color8}b0",
+                        "font_style": "italic",
+                        "font_weight": "normal"
+                    },
+                    "constant": {
+                        "color": "${color5}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "constant.builtin": {
+                        "color": "${color1}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "constant.language": {
+                        "color": "${color1}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "constructor": {
+                        "color": "${color13}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "embedded": {
+                        "color": "${foreground}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "function": {
+                        "color": "${color13}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "function.builtin": {
+                        "color": "${color5}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "function.call": {
+                        "color": "${color11}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "keyword": {
+                        "color": "${color1}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "keyword.operator": {
+                        "color": "${color11}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "link_text": {
+                        "color": "${color2}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "link_uri": {
+                        "color": "${color2}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "number": {
+                        "color": "${color5}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "operator": {
+                        "color": "${color11}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "property": {
+                        "color": "${color2}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation": {
+                        "color": "${foreground}b0",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation.bracket": {
+                        "color": "${foreground}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation.delimiter": {
+                        "color": "${foreground}b0",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation.list_marker": {
+                        "color": "${color11}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "punctuation.special": {
+                        "color": "${color3}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string.escape": {
+                        "color": "${color14}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string.regex": {
+                        "color": "${color14}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string.special": {
+                        "color": "${color14}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "string.special.symbol": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "tag": {
+                        "color": "${color2}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "text.literal": {
+                        "color": "${color10}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "type": {
+                        "color": "${color12}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "type.builtin": {
+                        "color": "${color2}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "variable": {
+                        "color": "${foreground}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "variable.member": {
+                        "color": "${color1}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "variable.parameter": {
+                        "color": "${color15}",
+                        "font_style": "normal",
+                        "font_weight": "normal"
+                    },
+                    "variable.special": {
+                        "color": "${color2}",
+                        "font_style": "italic",
+                        "font_weight": "normal"
+                    }
+                }
+            }
+        }
+    ]
+}