nkalai Theme
Publisher: Tsepo NkalaiThemes in package: 2
Paired light/dark Visual Studio Code themes with a dimmed light variant and a shared #77B58D accent for balanced day/night use.
Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.activeBorder#77b58d
- activityBar.background#2a2219
- activityBar.foreground#f3ecdf
- activityBar.inactiveForeground#b0a796
- activityBarBadge.background#77b58d
- activityBarBadge.foreground#2a2219
- badge.background#77b58d
- badge.foreground#2a2219
- button.background#77b58d
- button.foreground#ebe8de
- button.hoverBackground#6aa882
- dropdown.background#eeeae2
- dropdown.border#dacebc
- editor.background#e8e3d3
- editor.findMatchHighlightBackground#d8e3d2
- editor.foreground#2F291F
- editor.inactiveSelectionBackground#c8c0b1
- editor.rangeHighlightBackground#8bb4c630
- editor.selectionBackground#c8c0b1
- editor.selectionHighlightBackground#e3dbca
- editor.symbolHighlightBackground#8bb4c650
- editor.wordHighlightBackground#e4d4c4
- editor.wordHighlightStrongBackground#d4e3d6
- editorBracketMatch.background#e9e2d5
- editorBracketMatch.border#77b58d
- editorCursor.foreground#77b58d
- editorError.foreground#c94d4d
- editorGhostText.foreground#9a9183
- editorGroup.border#dacebc
- editorGroupHeader.tabsBackground#ebe8de
- editorGutter.background#ebe8de
- editorHoverWidget.background#eeeae2
- editorHoverWidget.border#d9cfc0
- editorIndentGuide.activeBackground1#b0a796
- editorLineNumber.activeForeground#554a3f
- editorLineNumber.foreground#b0a796
- editorSuggestWidget.background#eeeae2
- editorSuggestWidget.border#d9cfc0
- editorWhitespace.foreground#d4caba
- editorWidget.background#eeeae2
- editorWidget.border#d9cfc0
- input.background#eeeae2
- input.border#dacebc
- input.foreground#2b261d
- input.placeholderForeground#948a7d
- list.activeSelectionBackground#d9ddcd
- list.activeSelectionForeground#2b261d
- list.focusBackground#d3d3c5
- list.focusForeground#2b261d
- list.hoverBackground#e5ddcd
- list.hoverForeground#2b261d
- list.inactiveSelectionBackground#ded7c7
- notificationCenterHeader.background#e7e1d5
- notificationCenterHeader.foreground#433a30
- notificationLink.foreground#4b7a97
- notifications.background#eeeae2
- notifications.foreground#2b261d
- notificationsErrorIcon.foreground#c94d4d
- notificationsInfoIcon.foreground#4b7a97
- notificationsWarningIcon.foreground#d89c62
- panel.background#e8e3d3
- panel.border#d3c6b4
- panelSectionHeader.background#e7e1d5
- panelSectionHeader.border#d3c6b4
- progressBar.background#77b58d
- scrollbar.shadow#1f3a4f
- scrollbarSlider.activeBackground#0f7bd3
- scrollbarSlider.background#4383b7ad
- scrollbarSlider.hoverBackground#0f7bd3cf
- sideBar.background#e8e3d3
- sideBar.border#dacebc
- sideBar.foreground#726e64
- sideBarTitle.foreground#433a30
- statusBar.background#e8e3d3
- statusBar.border#b0aea5
- statusBar.debuggingBackground#d89c62
- statusBar.debuggingForeground#2a2219
- statusBar.foreground#2a2219
- statusBar.noFolderBackground#2a2219
- statusBarItem.hoverBackground#352c23
- tab.activeBackground#eeeae2
- tab.activeBorder#77b58d
- tab.border#d3c6b4
- tab.inactiveBackground#e3dbca
- terminal.ansiBlack#2a2219
- terminal.ansiBlue#4c4f63
- terminal.ansiBrightBlack#8b8073
- terminal.ansiBrightBlue#5f6580
- terminal.ansiBrightCyan#88b8cb
- terminal.ansiBrightGreen#8bc0a7
- terminal.ansiBrightMagenta#b18ca9
- terminal.ansiBrightRed#da8d68
- terminal.ansiBrightWhite#f6f1e5
- terminal.ansiBrightYellow#dab478
- terminal.ansiCyan#6ea2b5
- terminal.ansiGreen#77b58d
- terminal.ansiMagenta#9d7694
- terminal.ansiRed#c87a55
- terminal.ansiWhite#efe5d4
- terminal.ansiYellow#c39b56
- terminal.background#e8e3d3
- terminal.foreground#ebe6db
- terminalCursor.background#77b58d
- terminalCursor.foreground#77b58d
- titleBar.activeBackground#2a2219
- titleBar.activeForeground#f3ecdf
- titleBar.inactiveBackground#241d15
- titleBar.inactiveForeground#9c9184
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #7f9916 | italic |
| string, string.template, constant.character.escape, string.regexp, constant.other.symbol, support.constant | #0a7c48 | — |
| keyword, storage, storage.type, storage.modifier | #b58f3a | — |
| entity.name.function, meta.function-call, support.function | #4f9477 | — |
| variable, entity.name.variable, meta.property-name, meta.property.accessor, meta.property.object, meta.property, variable.other.property, variable.other.readwrite | #855c3c | — |
| entity.name.type, support.type, entity.name.class, storage.type.class | #b27442 | — |
| constant, constant.numeric, support.constant | #b65a3c | — |
| constant.numeric, support.constant.numeric | #b65a3c | — |
| keyword.operator, punctuation.definition.tag, punctuation.separator, punctuation.terminator | #6b5d6f | — |
| meta.decorator, storage.modifier.annotation | #5F8C78 | — |
| support.type.property-name.json, meta.object-literal.key, meta.mapping.key.json, meta.structure.dictionary.json string.quoted.double.json, support.type.property-name, variable.other.property | #4b7a97 | — |
| meta.structure.dictionary.json string.quoted.double.json | #b27442 | — |
| entity.name.tag, support.class.component, meta.tag | #4b7a97 | — |
| entity.other.attribute-name, meta.tag.attribute-name, support.variable.attribute | #4e8f78 | — |
| support.type.property-name.css, meta.property-list.css meta.property-name, entity.other.attribute-name.css | #9a7a54 | — |