VS Code themes Every month

A new look every month. Readable. Measured.

48 accessible color themes for VS Code that switch between day and night in one click or on their own. Every contrast and color vision result is published.

Install from the Marketplace Open VSX

themes: 48
checks passed: 13,212
lowest text contrast: 4.51:1

Fig. 01 · The logo is the controlPick a month, then a theme

Text
Accent

Read it in your editor.

The same file in , with Light above and Dark below. Drag the handle up or down to move the divider, or click the logo to change theme.

In VS Code The status bar arrows change the month from October to December, a click on the button switches from Light to Dark, and a link in its tooltip applies High Contrast.

365 days, 12 palettes.

Light on top, Dark below, the month’s button color in between. Each month uses its exact extension colors. Click a month name to apply it. The marker is today.

Four themes, one month.

Light, Dark and both High Contrast themes are generated from the palette. Text and accent contrast are measured for each. The outlined one is active.

The numbers

Themes: 48; 12 months, each in Light, Dark, High Contrast and High Contrast Light.
Checks passed: 13,212; Out of 13,212, between 273 and 279 per theme.
Lowest text contrast: 4.51:1; The minimum is 4.5:1, the WCAG AA level for normal text.

Where the lowest pair sits

Lowest: 4.51:1

1:1AA · 4.5AAA · 721:1

The audit runs on every push and must pass before each release: a regression stops the release. Read the full audit report.

Explore the measurements

One theme. Every color.

Choose a theme for the graphs Month Variant

Every syntax color, measured.

Each bar is the text contrast against the editor background, using the exact colors of . The markers show the 4.5:1 and 7:1 text contrast thresholds.

Contrast = (lighter relative luminance + 0.05) / (darker relative luminance + 0.05). Measurements apply to these text colors on the editor background; they do not certify the whole interface. Method and limits · Download the audit data.

Seen through each vision.

The code of as simulated for each type of color blindness, and a score out of 100 for each vision situation. About 8% of men and 0.4% of women of European descent have a red-green color deficiency [6]. These are calculations, not observations: testing with real people is still to come.

How different are the months?

Compare the 12 monthly palettes before and after the redesign. A larger ΔE means a greater color difference. The same scale is used in both grids. Select a measure to explore the background or the syntax colors.

How it is built

One palette per month
Each month starts from a seasonal mood: frost in January, a lagoon in July, autumn leaves in October.
Generated themes
A script builds the four themes of a month from its palette. CI compares the published files with the generator, byte for byte.
3
Automatic audit
Contrast, simulated color vision, font styles and the difference between months are measured for every theme.
- Contrast
- Simulated color vision
- Font styles
- Difference between months
Coming
Testing with real people
Simulations do not replace real eyes. This step has not been done yet: you can help.

What these numbers do not show

The same limits as in the audit report, generated from it.

No testing with real users yet. Color blindness and low vision are simulated or calculated. No calculation replaces testing with the people concerned, and feedback is welcome.
Partial forms are measured, not enforced. Partial forms of color blindness, which are the most common, appear in the scores for severities 0.1 to 0.9. Only complete forms can fail the audit.
Achromatopsia is information only. Without color, many syntax colors are close in lightness, as the table shows. They then differ only by style where the theme sets one, for comments, deprecated and invalid code for example.
Thresholds are project rules. WCAG sets the contrast minimums. The color distinction threshold (ΔE 12 on the CIE76 scale) and the variety thresholds are practical rules chosen for this project, not standards.
CIE76 is a simple measure. The thresholds apply to CIE76. CIEDE2000 is closer to perception, especially for blues and low saturation colors, so it is shown next to it for information. It uses another scale, and the thresholds are not calibrated for it.
WCAG 2 contrast only. APCA, the contrast model drafted for WCAG 3, is not applied.
Colors, not rendering. The audit reads the theme files. It checks the color pairs listed in its code, with one TextMate scope per token category. It does not look at a rendered window, antialiasing or your display.
Not every VS Code color. A theme defines about 485 of the roughly 970 colors documented by VS Code. The others use the defaults of VS Code, and only those of the recent surfaces are audited, as they are in VS Code 1.145. A future version may change them.
Other conditions are not modeled. There is no score for cataracts, glaucoma or macular degeneration, because no reliable model is used here.

Check it yourself

Every number on this page comes from the repository. With Node.js and Python 3, run:

git clone https://github.com/mickaellherminez/365-daynight-vscode-theme-ext.git
cd 365-daynight-vscode-theme-ext
npm ci
npm run themes:audit         # contrast and color vision checks of the 48 themes
npm run themes:variety       # difference between the months
npm run themes:test          # the measuring tools against published reference data
npm run themes:report-check  # the audit report matches the themes
npm run site:build           # this page, from the same report

The same commands run on every push and before each release. How the tools work · Full audit report · Audit data (JSON)

References

Machado, G. M., Oliveira, M. M., & Fernandes, L. A. F. (2009). A physiologically-based model for simulation of color vision deficiency. IEEE Transactions on Visualization and Computer Graphics, 15(6), 1291–1298. doi:10.1109/TVCG.2009.113. Used for the color blindness simulations and the figure of about 200 million people.
W3C (2024). Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, 12 December 2024. w3.org/TR/WCAG22. Contrast ratio, the 4.5:1 and 7:1 levels, and the use of color.
W3C. Understanding Success Criterion 1.4.3: Contrast (Minimum). w3.org/WAI/WCAG22/Understanding/contrast-minimum. Links 4.5:1 to a visual acuity of about 20/40, and 7:1 to about 20/80.
CIE (2004). Colorimetry, CIE 15:2004, 3rd edition. CIELAB and the CIE76 color difference used for the thresholds.
Sharma, G., Wu, W., & Dalal, E. N. (2005). The CIEDE2000 color-difference formula: Implementation notes, supplementary test data, and mathematical observations. Color Research & Application, 30(1), 21–30. doi:10.1002/col.20070. CIEDE2000, and the test data that check the tools.
Birch, J. (2012). Worldwide prevalence of red-green color deficiency. Journal of the Optical Society of America A, 29(3), 313. doi:10.1364/JOSAA.29.000313. About 8% of men and 0.4% of women of European descent.