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 replacecolorSchemewith 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
eslintversion 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
62 Dec 22, 2022
18.6k Jan 3, 2023
1.7k Jan 2, 2023
2.2k Dec 29, 2022
10.7k Jan 7, 2023
56 Nov 10, 2022
56 Nov 19, 2022
264 Dec 30, 2022
270 Dec 29, 2022
11.1k Dec 27, 2022
41.4k Jan 3, 2023
684 Dec 28, 2022
133 Nov 30, 2022
161 Dec 26, 2022
40 Jan 3, 2023
10 Jun 12, 2022
9 Jul 22, 2022
97 Jan 6, 2023
2.5k Dec 25, 2022