• Stars
    star
    274
  • Rank 149,738 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 2 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Create custom VSCode themes

VSLook

What vslook does

Warnings

  • This is extension will delete colorCustomizations and tokenColorCustomizations in setting.json. This behavior is because vscode doesn't update the UI when the theme file changes. It only updates when setting.json changes.

  • VSLook will reload VSCode every time it's closed in order to show the latest colors from the theme file


📗 Get started

  • Install from marketplace.
  • Choose VSLook from Color Theme.
  • Open Command Palette Ctrl+Shift+P. Search for VSLook: Edit and press Enter.

For styling guide, click here.


🚚 Export theme

  • Open Command Palette Ctrl+Shift+P. Search for VSLook: Export and press Enter.
  • Theme will be saved in $HOME/vslook-theme.json.

🖨 Clone theme

  • Open Command Palette Ctrl+Shift+P. Search for VSLook: Clone and press Enter.
  • Choose the theme you want to clone.
  • VSLook will copy all the styles from the selected theme.

⚠️Notes:

  • This action is not reversible.
  • Changing syntax colors with VSLook won't work correctly after cloning a theme.

🎨 Color palettes

VSLook comes with Tailwind & Material color palettes.

To change palette

  • Go to Settings Ctrl+,.
  • Search for VSLook Palette Type.
  • Choose the palette you want to use.

🌈 Color variables

Create color variables from Color Picker. It will merge with color palettes.

Add color variable

To group your color variables, use a / in their names.

Add color variable

If you wanna set bulk amount of colors, open setting.json and paste something like this.

"vslook.palette.colors": {
  "base":{
    "primary":"#111e6c",
    "secondary":"#b0dfe5"
  },
  "pink": {
    "100": "#ef4444",
    "200": "#ec4899",
    ...
  },
},