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
• Rosé Pine by mvllow
• Sonoran Gothic and Sonoran Sunrise by d-mckee
• Sublette by sublee
• Tokyo Night by enkia

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

• a way to share themes
• testing with cypress
• automating the compilation step
• improve responsiveness
• add a codeblock view
• nicer UI
• create monorepo with terminal-api
• code refactor/tidy
• 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