83 lines
3.4 KiB
Markdown
83 lines
3.4 KiB
Markdown
# SAP Quartz Theme for VS Code
|
||
|
||
Color themes that bring the SAP GUI Quartz look & feel into Visual Studio Code — including full ABAP and CDS syntax highlighting.
|
||
|
||
Both themes are derived from SAP's official [`@sap-theming/theming-base-content`](https://github.com/SAP/theming-base-content) package, using the exact color values from `sap_fiori_3` (Quartz Light) and `sap_fiori_3_dark` (Quartz Dark).
|
||
|
||
## Themes
|
||
|
||
| | SAP Quartz Light | SAP Quartz Dark |
|
||
|---|---|---|
|
||
| Source | `sap_fiori_3` | `sap_fiori_3_dark` |
|
||
| Shell | `#354a5f` | `#354a5f` |
|
||
| Editor background | `#ffffff` | `#29313a` |
|
||
| Text | `#232629` | `#fafafa` |
|
||
| Keywords | `#0a6ed1` | `#91c8f6` |
|
||
| Strings | `#107e3e` | `#abe2ab` |
|
||
| Types / Classes | `#c0399f` | `#e269c9` |
|
||
| Methods | `#286eb4` | `#6bd3ff` |
|
||
| Constants | `#d08014` | `#ffc847` |
|
||
| Comments | `#6a6d70` | `#d3d7d9` |
|
||
|
||
## Installation
|
||
|
||
Download the latest `.vsix` from [Releases](../../releases), then:
|
||
|
||
```bash
|
||
code --install-extension sap-quartz-theme-1.0.0.vsix
|
||
```
|
||
|
||
Or inside VS Code: **Extensions** (Ctrl+Shift+X) → `⋯` menu → **Install from VSIX…** → select the file.
|
||
|
||
Activate with **Ctrl+K Ctrl+T** and pick **SAP Quartz Light** or **SAP Quartz Dark**.
|
||
|
||
## Color Mapping
|
||
|
||
Every UI color maps to an official SAP theming parameter:
|
||
|
||
| VS Code element | SAP parameter |
|
||
|---|---|
|
||
| Title bar / Activity bar | `sapShellColor` |
|
||
| Side bar | `sapShell_Background` |
|
||
| Editor background | `sapBaseColor` |
|
||
| Tab accent | `sapBrandColor` |
|
||
| Status bar | `sapPageFooter_Background` |
|
||
| Input fields | `sapField_Background` / `sapField_BorderColor` |
|
||
| Lists & selections | `sapList_*` |
|
||
| Errors | `sapNegativeColor` |
|
||
| Warnings | `sapCriticalColor` |
|
||
| Success / strings | `sapPositiveColor` |
|
||
| Info / links | `sapInformativeColor` |
|
||
|
||
Syntax token colors use the `sapAccentColor1`–`sapAccentColor10` palette from the same theme, mapped as follows:
|
||
|
||
| Token | Light | Dark | SAP parameter |
|
||
|---|---|---|---|
|
||
| Keywords (DATA, SELECT, IF…) | `#0a6ed1` bold | `#91c8f6` bold | `sapBrandColor` |
|
||
| Types (zcl_*, dfkkop, abap_bool) | `#c0399f` | `#e269c9` | `sapAccentColor4` |
|
||
| Methods / functions | `#286eb4` | `#6bd3ff` | `sapAccentColor6` |
|
||
| Strings | `#107e3e` | `#abe2ab` | `sapPositiveColor` |
|
||
| Constants / numbers | `#d08014` | `#ffc847` | `sapAccentColor1` |
|
||
| Storage (DATA, TYPES, CLASS) | `#925ace` | `#b995e0` | `sapAccentColor9` |
|
||
| Annotations (@, decorators) | `#925ace` | `#b995e0` | `sapAccentColor9` |
|
||
| HTML/XML tags | `#d04343` | `#e7a1a1` | `sapAccentColor2` |
|
||
| Regex | `#0f828f` | `#7fc6c6` | `sapAccentColor7` |
|
||
| Namespaces | `#6367de` | `#8ca7d5` | `sapAccentColor5` |
|
||
| Comments | `#6a6d70` italic | `#d3d7d9` italic | `sapContent_LabelColor` |
|
||
|
||
## How It Was Built
|
||
|
||
1. Installed `@sap-theming/theming-base-content` from npm
|
||
2. Parsed `variables.json` from `content/Base/baseLib/sap_fiori_3/` and `sap_fiori_3_dark/`
|
||
3. Mapped SAP design tokens (`sapBrandColor`, `sapShellColor`, `sapAccentColor*`, etc.) to VS Code's `workbench.colorCustomizations` and `tokenColors`
|
||
4. Packaged as a standard VS Code color theme extension
|
||
|
||
## Recommended Companion Extensions
|
||
|
||
- [SAP CDS Language Support](https://marketplace.visualstudio.com/items?itemName=SAPSE.vscode-cds) — CDS syntax highlighting
|
||
|
||
## License
|
||
|
||
Theme colors are extracted from [SAP theming-base-content](https://github.com/SAP/theming-base-content) which is licensed under Apache-2.0.
|
||
|
||
This extension is provided as-is for personal and internal use. |