{"id":20093739,"url":"https://github.com/mvahaste/vscode-custom-css","last_synced_at":"2025-05-06T04:32:11.236Z","repository":{"id":64797578,"uuid":"573932110","full_name":"mvahaste/vscode-custom-css","owner":"mvahaste","description":"Custom CSS to make VSCode look nicer","archived":true,"fork":false,"pushed_at":"2022-12-22T11:34:58.000Z","size":236,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T16:15:30.221Z","etag":null,"topics":["css","custom-css","theme","vscode","vscode-css","vscode-theme"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mvahaste.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-03T22:11:08.000Z","updated_at":"2024-08-14T10:27:29.000Z","dependencies_parsed_at":"2023-01-30T07:45:16.277Z","dependency_job_id":null,"html_url":"https://github.com/mvahaste/vscode-custom-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvahaste%2Fvscode-custom-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvahaste%2Fvscode-custom-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvahaste%2Fvscode-custom-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvahaste%2Fvscode-custom-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mvahaste","download_url":"https://codeload.github.com/mvahaste/vscode-custom-css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252622354,"owners_count":21777975,"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":["css","custom-css","theme","vscode","vscode-css","vscode-theme"],"created_at":"2024-11-13T16:48:17.814Z","updated_at":"2025-05-06T04:32:10.959Z","avatar_url":"https://github.com/mvahaste.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VSCode Custom CSS\n\nCustom CSS for VSCode for some visual improvements, just my personal preferences, easily configurable to your liking. Should work okay with most themes, but no guarantees. Only tested on Windows.\n\n## Features\n\nThis CSS file adds rounded borders and/or background blur and box shadows to the following elements:\n\n-  IntelliSense suggestions \u0026 details widget (two versions, toggleable in `:root`)\n-  Parameter hints widget\n-  Editor hover tooltips\n-  Command palette\n-  Files/extensions/etc\n-  Minimap slider\n-  Breadcrumbs widget\n-  Hide the VSCode icon in the title bar\n\n## Screenshots\n\n\u003cdetails\u003e\n  \u003csummary\u003eSuggest widget (1)\u003c/summary\u003e\n\n![Suggest Widget (1)](/screenshots/suggest-widget-1.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eSuggest widget (0)\u003c/summary\u003e\n\n![Suggest Widget (0)](/screenshots/suggest-widget-0.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eParameter hint\u003c/summary\u003e\n\n![Parameter hint](/screenshots/tooltip.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eGitLive tooltip\u003c/summary\u003e\n\n![GitLive tooltip](/screenshots/gitlive-tooltip.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eCommand palette\u003c/summary\u003e\n\n![Command palette](/screenshots/command-palette.png)\n\n\u003c/details\u003e\n\nScreenshots are taken with the [Github Dark](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme) theme.\n\n## Installation\n\nInstall the [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) extension.\n\nAdd the following to your `settings.json`:\n\n```json\n\"vscode_custom_css.imports\": [\n  \"file:///path/to/vscode-custom-css/custom.css\"\n],\n```\n\n## Extra\n\n### Theme tweaks\n\nMy changes to the [One Dark Pro Darker](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) theme to make it just a little nicer. To use, add the following to your `settings.json`:\n\n```json\n\"workbench.colorCustomizations\": {\n  \"[One Dark Pro Darker]\": {\n    \"editor.background\": \"#1e2227\",\n    \"sideBar.background\": \"#191d22\",\n    \"list.inactiveSelectionBackground\": \"#2d333d\",\n    \"list.hoverBackground\": \"#2d333d80\",\n    \"titleBar.activeBackground\": \"#1e2227\",\n    \"sideBarSectionHeader.background\": \"#1e2227\",\n    \"terminal.background\": \"#1e2227\"\n  }\n},\n\"editor.tokenColorCustomizations\": {\n  \"[One Dark Pro Darker]\": {\n    \"comments\": \"#5c6370\",\n    \"textMateRules\": [\n      {\n        \"scope\": \"comment\",\n        \"settings\": {\n          \"fontStyle\": \"italic\"\n        }\n      }\n    ]\n  }\n}\n```\n\n### Customization tips\n\nToggle the developer tools from the command palette to view element classes, properties, etc. Use the inspecter to target specific elements.\n\nThe JavaScript snippet below can make it easier to inspect elements that don't play nice, just paste it into the console and VSCode will be paused in debug mode after a 3 second delay. Close the developer tools to resume.\n\n```js\nsetTimeout(function () {\n\tdebugger;\n}, 3000);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvahaste%2Fvscode-custom-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmvahaste%2Fvscode-custom-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvahaste%2Fvscode-custom-css/lists"}