Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/colorblind-theme-support.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@kilocode/cli": minor
---

Add colorblind theme support to CLI

- Colorblind-friendly theme with high contrast colors for accessibility
93 changes: 93 additions & 0 deletions cli/src/constants/themes/colorblind.ts
Original file line number Diff line number Diff line change
@@ -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
},
}
3 changes: 3 additions & 0 deletions cli/src/constants/themes/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -42,6 +43,7 @@ const themeRegistry: Record<ThemeId, Theme> = {
"ayu-light": ayuLightTheme,
ansi: ansiTheme,
"ansi-light": ansiLightTheme,
colorblind: colorblindTheme,
}

/**
Expand Down Expand Up @@ -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"