https://github.com/vasilverdouw/vue-colors

Simple VS Code extension for VUE to highlight script, html and css.
https://github.com/vasilverdouw/vue-colors

typescript vscode vscode-extension vue vue2 vue3

Last synced: 6 days ago
JSON representation

Simple VS Code extension for VUE to highlight script, html and css.

• Host: GitHub
• URL: https://github.com/vasilverdouw/vue-colors
• Owner: VasilVerdouw
• License: gpl-3.0
• Created: 2024-02-18T03:06:14.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-02-19T00:12:44.000Z (8 months ago)
• Last Synced: 2024-09-27T17:42:16.839Z (6 days ago)
• Topics: typescript, vscode, vscode-extension, vue, vue2, vue3
• Language: TypeScript
• Homepage:
• Size: 1.23 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Stay organized 

With clear highlighting of your Vue code, never lose track of where you are in your Vue documents.

![Vue Colors default look](images/vue-colors-default.png)

Choose any colors to highlight either the entire line, the scrollbar or both!

## Features

### Personalize your colors

Change your highlighting colors to whatever you like! Vue Colors supports any RGBA colors.

![Vue colors blue purple pink](images/vue-colors-blue-purple-pink.png)

![Vue colors lightred brown red](images/vue-colors-lightred-brown-red.png)

![Vue colors green teal aqua](images/vue-colors-green-teal-aqua.png)

### Choose what to highlight

Highlight either the entire line, the scrollbar or both!

*Only the scrollbar*

![Vue colors scrollbar only](images/vue-colors-scrollbar-only.png)

*Only the line*

![Vue colors line only](images/vue-colors-line-only.png)

*Both the line and the scrollbar*

![Vue colors both](images/vue-colors-default.png)

### Works with any theme

Vue Colors works with any theme, and will always be visible!

If you think the default colors dont match with your theme, you can always change them to your liking.

*Theme: Light+*

![Vue colors on light plus](images/vue-colors-light-plus.png)

*Theme: Tomorrow Night Blue*

![Vue colors on tomorrow night blue](images/vue-colors-tomorrow-night-blue.png)

*Theme: community material theme darker*

![Vue colors on community material theme darker](images/vue-colors-community-material-theme-darker.png)

### Easily change any settings

Use the VS Code settings menu to easily make Vue Colors exactly how you want it to be.

![Vue colors settings](images/vue-colors-settings-demo.gif)

## Extension Settings

Vue Colors has a few settings to personalize your experience.

All of these settings can be found and changed by opening the settings menu and searching for "Vue Colors".

* `vueColors.scriptColor`: The background color of the javascript/typescript code (please use rgba only). Used for both line color and scrollbar color. Default: `rgba(36, 142, 237, 0.10)`

* `vueColors.htmlColor`: The background color of the HTML template code (please use rgba only). Used for both line color and scrollbar color. Default: `rgba(69, 237, 108, 0.10)`

* `vueColors.styleColor`: The background color of the (S)CSS code (please use rgba only). Used for both line color and scrollbar color. Default: `rgba(255, 230, 0, 0.10)`

* `vueColors.highlightLine`: Wether to highlight the entire line using the specified colors. Default: `true`

* `vueColors.highlightScrollbar`: Wether to highlight the right side of the scrollbar using the specified colors. (Colors will be slightly less transparent on the scrollbar to make it more visible). Default: `true`

## Known Issues & Contributing

If you find any issues or want to contribute, please check the [GitHub repository](https://github.com/VasilVerdouw/vue-colors).