https://github.com/xiaohuohumax/vscode-theme-css-variables

VSCode Extension: VSCode theme css variables snippets; VSCode 扩展开发 CSS 变量提示
https://github.com/xiaohuohumax/vscode-theme-css-variables

css-snippets css-variables escape-style vscode-extension vscode-theme

Last synced: about 2 months ago
JSON representation

VSCode Extension: VSCode theme css variables snippets; VSCode 扩展开发 CSS 变量提示

Host: GitHub
URL: https://github.com/xiaohuohumax/vscode-theme-css-variables
Owner: xiaohuohumax
License: mit
Created: 2024-04-07T17:03:54.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-04-15T05:33:24.000Z (about 2 years ago)
Last Synced: 2025-05-31T22:12:24.686Z (about 1 year ago)
Topics: css-snippets, css-variables, escape-style, vscode-extension, vscode-theme
Language: TypeScript
Homepage:
Size: 4.14 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

README

# vscode-theme-css-variables

Downloads
Installs
License
Last Commit
Stars

**VSCode Theme CSS Variables** is a VSCode extension that provides CSS variables snippets for VSCode themes.

## ⏬ Install

VSCode Extensions Select `VSCode Theme CSS Variables`

## 📖 Use

![vscode](/images/vscode.png)

## 📦 Add

### Add base css variables. [themeing.ts#L68](https://github.com/microsoft/vscode/blob/main/src/vs/workbench/contrib/webview/browser/themeing.ts#L68)

- vscode-font-family
- vscode-font-weight
- vscode-font-size
- vscode-editor-font-family
- vscode-editor-font-weight
- vscode-editor-font-size

### Add escape style css variables.

```css
/* variable */
/* diffEditor.move.border */
/* testing.message.error.decorationForeground */

/* base */
--vscode-diffEditor-move-border
--vscode-testing-message-error-decorationForeground

/* escape style */
--vscode-diffEditor-move\.border
--vscode-testing-message\.error\.decorationForeground
```

![escape](/images/escape.png)

## ⚙ Options

- `vscodeThemeCSSVariables.activationLanguages`: Activation languages
- `default`: [ "css", "less", "scss", "sass", "stylus", "html", "svelte" ]

## Default Activation Language

- css
- less
- scss
- sass
- stylus
- html
- svelte

## 🎉 Thanks

[connor4312/vscode-css-theme-completions](https://github.com/connor4312/vscode-css-theme-completions)