TDAH Focus Theme
A dark VS Code color theme built around semantic highlighting, designed to reduce
cognitive load for neurodivergent (ADHD) developers. Every distinct syntax concept
(local variable, parameter, property/field, type/class/interface, namespace, function,
control-flow keyword, string, number, comment, Angular directive/binding, etc.) gets its
own visually distinguishable color — no two different concepts share the same hue.
Philosophy
- Semantic-highlighting-first. The theme leans on
semanticTokenColors as the
primary mechanism, so that language servers can tell a local variable from a
parameter, a property, or a type — not just "identifier". TextMate tokenColors
are used as a fallback for contexts without semantic tokens (e.g. SQL, parts of SCSS).
- WCAG AA contrast floor. Every foreground/background color pair in the theme is
checked against the WCAG AA threshold (4.5:1) by an automated contrast validator
(
src/validateThemeContrast.ts), which also runs in CI to catch regressions.
- Colorblind-safe palette. Colors are chosen so that distinctions between concepts
never rely solely on red/green differentiation, keeping the theme usable for
deuteranopia and protanopia.
- Built for sustained focus. As of v1.0.0, the palette is inspired by VS Code's
built-in "2026 Dark"/Dark Modern theme — a neutral background, moderate
contrast, no neon — rather than copied literally: the real "2026 Dark" theme itself
repeats a color between
entity.name and variable, exactly the kind of collision
this theme's validator exists to prevent. Colors were instead derived from
docs/paleta-cores-tdah.md's own guide and adjusted so every distinct syntactic
concept keeps its own distinguishable color, and UI chrome (sidebar, activity bar,
title bar, selection, accent) was adapted — not copied 1:1 — to harmonize with this
theme's background. See
docs/color-taxonomy.md
for the full rationale. (Historical note: the original v0 release took Night Owl as
its starting point, revised token-by-token to remove repeated colors between
concepts — that rationale is preserved in docs/color-taxonomy.md.)
This first release is dark-only; a light variant is out of scope for now so that
calibration effort stays concentrated on a single, coherent palette.
Language coverage
| Language / context |
Highlighting |
| TypeScript / JavaScript |
Full semantic taxonomy (variables, params, properties, types, namespaces, functions, etc.) |
| C# (.NET) |
Semantic + TextMate fallback (types, namespaces, members, keywords) |
| Angular templates |
Directives (*ngFor, *ngIf), bindings ([prop], (click), {{ }}) as their own distinct category, separate from plain HTML attributes |
| HTML |
Tags, attributes, and embedded content |
| CSS / SCSS |
Selectors, properties, values, SCSS-specific constructs |
SQL (isolated .sql files) |
Keywords, tables/columns, functions — via TextMate injection grammar |
See docs/color-taxonomy.md for the full token-to-color
mapping and the reasoning behind each assignment.
The theme also styles UI chrome beyond the editor — sidebar, activity bar, title bar,
selection, and an accent color used for focus/badges/buttons — adapted from "2026
Dark"'s real UI colors to harmonize with this theme's #14161B editor background.
Usage
- Install TDAH Focus Theme from the VS Code Marketplace (or install the
.vsix
manually via Extensions: Install from VSIX...).
- Open the Command Palette and run Preferences: Color Theme (or
Ctrl+K Ctrl+T / Cmd+K Cmd+T).
- Select TDAH Focus Theme.
Development
npm install
npm test # run the test suite once (Vitest)
npm run test:watch
npm run typecheck
To try the theme locally, open this folder in VS Code and press F5 to launch an
Extension Development Host window, then select TDAH Focus Theme from
Preferences: Color Theme.
Packaging
npx @vscode/vsce package
This produces a .vsix file that can be installed manually or published to the
Marketplace via npx @vscode/vsce publish.
License
MIT
| |
