# @sap/ui5-webcomponents-vscode-css-mapping
> The CSS Mapping of UI5 WebComponents to VSCode
Latest version **1.0.1** (published 2022-12-13) · See LICENSE license · 0 weekly downloads
## Install
```sh
npm install @sap/ui5-webcomponents-vscode-css-mapping
pnpm add @sap/ui5-webcomponents-vscode-css-mapping
yarn add @sap/ui5-webcomponents-vscode-css-mapping
bun add @sap/ui5-webcomponents-vscode-css-mapping
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-12-13 |
| First published | 2022-09-16 |
| Weekly downloads | 0 |
| License | See LICENSE |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 165.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | sap_extncrepos |
## Links
- npm: https://www.npmjs.com/package/@sap/ui5-webcomponents-vscode-css-mapping
- npm.io page: https://npm.io/package/@sap/ui5-webcomponents-vscode-css-mapping
## Recent versions
- 1.0.1 (latest) — 2022-12-13
- 1.0.0 — 2022-09-16
## README
# ui5-webcomponents-vscode-css-mapping
The CSS Variable Mapping from [UI5 Web Components](https://sap.github.io/ui5-webcomponents/) / [Open UI5](https://openui5.org/) to [VSCode theming variables](https://code.visualstudio.com/api/references/theme-color#base-colors) in CSS format.
## Background in Webview UI Development
1. To develop the VSCode extensions with Webview UI, the [Webview UI Toolkit for VSCode](https://github.com/microsoft/vscode-webview-ui-toolkit/) can fit well and be convenient to use in many scenarios.
1. Sometimes when the Webview UI Toolkit for VSCode is not enough, or there have been massive existing UI elements made with UI5 libraries, this mapping can save some efforts to deal with detailed styling in UI controls, with native support of different VSCode themes.
## Prerequisites
- You're using `@ui5/webcomponents` or `openui5` as the UI Library.
- \[Optional\] Build your app with modern bundlers like webpack, esbuild and etc, or with tool-chains like @angular/cli or react-scripts.
## Installation
If you're using modern bundlers with components like css-loader to build your app, it's quite easy for you to introduce this mapping in 2 steps.
1. In your project, run `npm install @sap/ui5-webcomponents-vscode-css-mapping`
1. In the index.ts or app.ts:
```TypeScript
import "@sap/ui5-webcomponents-vscode-css-mapping/dist/vscode-to-ui5-webcomponents.css";
import "@sap/ui5-webcomponents-vscode-css-mapping/dist/quartz-legends.css"; // optional when using @ui5/webcomponents or SAPUI5(OpenUI5)
```
1. Start enjoying the seamless theme switching in VSCode/BAS.
If you're not using any bundling tools, it's also workable (but not recommended):
1. In your project, run `npm install @sap/ui5-webcomponents-vscode-css-mapping`
1. Copy these files to your preferred location, e.g., into `assets/styles/` folder.
- `node_modules/@sap/ui5-webcomponents-vscode-css-mapping/dist/vscode-to-ui5-webcomponents.css` => `assets/styles/vscode-to-ui5-webcomponents.css`
- `node_modules/@sap/ui5-webcomponents-vscode-css-mapping/dist/quartz-legends.css` => `assets/styles/quartz-legends.css`
1. Refer to them in `index.html`:
```html
```
1. Start enjoying the seamless theme switching.
In case that the definitions of any variables were missing, we also provided fallback variable definitions in some files. At present there're 2 types of fallback: light and dark.
To consume styles with fallback, just add the type of fallback as suffix of file path, like:
```html
```
---
_Source: https://npm.io/package/@sap/ui5-webcomponents-vscode-css-mapping · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._