VSCode UI Template

Usage

yarn add vscode-ui-template

Components

The package includes a bunch of VSCode UI Components from Visual Studio Code Theme Color Reference

import { Badge, Editor, ScrollBar, SideBar } from "vscode-ui-template";

Template

You can use the template with all components inside

import { ClassTemplate } from "vscode-ui-template";

Rules

It's can be used for apply colors to properties or components

Let's define the rules using colors and types

import {
  BaseType as Base,
  Rule
} from "vscode-ui-template";

import { Color } from "vscode-theme-builder";

const rules = [
  new Rule(
    {
      include: [Base.CURSOR, Base.FOREGROUND, "someType"],
      exclude: []
    },
    new Color("#fff").base
  ),
  new Rule(
    { include: [Base.BORDER, Base.SHADOW], exclude: [] },
    new Color("#000").base
  )
];

And apply them to properties

import {
  ApplyStrategyFactory,
  Editor,
  SideBar,
  RuleManager,
  Template,
} from "vscode-ui-template";

const template = new ClassTemplate();
const editor = new Editor();
const sideBar = new SideBar();

const applyFactory = new ApplyStrategyFactory();
const ruleManager = new RuleManager(applyFactory.includeStrategy);

ruleManager.applyToComponents(rules, editor, sideBar);
ruleManager.applyToComponents(rules, ...template.components.values());

ruleManager.applyToProperties(rules, ...editor.properties.values());