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#23282D
- activityBar.foreground#E3DDD2
- activityBar.inactiveForeground#9399A0
- activityBarBadge.background#77b58d
- activityBarBadge.foreground#23282D
- badge.background#77b58d
- badge.foreground#23282D
- button.background#77b58d
- button.foreground#23282D
- button.hoverBackground#7BB99E
- dropdown.background#30363B
- dropdown.border#3E454B
- editor.background#1e2a30
- editor.findMatchHighlightBackground#34543fe7
- editor.foreground#e6e2d9
- editor.inactiveSelectionBackground#62786a9c
- editor.rangeHighlightBackground#6499b530
- editor.selectionBackground#34543fe7
- editor.selectionHighlightBackground#cd4f069c
- editor.symbolHighlightBackground#6499b550
- editor.wordHighlightBackground#543f34e7
- editor.wordHighlightStrongBackground#487d5acb
- editorBracketMatch.background#3A4148
- editorBracketMatch.border#77b58d
- editorCursor.foreground#77b58dd4
- editorError.foreground#c94d4d
- editorGhostText.foreground#9EA4AB
- editorGroup.border#343A3F
- editorGroupHeader.tabsBackground#2F353B
- editorGutter.deletedBackground#e84d4d
- editorGutter.modifiedBackground#77b58d
- editorHoverWidget.background#2C3236
- editorHoverWidget.border#41474E
- editorIndentGuide.activeBackground1#465668
- editorIndentGuide.background1#2f3743
- editorLineNumber.activeForeground#dedbd3
- editorLineNumber.foreground#8A9198
- editorSuggestWidget.background#2C3236
- editorSuggestWidget.border#41474E
- editorWhitespace.foreground#41474E
- editorWidget.background#2C3236
- editorWidget.border#41474E
- gitDecoration.addedResourceForeground#77b58d
- gitDecoration.modifiedResourceForeground#dbac21
- gitDecoration.untrackedResourceForeground#77b58d
- input.background#30363B
- input.border#3E454B
- input.foreground#E3DDD2
- input.placeholderForeground#8E939A
- list.activeSelectionBackground#40464D
- list.activeSelectionForeground#EDE7DA
- list.focusBackground#454C53
- list.focusForeground#EDE7DA
- list.hoverBackground#3B4148
- list.hoverForeground#EDE7DA
- list.inactiveSelectionBackground#33393F
- notificationCenterHeader.background#30363b
- notificationCenterHeader.foreground#77b58d
- notificationLink.foreground#77b58d
- notifications.background#77b58d
- notifications.foreground#30363B
- notificationsErrorIcon.foreground#c94d4d
- notificationsInfoIcon.foreground#77b58d
- notificationsWarningIcon.foreground#E7B37B
- panel.background#343A3F
- panel.border#2A2F34
- panelSectionHeader.background#30363B
- panelSectionHeader.border#2A2F34
- progressBar.background#77b58d
- scrollbar.shadow#1f3a4f
- scrollbarSlider.activeBackground#0f7bd3
- scrollbarSlider.background#4383b7ad
- scrollbarSlider.hoverBackground#0f7bd3cf
- sideBar.background#1f272b
- sideBar.foreground#706c5d
- sideBarTitle.foreground#dedbd3
- statusBar.background#23282D
- statusBar.border#15181B
- statusBar.debuggingBackground#E7B37B
- statusBar.debuggingForeground#2F353B
- statusBar.foreground#E3DDD2
- statusBar.noFolderBackground#23282D
- statusBarItem.hoverBackground#2F353B
- tab.activeBackground#3F464D
- tab.activeBorder#77b58d
- tab.border#3A4045
- tab.inactiveBackground#2A2F34
- terminal.ansiBlack#2F353B
- terminal.ansiBlue#7A90AE
- terminal.ansiBrightBlack#555B63
- terminal.ansiBrightBlue#90A4C4
- terminal.ansiBrightCyan#B3DCE9
- terminal.ansiBrightGreen#A9D9C2
- terminal.ansiBrightMagenta#C4B0CF
- terminal.ansiBrightRed#F3B081
- terminal.ansiBrightWhite#F3EEE2
- terminal.ansiBrightYellow#E8C89C
- terminal.ansiCyan#85B9C8
- terminal.ansiGreen#77b58d
- terminal.ansiMagenta#A48EB5
- terminal.ansiRed#E8A06D
- terminal.ansiWhite#E3DDD2
- terminal.ansiYellow#DDB06F
- terminal.background#1e2a30
- terminal.foreground#E3DDD2
- terminalCursor.background#77b58d
- terminalCursor.foreground#77b58d
- titleBar.activeBackground#23282D
- titleBar.activeForeground#E3DDD2
- titleBar.inactiveBackground#1D2124
- titleBar.inactiveForeground#868C92
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 | #078a4f | — |
| keyword, storage, storage.type, storage.modifier | #e6c791 | — |
| entity.name.function, meta.function-call, support.function | #7db19c | — |
| variable, entity.name.variable, meta.property-name, meta.property.accessor, meta.property.object, meta.property, variable.other.property, variable.other.readwrite | #ab7e58 | — |
| entity.name.type, support.type, entity.name.class, storage.type.class | #E09B61 | — |
| constant, constant.numeric, support.constant | #c35240 | — |
| constant.numeric, support.constant.numeric | #c35240 | — |
| keyword.operator, punctuation.definition.tag, punctuation.separator, punctuation.terminator | #B3A799 | — |
| meta.decorator, storage.modifier.annotation | #87BFA8 | — |
| support.type.property-name.json, meta.object-literal.key, meta.mapping.key.json, support.type.property-name, variable.other.property | #6499b5 | — |
| meta.structure.dictionary.json string.quoted.double.json | #E09B61 | — |
| entity.name.tag, support.class.component, meta.tag | #6499b5 | — |
| entity.other.attribute-name, meta.tag.attribute-name, support.variable.attribute | #8FCAB7 | — |
| support.type.property-name.css, meta.property-list.css meta.property-name, entity.other.attribute-name.css | #c19b76 | — |