diff --git a/.changeset/colorblind-theme-support.md b/.changeset/colorblind-theme-support.md new file mode 100644 index 00000000000..cc43df5bdd2 --- /dev/null +++ b/.changeset/colorblind-theme-support.md @@ -0,0 +1,7 @@ +--- +"@kilocode/cli": minor +--- + +Add colorblind theme support to CLI + +- Colorblind-friendly theme with high contrast colors for accessibility diff --git a/cli/src/constants/themes/colorblind.ts b/cli/src/constants/themes/colorblind.ts new file mode 100644 index 00000000000..dd1bb59d046 --- /dev/null +++ b/cli/src/constants/themes/colorblind.ts @@ -0,0 +1,93 @@ +/** + * Colorblind-friendly theme for Kilo Code CLI + * + * Designed for users with various forms of color vision deficiency. + * Uses high contrast colors and patterns to ensure accessibility. + */ +import type { Theme } from "../../types/theme.js" + +export const colorblindTheme: Theme = { + id: "colorblind", + name: "Colorblind Friendly", + type: "dark", + + brand: { + primary: "#0072e3", // High contrast blue + secondary: "#00b3ff", // Bright cyan for contrast + }, + + semantic: { + success: "#00b3ff", // Bright cyan instead of green + error: "#ff4d4d", // Bright red + warning: "#ffcc00", // Bright yellow + info: "#0072e3", // Blue + neutral: "#ffffff", // White for maximum contrast + }, + + interactive: { + prompt: "#0072e3", + selection: "#333333", + hover: "#404040", + disabled: "#808080", + focus: "#00b3ff", + }, + + messages: { + user: "#0072e3", + assistant: "#00b3ff", + system: "#ffffff", + error: "#ff4d4d", + }, + + actions: { + approve: "#00b3ff", // Cyan instead of green + reject: "#ff4d4d", // Red + cancel: "#808080", // Gray + pending: "#ffcc00", // Yellow + }, + + code: { + addition: "#00b3ff", // Cyan for additions + deletion: "#ff4d4d", // Red for deletions + modification: "#ffcc00", // Yellow for modifications + context: "#808080", + lineNumber: "#808080", + }, + + markdown: { + text: "#ffffff", + heading: "#0072e3", + strong: "#ffffff", + em: "#cccccc", + code: "#00b3ff", + blockquote: "#808080", + link: "#0072e3", + list: "#ffffff", + }, + + ui: { + border: { + default: "#404040", + active: "#00b3ff", + warning: "#ffcc00", + error: "#ff4d4d", + }, + text: { + primary: "#ffffff", + secondary: "#cccccc", + dimmed: "#808080", + highlight: "#0072e3", + }, + background: { + default: "default", + elevated: "default", + }, + }, + + status: { + online: "#00b3ff", // Cyan + offline: "#ff4d4d", // Red + busy: "#ffcc00", // Yellow + idle: "#808080", // Gray + }, +} diff --git a/cli/src/constants/themes/index.ts b/cli/src/constants/themes/index.ts index 60030089a79..ad7e8c1cc50 100644 --- a/cli/src/constants/themes/index.ts +++ b/cli/src/constants/themes/index.ts @@ -23,6 +23,7 @@ import { shadesOfPurpleTheme } from "./shades-of-purple.js" import { ayuLightTheme } from "./ayu-light.js" import { ansiTheme } from "./ansi.js" import { ansiLightTheme } from "./ansi-light.js" +import { colorblindTheme } from "./colorblind.js" /** * Registry of all available themes @@ -42,6 +43,7 @@ const themeRegistry: Record = { "ayu-light": ayuLightTheme, ansi: ansiTheme, "ansi-light": ansiLightTheme, + colorblind: colorblindTheme, } /** @@ -125,3 +127,4 @@ export { shadesOfPurpleTheme } from "./shades-of-purple.js" export { ayuLightTheme } from "./ayu-light.js" export { ansiTheme } from "./ansi.js" export { ansiLightTheme } from "./ansi-light.js" +export { colorblindTheme } from "./colorblind.js"