Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/atomcorp/themes

Themes for Windows Terminal
https://github.com/atomcorp/themes

preview-themes

Last synced: 7 days ago
JSON representation

Themes for Windows Terminal

Awesome Lists containing this project

README 

        
![Preview of the Windows Terminal Themes](https://github.com/atomcorp/themes/raw/master/app/public/preview-v3.png)



# Windows Terminal Themes



Preview and copy themes for the new [Windows Terminal](https://github.com/microsoft/terminal).



Use the project at [windowsterminalthemes.dev](https://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](https://docs.microsoft.com/en-us/windows/terminal/customize-settings/color-schemes) 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](https://github.com/mbadolato/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](https://github.com/jos3s)

- Cyberpunk2077 by [killshot13 (Michael R.)](https://github.com/killshot13)

- Ganyu by [resyfer](https://github.com/resyfer)

- Glorious by [alex](https://github.com/AlexMailo)

- Horizon by [wafelack](https://github.com/wafelack)

- Monokai Cmder by [vdurante](https://github.com/vdurante/windows-terminal-monokai-cmder)

- Monokai Pro by [monokai](https://monokai.pro)

- Moonlight II by [atomiks](https://github.com/atomiks)

- OneDark by [azrikahar](https://github.com/azrikahar)

- QB64 Super Dark Blue [jmmv](https://github.com/jmmv)

- Retrowave by [potatoqualitee](https://github.com/potatoqualitee)

- Rosé Pine by [mvllow](https://github.com/mvllow)

- Sonoran Gothic and Sonoran Sunrise by [d-mckee](https://github.com/d-mckee)

- Sublette by [sublee](https://github.com/sublee)

- Tokyo Night by [enkia](https://github.com/enkia)

- Zeonica by [ggondim](https://github.com/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](https://www.cypress.io/). 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](https://github.com/mbadolato/iTerm2-Color-Schemes/tree/master/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](https://www.cypress.io/)

- [x] automating the compilation step

- [x] improve responsiveness

- [x] add a codeblock view

- [x] nicer UI

- [x] create monorepo with [terminal-api](https://github.com/atomcorp/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](https://github.com/mbadolato/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](https://github.com/lgarron/clipboard-polyfill), [resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill), [file-saver](https://github.com/eligrey/FileSaver.js) and [get-contrast](https://github.com/johno/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](https://material.io/resources/icons/?style=baseline), 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



## 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](https://github.com/facebook/create-react-app/issues/6324)