Windows Terminal Themes
Preview and copy themes for the new Windows Terminal.
Use the project at https://atomcorp.github.io/themes/
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 replacecolorScheme
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 this README when submitting.
Credits
- The OneDark theme was created by azrikahar
- The DraculaPlus, Material Darker and OneStar theme was created by jos3s
- Monokai Cmder by vdurante
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
- add theme credits into app
- use canvas for rendering the colour test
- code refactor/tidy (it's gotten so ugly
😭 ) - make a PWA
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)[https://github.com/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)(https://primer.style/octicons/)
- 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