Windows Terminal Themes

Preview and copy themes for the new Windows Terminal.

Use the project at windowsterminalthemes.dev

How to use the themes

This site let's you preview and then copy a theme you like (or download a json file with all of them).

The official docs for Windows Terminal seem to very thoroughly explain how to change the settings, but essentially:

• open Windows Terminal settings
• add your chosen theme(s) to schemes
• in profiles, find the shell you're using (eg cmd, powershell, ubuntu) and replace colorScheme with the name of the theme
• 🥳

Contribute a theme

Ideally for the ecosystem new themes should be proposed to iTerm2-Color-Schemes (where most of these themes come from), then everyone can benefit.

If not, new themes can be add added with a pull request. Just add them to the list in app/src/custom-colour-schemes.json. You shouldn't need to run anything. If you'd like to receive credit, or know who should, please add it to app/src/credits.json.

Credits

• Bubbles, DraculaPlus, Material Darker, and OneStar by jos3s
• Cyberpunk2077 by killshot13 (Michael R.)
• Ganyu by resyfer
• Glorious by alex
• Horizon by wafelack
• Monokai Cmder by vdurante
• Monokai Pro by monokai
• Moonlight II by atomiks
• OneDark by azrikahar
• QB64 Super Dark Blue jmmv
• Retrowave by potatoqualitee
• Rosé Pine by mvllow
• Sonoran Gothic and Sonoran Sunrise by d-mckee
• Sublette by sublee
• Tokyo Night by enkia
• Zeonica by ggondim Copyright © Andrew Vallette

Running

Install using yarn and run using yarn start, this should start both the React app and Express server.

You can run all the tests with yarn test:dev.

E2E tests are run with cypress. You can use yarn cy:open to open and develop using the Dashboard and run test suite with yarn cy:run. There's a few unit test using Jest that you can develop using yarn unit:watch.

There's CI with CircleCI and there's visual regression tests with Percy too.

Compiling the themes

The json list is generated by the Express server in /server. It merges all the schemes found in the iTerm2-Color-Schemes/windowsterminal using the GitHub API, then combines it with src/custom-colour-schemes.json in /app. It runs on a server with a daily cron job.

Todo

• [x] a way to share themes
• [x] testing with cypress
• [x] automating the compilation step
• [x] improve responsiveness
• [x] add a codeblock view
• [x] nicer UI
• [x] create monorepo with terminal-api
• [x] code refactor/tidy
• [x] add theme credits into app
• [ ] use canvas for rendering the colour test

Notes

• Most themes are copied from iTerm2-Color-Schemes so huge thanks and credit to them and all the theme designers
• aim is to be simple and accessible, please let me know any accessibility problems!
• this project is based around: React (create-react-app), TypeScript, Github Pages, immer and CSS Grid
• the following projects were really useful clipboard-polyfill, resize-observer-polyfill, file-saver and get-contrast and StylishThemes/GitHub-Dark for helping with dark mode colours and styling. Thanks!
• Icons are all Material Design, except GitHub's mark which is from GitHub Primer
• Terminal logo is made by Freepik from www.flaticon.com
• Indispensable logo animation help from https://codepen.io/NickNoordijk/pen/VLvxLE?editors=1010 & https://www.digitalocean.com/community/tutorials/svg-linear-gradients

Annoyances

• eslint version in package.json root should be tied to version used in Create React App. See issue Dependency Warning - proper way to implement Yarn Workspace monorepo with CRA with root dependencies