3.4 KiB
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 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, then:
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
- Installed
@sap-theming/theming-base-contentfrom npm - Parsed
variables.jsonfromcontent/Base/baseLib/sap_fiori_3/andsap_fiori_3_dark/ - Mapped SAP design tokens (
sapBrandColor,sapShellColor,sapAccentColor*, etc.) to VS Code'sworkbench.colorCustomizationsandtokenColors - Packaged as a standard VS Code color theme extension
Recommended Companion Extensions
- SAP CDS Language Support — CDS syntax highlighting
License
Theme colors are extracted from SAP theming-base-content which is licensed under Apache-2.0.
This extension is provided as-is for personal and internal use.