Windows Terminal Themes

The project includes several types of tests that can be run using yarn:

• Development tests: Run all tests with yarn test:dev.
• End-to-End (E2E) tests: Uses Cypress.
  • Open the Cypress Dashboard: yarn cy:open
  • Run the test suite: yarn cy:run
• Unit tests: Uses Jest.
  • Run in watch mode: yarn unit:watch

The API requires a GitHub personal access token to function.

1. Generate a token at https://github.com/settings/tokens.
2. Create a file named .env.private in the project root.
3. Add the following line to the file, replacing YOUR_PERSONAL_ACCESS_TOKEN with your actual token:

GITHUB_TOKEN=YOUR_PERSONAL_ACCESS_TOKEN

To run the project locally, including both the React application and the Express server, use yarn:

yarn install
yarn start

To use a theme from this project in your Windows Terminal, follow these steps:

1. Open your Windows Terminal settings.
2. Add your chosen theme configuration to the schemes array in your settings JSON.
3. Locate the specific profile you want to change (e.g., cmd, powershell, or ubuntu) within the profiles section.
4. Replace the value of colorScheme with the exact name of the theme you added.

For more detailed information on modifying settings, refer to the official Windows Terminal documentation.

You can contribute new themes to this project via Pull Request.

1. Add the new theme to the list located in app/src/custom-colour-schemes.json.
2. If you want to receive credit for the theme, or want to attribute it to someone else, update app/src/credits.json.

Note: For broader ecosystem impact, it is recommended to propose new themes to iTerm2-Color-Schemes first, as many themes in this project are sourced from there.

The system distinguishes between background keys and text keys for color mapping:

Background Keys: 'black', 'red', 'green', 'yellow', 'blue', 'purple', 'cyan', 'white', 'background'

Text Keys: 'black', 'brightBlack', 'red', 'brightRed', 'green', 'brightGreen', 'yellow', 'brightYellow', 'blue', 'brightBlue', 'purple', 'brightPurple', 'cyan', 'brightCyan', 'white', 'brightWhite'

The application uses an action-based system (actionTypes) to manage state. The following action types are available:

• LOAD: { type: 'LOAD', themes: themeType[], initialTheme?: string } - Loads a set of themes.
• SET: { type: 'SET', theme: string } - Sets the active theme by name.
• SIZE: { type: 'SIZE', isSmallScreenSize: boolean } - Updates screen size context.
• SHADE: { type: 'SHADE', themeShade: themeShadeType } - Sets the shade filter ('LIGHT', 'DARK', or 'ANY').
• PREVIEW: { type: 'PREVIEW', themeShade: previewType } - Changes the preview mode.
• NEXT: { type: 'NEXT' } - Moves to the next theme.
• PREV: { type: 'PREV' } - Moves to the previous theme.
• show: { type: 'show', title: string, message: string } - Displays a notification.
• hide: { type: 'hide' } - Hides a notification.

The following keys are valid for a theme object:

'name'
| 'black'
| 'red'
| 'green'
| 'yellow'
| 'blue'
| 'purple'
| 'cyan'
| 'white'
| 'brightBlack'
| 'brightRed'
| 'brightGreen'
| 'brightYellow'
| 'brightBlue'
| 'brightPurple'
| 'brightCyan'
| 'brightWhite'
| 'background'
| 'foreground'
| 'cursorColor'
| 'selectionBackground'

The previewType determines how a theme is visualized. The available modes are:

• 'console': Likely a standard terminal-style preview.
• 'colour': Likely a color-focused preview.

A theme object must conform to the validThemeType structure. It requires a name and a set of color keys representing the standard terminal color palette, plus background and foreground. The keys cursorColor and selectionBackground are optional.

export type validThemeType = {
  name: string;
  black: string;
  red: string;
  green: string;
  yellow: string;
  blue: string;
  purple: string;
  cyan: string;
  white: string;
  brightBlack: string;
  brightRed: string;
  brightGreen: string;
  brightYellow: string;
  brightBlue: string;
  brightPurple: string;
  brightCyan: string;
  brightWhite: string;
  background: string;
  foreground: string;
  cursorColor?: string;
  selectionBackground?: string;
};

A complete theme (themeType) is a validThemeType extended with a meta object. The meta object contains isDark (boolean) and an optional credits array containing objects with name and link strings.

export type themeType = validThemeType & {meta: metaType};