repository·master·Indexed 21 days ago
https://github.com/stayradiated/terminal.sexyA web-based tool for designing, editing, and sharing terminal color schemes. Version 0.4.0 allows users to preview colors using templates, browse pre-made schemes, and export configurations to various terminal emulators including iTerm, PuTTY, Gnome Terminal, Konsole, and Xresources. It supports importing Xresources, Termite, and iTerm formats and provides customizable font settings via Google Web Fonts.
terminal.sexy uses the termcolors library to handle color scheme conversions.
Supported Import Formats:
Supported Export Formats:
You can share a specific color scheme design by copying its unique URL from the browser. This URL contains the encoded state of the scheme, allowing others to load it immediately.
http://terminal.sexy/#Cg8UmNHOCg8UwzAnJqmL7bVLGVRlTlFlM4WdmNHOEBUb0mk5CB8tJFNhCTdIiIulWZyq0-vpTemplates function as terminal screenshots, allowing you to visualize how a color scheme looks in a real terminal environment. You can hover over text within a template to inspect the specific foreground and background colors assigned to it.
To create your own custom templates, you can use tmux with the following command to capture your current pane:
capture-pane -eJ; save-buffer ~/tmux.txt; delete-bufferThe Scheme Browser allows you to load pre-made color schemes. The file browser interface is based on [Ranger].
Navigation Controls:
h, j, k, l (or arrow keys) to navigate the file list.Enter to open a selected scheme or template.You can customize the visual appearance of the terminal preview by adjusting the following settings:
Note on Font Naming: When using Google Web Fonts, you must use the exact case-sensitive name (e.g., Droid Sans Mono instead of droid sans mono).
The Schemes component (exported from lib/components/schemeBrowser.react.jsx) provides a UI for browsing pre-made color schemes. It uses a Ranger view to iterate through available schemes stored in the SchemeStore.
Each scheme item is rendered via an ItemView which displays:
actions.openScheme(path) to apply the selected colors to the terminal.If a scheme is not currently cached in the SchemeStore, the component automatically calls SchemeStore.load(path) to fetch it from the server.
// The component is exported as the default export of the module
const Schemes = require('./lib/components/schemeBrowser.react.jsx');
// In a React application, you can render it directly:
// <Schemes />The AppStore is a Reflux store that manages the central application state for terminal.sexy. It tracks the current color scheme, specific color values, and font settings.
The state object returned by getState() contains:
scheme: The name of the current color scheme (e.g., 'terminal.sexy' or 'hybrid').colors: An object containing color definitions (foreground, background, and a list of colors).font: An object containing font configuration:name: The font family name (default: 'Droid Sans Mono').size: The font size (default: '14px').line: The line height (default: '21px').web: A boolean indicating if web fonts are enabled (default: true).You interact with the store by listening to specific actions. The store updates its internal state, synchronizes the URL hash via url.export, and triggers updates to listeners.
const AppStore = require('./lib/stores/app');
// Get the current state
const currentState = AppStore.getState();
// Listen for state changes
AppStore.on(state => {
console.log('New state:', state);
});The settings interface allows you to customize the terminal appearance by adjusting font properties and the color picker behavior. When you click 'Save', the following parameters are applied to the application state:
14px).21px).The Export component allows users to convert the current color scheme into various terminal-specific configuration formats. Users can select a format from a dropdown menu, generate the text representation, and either view it in a text area or download it as a file.
When downloading a scheme, the component assigns file extensions based on the selected format:
| Format | File Extension |
|---|---|
xshell | .xcs |
putty | .reg |
iterm | .itermcolors |
| All others | .txt |
alacrittychromeshellgnomeguakeitermkonsolelinuxminttyputtystterminalappterminatortermitexfcexshellxresourcestextmate (Sublime Text - experimental)json (JSON Scheme)To modify the application state, dispatch the following actions which the AppStore is configured to listen to:
| Action | Description |
|---|---|
actions.setAllColors(name, colors) | Sets the entire color scheme and name. This also updates the URL hash. |
actions.setColor(id, color) | Updates a specific color ID within the current scheme. This also updates the URL hash. |
actions.setFont(font) | Updates the font configuration object. This is persisted to local storage. |