{"id":18107668,"url":"https://github.com/zetavg/spacegray-input-vscode","last_synced_at":"2025-04-13T22:34:03.627Z","repository":{"id":212666152,"uuid":"732027925","full_name":"zetavg/spacegray-input-vscode","owner":"zetavg","description":"The Spacegray theme with the Input font for VSCode.","archived":false,"fork":false,"pushed_at":"2024-06-09T12:22:10.000Z","size":5114,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-10T12:10:29.110Z","etag":null,"topics":["spacegray","vscode","vscode-theme"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=zetavg.spacegray-input-vscode","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zetavg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-15T13:10:22.000Z","updated_at":"2024-12-09T12:07:30.000Z","dependencies_parsed_at":"2023-12-23T18:36:06.105Z","dependency_job_id":"c2a7831c-0a80-4ac9-982b-5130cdc3fe11","html_url":"https://github.com/zetavg/spacegray-input-vscode","commit_stats":null,"previous_names":["zetavg/spacegray-input-vscode"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zetavg%2Fspacegray-input-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zetavg%2Fspacegray-input-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zetavg%2Fspacegray-input-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zetavg%2Fspacegray-input-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zetavg","download_url":"https://codeload.github.com/zetavg/spacegray-input-vscode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248790956,"owners_count":21162118,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["spacegray","vscode","vscode-theme"],"created_at":"2024-10-31T23:13:11.684Z","updated_at":"2025-04-13T22:34:03.544Z","avatar_url":"https://github.com/zetavg.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Spacegray Input for VSCode\n\n[![Visual Studio Marketplace](https://badgen.net/vs-marketplace/v/zetavg.spacegray-input-vscode)][1] \u003ca href=\"https://percy.io/188a0120/spacegray-input-vscode\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/images/percy-badge.png\" height=\"20\" alt=\"This project is using Percy.io for visual regression testing.\"\u003e\u003c/a\u003e\n\n[1]: https://marketplace.visualstudio.com/items?itemName=zetavg.spacegray-input-vscode\n\nThe [Spacegray](https://github.com/zetavg/spacegray) theme with the [Input](https://input.djr.com/) font for VSCode.\n\n\u003e Note: This theme requires additional installation steps to get the full experience. See the [Installation](https://github.com/zetavg/spacegray-input-vscode?tab=readme-ov-file#installation) documentation for more details.\n\n![](https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/screenshots/Screenshot.png)\n\n*For more screenshots on the latest VSCode, check the latest build on [Percy](https://percy.io/188a0120/spacegray-input-vscode).*\n\n\n## Installation\n\nSearch for \"Spacegray Input\" in the Visual Studio Code Marketplace and install the theme.\n\nOr install it from the command line:\n\n```bash\ncode --install-extension zetavg.spacegray-input-vscode\n```\n\n### Set Icon Themes\n\nAfter the installation, click the \"Set File Icon Theme\" and \"Set Product Icon Theme\" buttons on the extension page to set icon themes to \"Spacegray\" and \"Carbon Icons (Spacegray)\" respectively.\n\n![](https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/screenshots/Set-Icon-Themes.png)\n\n### Install the Input Font\n\nThe font used in this theme is the [Input](https://input.djr.com) font. To install it, download the font files from its [website](https://input.djr.com) and install them on your system.\n\nYou may also want to configure VSCode to use the Input font. To do this, open the Command Palette (`Ctrl+Shift+P` or `⇧⌘P`) and run the **Preferences: Open User Settings (JSON)** command. Then, add the following settings to your `settings.json` file:\n\n```json\n{\n    \"editor.fontFamily\": \"Input Mono\",\n    \"editor.fontWeight\": \"300\",\n    \"editor.fontSize\": 16.5,\n    \"editor.lineHeight\": 1.5,\n    \"editor.lineNumbers\": \"on\",\n    \"editor.renderLineHighlight\": \"gutter\",\n    \"editor.cursorBlinking\": \"smooth\",\n    \"editor.cursorWidth\": 2,\n    \"editor.minimap.showSlider\": \"always\",\n    \"editor.lightbulb.enabled\": false,\n    \"editor.scrollbar.verticalScrollbarSize\": 4,\n    \"editor.scrollbar.horizontalScrollbarSize\": 4,\n    \"terminal.integrated.fontSize\": 14,\n    \"terminal.integrated.fontFamily\": \"Input Mono\",\n    \"terminal.integrated.fontWeight\": \"300\",\n    \"terminal.integrated.fontWeightBold\": \"500\",\n    \"terminal.integrated.letterSpacing\": 1,\n}\n```\n\n### Applying CSS Styles\n\nThe font and spacing adjustments of this theme rely on loading custom CSS styles into VSCode. This can be achieved by the [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) extension.\n\nOnce Custom CSS and JS Loader is installed, you need to configure it to load the custom CSS styles from this theme. To do this, open the Command Palette (`Ctrl+Shift+P` or `⇧⌘P`) and run the **Preferences: Open User Settings (JSON)** command. Then, add the following settings to your `settings.json` file:\n\n```json\n{\n    \"vscode_custom_css.imports\": [\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/main.css\",\n        // Optional\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/font-input.css\",\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/fixed-debug-toolbar.css\",\n    ]\n}\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eOr, you can also load the CSS files individually...\u003c/summary\u003e\n\u003cpre\u003e\n{\n    \"vscode_custom_css.imports\": [\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/font.css\",\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/color.css\",\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/icon-opacit\",\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/spacing.css\",\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/editor-style\",\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/tabs.css\",\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/hide-stuff.css\",\n        \"https://raw.githubusercontent.com/zetavg/spacegray-input-vscode/main/themes/css/no-pointers.css\",\n        // ... see https://github.com/zetavg/spacegray-input-vscode/tree/main/themes/css for all available CSS files\n    ]\n}\n\u003c/pre\u003e\n\u003c/details\u003e\n\nFinally, run the **Custom CSS and JS: Reload Custom CSS and JS** command from the Command Palette (`Ctrl+Shift+P` or `⇧⌘P`) to load the custom CSS styles, and restart VSCode.\n\n\u003e If you encounter permission errors when running the **Custom CSS and JS: Reload Custom CSS and JS** command on Linux or Mac, you may need to change the owner of the VSCode executable and its installation directory to your user account. To do this, run the following commands in the terminal:\n\u003e\n\u003e ```bash\n\u003e sudo chown -R $(whoami) \"$(which code)\"\n\u003e sudo chown -R $(whoami) /usr/share/code\n\u003e ```\n\n\u003e [!NOTE]\n\u003e\n\u003e * If Visual Studio Code notifies you that its installation is corrupted, simply click \"Don't show again.\"\n\u003e * Every time after Visual Studio Code is updated, please re-run the **Custom CSS and JS: Reload Custom CSS and JS** command.\n\n\n## Customizing the Theme\n\nYou can customize the Spacegray Input theme to your preferences by overriding it in your User Settings:\n\n1. Open the `settings.json` file with the **Preferences: Open User Settings (JSON)** command in the Command Palette (`Ctrl+Shift+P` or `⇧⌘P`).\n\n2. Add or adjust the workbench.colorCustomizations section in your settings. Here's an example to get you started:\n\n```json\n{\n    \"workbench.colorCustomizations\": {\n        \"[Spacegray Input Dark]\": {\n            \"editorInfo.foreground\": \"#00000000\",\n            \"editorInfo.background\": \"#3794ff55\",\n            \"editorWarning.foreground\": \"#00000000\",\n            \"editorWarning.background\": \"#F14C4C33\",\n            \"editorError.foreground\": \"#00000000\",\n            \"editorError.background\": \"#F14C4C33\",\n            // Add more customizations as needed\n        }\n    }\n}\n```\n\nSee the [Theme Color Reference](https://code.visualstudio.com/api/references/theme-color) for more details.\n\n\n## Development\n\n* Run `npm run compile-css` to compile CSS files after changing any `.postcss` files.\n* Run `npm run copy-themes` after modifying any theme files.\n\n\n## Credits\n\nThis theme is based on the [Spacegray](https://github.com/SublimeText/Spacegray) theme for sublime text and the [Spacegray VSCode](https://github.com/mihai-vlc/spacegray-vscode/tree/master?tab=readme-ov-file) theme by Mihai Ionut Vilcu (mihai-vlc).\n\nThe included product icon theme is a modified version of the [Carbon Icons](https://github.com/antfu/vscode-icons-carbon) made by Anthony Fu (antfu).\n\n\n## License\n\n[Carbon Icons](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) by IBM are licensed under [Apache License 2.0](https://github.com/carbon-design-system/carbon/blob/main/LICENSE).\n\nOther files are licensed under MIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzetavg%2Fspacegray-input-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzetavg%2Fspacegray-input-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzetavg%2Fspacegray-input-vscode/lists"}