{"id":18137749,"url":"https://github.com/shaobeichen/gradient-theme","last_synced_at":"2025-04-06T07:09:55.137Z","repository":{"id":260046860,"uuid":"856864850","full_name":"shaobeichen/gradient-theme","owner":"shaobeichen","description":"🌅 Multiple beautiful VSCode gradient themes. 多个漂亮的VSCode渐变主题。","archived":false,"fork":false,"pushed_at":"2024-12-04T03:25:08.000Z","size":6219,"stargazers_count":105,"open_issues_count":4,"forks_count":14,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T06:06:49.517Z","etag":null,"topics":["gradient","gradient-theme","gradienttheme","theme","vscode","vscode-extension","vscode-theme"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=shaobeichen.gradient-theme","language":"JavaScript","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/shaobeichen.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2024-09-13T10:59:49.000Z","updated_at":"2025-03-26T16:18:29.000Z","dependencies_parsed_at":"2025-01-15T11:11:57.974Z","dependency_job_id":"7957ae88-0288-409b-bf2b-f1946896085b","html_url":"https://github.com/shaobeichen/gradient-theme","commit_stats":null,"previous_names":["shaobeichen/gradient-theme"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaobeichen%2Fgradient-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaobeichen%2Fgradient-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaobeichen%2Fgradient-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaobeichen%2Fgradient-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shaobeichen","download_url":"https://codeload.github.com/shaobeichen/gradient-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445667,"owners_count":20939958,"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":["gradient","gradient-theme","gradienttheme","theme","vscode","vscode-extension","vscode-theme"],"created_at":"2024-11-01T15:06:22.131Z","updated_at":"2025-04-06T07:09:55.111Z","avatar_url":"https://github.com/shaobeichen.png","language":"JavaScript","readme":"# Gradient Theme\n\n![Gradient Theme logo](./images/banner.png)\n\n[![](https://badgen.net/vs-marketplace/v/shaobeichen.gradient-theme)](https://marketplace.visualstudio.com/items?itemName=shaobeichen.gradient-theme)\n[![](https://badgen.net/vs-marketplace/i/shaobeichen.gradient-theme)](https://marketplace.visualstudio.com/items?itemName=shaobeichen.gradient-theme)\n[![](https://badgen.net/vs-marketplace/d/shaobeichen.gradient-theme)](https://marketplace.visualstudio.com/items?itemName=shaobeichen.gradient-theme)\n\n中文文档 | [English](./README.md)\n\n[当前仓库链接](https://github.com/shaobeichen/gradient-theme)，喜欢的话点一个 Star 吧！\n\n# 警告\n\n![corrupt](./images/corrupt.png)\n\n尽管警告不会影响任何功能，如果你对 VSCode 已损坏警告提示非常介意的话，**不推荐**使用此主题。\n\n如果你不想忽略 VSCode 已损坏警告提示的话，请自己考虑好是否要使用此主题。\n\n老实说，我一开始也是很介意，后来我忽略了已损坏警告提示后，再也不介意了。\n\n# 主题\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cb\u003eGradient Bearded Theme Arc\u003c/b\u003e\n            \u003cdiv\u003e基于 \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedtheme\"\u003eBearded Theme Arc\u003c/a\u003e ，添加了渐变效果。\u003c/div\u003e\n        \u003c/td\u003e \n        \u003ctd\u003e\n            \u003cb\u003eGradient Dracula Theme\u003c/b\u003e\n            \u003cdiv\u003e基于 \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula\"\u003eDracula Theme\u003c/a\u003e ，添加了渐变效果。\u003c/div\u003e\n        \u003c/td\u003e \n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"./images/gradient-bearded-theme-arc.png\" width=600/\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"./images/gradient-dracula-theme.png\" width=600/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cb\u003eGradient Monokai Pro\u003c/b\u003e\n            \u003cdiv\u003e基于 \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode\"\u003eMonokai Pro\u003c/a\u003e ，添加了渐变效果。\u003c/div\u003e\n        \u003c/td\u003e \n        \u003ctd\u003e\n            \u003cb\u003eGradient Monokai Pro Classic\u003c/b\u003e\n            \u003cdiv\u003e基于 \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode\"\u003eMonokai Pro Classic\u003c/a\u003e ，添加了渐变效果。\u003c/div\u003e\n        \u003c/td\u003e \n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"./images/gradient-monokai-pro.png\" width=600/\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"./images/gradient-monokai-pro-classic.png\" width=600/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cb\u003eGradient Modern Dark\u003c/b\u003e\n            \u003cdiv\u003e基于 \u003ca href=\"\"\u003eModern Dark\u003c/a\u003e ，添加了渐变效果。\u003c/div\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\n            \u003cb\u003eGradient Atom One Dark\u003c/b\u003e\n            \u003cdiv\u003e基于 \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark\"\u003eAtom One Dark\u003c/a\u003e ，添加了渐变效果。\u003c/div\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"./images/gradient-modern-dark.png\" width=600/\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"./images/gradient-atom-one-dark.png\" width=600/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n# 灵感\n\n有一天我看到了一个自已修改 VSCode 主题 CSS 文件的视频，\n\n于是我觉得我可以使用相同的方式来制作一个 VSCode 渐变效果 CSS 文件，\n\n然后我就开始使用 Custom CSS and JS Loader 插件来加载自定义的渐变 CSS，\n\n后来许多人觉得我的渐变主题非常好看，希望也能在自己的 VSCode 上能使用它，\n\n但是如果要使用它的话，需要安装插件还需要我给他们一份 CSS 文件，这太麻烦了！\n\n于是我去学习了如何制作一个 VSCode 主题插件，做出了这个渐变色主题插件。\n\n# 安装\n\n- 在 [ VSCode Marketplace ](https://marketplace.visualstudio.com/items?itemName=shaobeichen.gradient-theme) 安装主题。\n\n  或者\n\n- 在 VSCode 中搜索 Gradient Theme、gradient-theme 关键字后，进行安装。\n\n安装后可以选择基础主题，**此时并没有渐变效果**，如果想要开启渐变效果的话，请看下一步。\n\n**为什么没有直接开启渐变效果呢？**\n\n因为开启渐变效果会对 VSCode 的核心文件进行修改，会有 VSCode 已损坏的警告提示，尽管可以移除警告提示，但还是一部分人不希望这样，在底部会有详细说明。\n\n# 渐变效果\n\n### 开启渐变\n\n![enable command](./images/command.png)\n\n你可以通过按 `Ctrl + Shift + P` 或者 `Shift + ⌘ + P` 并选择“**Gradient Theme: Enable Gradient**”来实现此操作。\n\n### 关闭渐变\n\n你可以通过按 `Ctrl + Shift + P` 或者 `Shift + ⌘ + P` 并选择“**Gradient Theme: Disable Gradient**”来实现此操作。\n\n### 重启编辑器\n\n![restart](./images/restart.png)\n\n在 开启渐变效果 或 关闭渐变效果 后，会有一条提示，点击重启编辑器后，才能看到渐变效果。\n\n# 自定义主题\n\n当你觉得当前渐变主题效果不好，可以自己自定义渐变主题。\n\n请注意，你如果开启了自定义渐变效果，那么不论你切换哪种主题，都会显示为你自定义的渐变效果。\n\n目前第一版自定义主题功能简略，后续会继续完善。\n\n### 自定义主题视频教学地址\n\nhttps://www.bilibili.com/video/BV1FemxYYEAv\n\n#### 1. 打开设置\n\n![custom-theme-setting](./images/custom-theme-setting.png)\n\n#### 2. 找到渐变主题设置\n\n打开设置，搜索 `gradient css`，找到 `Gradient Theme: CSS`，点击 在 setting.json 里编辑。\n\n![custom-theme-search](./images/custom-theme-search.png)\n\n#### 3. 添加自定义渐变样式\n\n在 setting.json 里添加自定义 CSS，数组类型，支持编写多个渐变样式，但只有一个会生效。`enable` 为 true 表示开启这个自定义渐变主题 css，false 表示关闭，`css`表示自定义渐变主题 css 内容。\n\n注意 css 需要压缩为一行。压缩方法可以参考 [在线压缩工具](https://tool.chinaz.com/tools/cssformat.aspx)。\n\n![custom-theme-json](./images/custom-theme-json.png)\n\n#### 4. 开启渐变重启编辑器\n\ncss 编写好后，需要手动开启渐变重启编辑器。开启渐变的方法在文档上方有提及。\n\n# 请注意\n\n### 1. 忽略已损坏警告提示\n\n![corrupt](./images/corrupt.png)\n\n请注意，由于开启渐变效果会对 VSCode 的核心文件进行修改，VSCode 会将其解释为核心文件“已损坏”，你可能会在重启编辑器时看到这样一条警告提示，你可以安全地忽略此消息。\n\n如果你不想忽略警告提示的话，请自己考虑好是否要使用此主题。\n\n### 2. 执行 Enable 命令，提示没有权限\n\n![permission](./images/permission.png)\n\n如果您是 Windows 用户，您可能需要以管理员权限运行 VS Code。对于 Linux 和 Mac 用户，不得将 Code 安装在只读位置，并且您必须具有写入权限。\n\n### 3. 更新 VSCode\n\n请注意，每次更新 VSCode 后，都需要重复步骤以重新开启渐变效果。\n\n### 4. 更换其他主题\n\n请注意，如果开启了渐变效果，此时你想更换其他主题，最好可以先关闭渐变效果，再选择其他主题，否则渐变主题可能会影响到其他主题的颜色。\n\n# 兼容性\n\n这个主题仍然在不断更新优化。我主要使用 HTML、CSS、JS、TS、Vue、React 等进行开发，因此，虽然这些语言和框架看起来不错，但其他语言和框架可能会出现主题并不合适的情况。如果你发现任何明显的问题，可以提出一个问题，我会尽快解决。\n\n# 如何贡献\n\n很高兴你对这个主题感到兴趣，欢迎任何合适的贡献。\n\n1. Fork 并 Clone 此仓库`git clone https://github.com/\u003cYOUR-USERNAME\u003e/gradient-theme`\n2. 为你的更改创建一个分支`git checkout-b my-new-feature`\n3. 在 VSCode 中打开*gradient-theme*文件夹\n4. 修改你想修改的文件\n5. 在 VSCode 中使用 F5 进行调试预览\n6. Commit 并 Push 你的修改\n7. 提交一份 PR ，请注意并非所有建议都能被接受\n\n# 感谢\n\n感谢 Lun Dev ,让我有了制作这个渐变主题的灵感。 🙏\n\n**[Lun Dev](https://www.youtube.com/@lundeveloper)**\n\n感谢以下主题的作者为开源做出贡献。🙏 我在以下主题的基础上为各个主题制作了渐变效果。\n\n**[Bearded Theme](https://marketplace.visualstudio.com/items?itemName=BeardedBear.beardedtheme)**\n\n**[Dracula Theme Official](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)**\n\n**[Monokai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode)**\n\n**[Monokai Pro Classic](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode)**\n\n**[Atom One Dark](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)**\n","funding_links":[],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaobeichen%2Fgradient-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaobeichen%2Fgradient-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaobeichen%2Fgradient-theme/lists"}