Kawa

Color themes

• 

  Kawa Dark

• 

  Kawa Light

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.background#fcf8f9
• activityBar.foreground#191017
• activityBar.inactiveForeground#a38f96
• activityBarBadge.background#9d426f
• badge.background#9d426f
• badge.foreground#fafafa
• button.background#9d426f
• button.hoverBackground#f1e4e9
• button.secondaryBackground#f5eff1
• button.secondaryForeground#191017
• button.secondaryHoverBackground#f1e4e9
• commandCenter.border#ecdfe3
• debugToolBar.background#f5eff1
• descriptionForeground#a38f96
• dropdown.background#f5eff1
• dropdown.border#ecdfe3
• editor.background#fcf8f9
• editor.findMatchBackground#9d426f
• editor.foreground#191017
• editor.lineHighlightBackground#f1e4e9
• editor.selectionBackground#f1e4e9
• editor.wordHighlightBackground#f1e4e9
• editor.wordHighlightStrongBackground#ead1dc
• editorBracketHighlight.foreground1#9d426f
• editorBracketHighlight.foreground2#a34f35
• editorBracketHighlight.foreground3#76517d
• editorBracketHighlight.foreground4#9a5b16
• editorBracketHighlight.foreground5#3f7a54
• editorBracketHighlight.foreground6#6f6370
• editorBracketMatch.background#f1e4e9
• editorBracketMatch.border#9d426f
• editorCodeLens.foreground#a38f96
• editorCursor.foreground#9d426f
• editorError.border#b42318
• editorError.foreground#b42318
• editorGroup.border#ecdfe3
• editorGroup.dropBackground#f1e4e9
• editorGroupHeader.border#ecdfe3
• editorGroupHeader.noTabsBackground#fcf8f9
• editorGroupHeader.tabsBackground#fcf8f9
• editorGroupHeader.tabsBorder#ecdfe3
• editorGroupHeader.tabsForeground#191017
• editorGutter.addedBackground#3f7a54
• editorGutter.background#fcf8f9
• editorGutter.deletedBackground#b42318
• editorGutter.modifiedBackground#9d426f
• editorHoverWidget.background#f5eff1
• editorHoverWidget.border#ecdfe3
• editorHoverWidget.foreground#191017
• editorIndentGuide.activeBackground1#9d426f
• editorIndentGuide.background1#ecdfe3
• editorInfo.border#6f6370
• editorInfo.foreground#6f6370
• editorLineNumber.activeForeground#191017
• editorLineNumber.foreground#a38f96
• editorMarkerNavigation.background#f5eff1
• editorMarkerNavigationError.background#b42318
• editorMarkerNavigationInfo.background#6f6370
• editorMarkerNavigationWarning.background#9a5b16
• editorOverviewRuler.addedForeground#3f7a54
• editorOverviewRuler.border#ecdfe3
• editorOverviewRuler.bracketMatchForeground#9d426f
• editorOverviewRuler.commonContentForeground#191017
• editorOverviewRuler.currentContentForeground#191017
• editorOverviewRuler.deletedForeground#b42318
• editorOverviewRuler.errorForeground#b42318
• editorOverviewRuler.incomingContentForeground#191017
• editorOverviewRuler.infoForeground#6f6370
• editorOverviewRuler.modifiedForeground#9d426f
• editorOverviewRuler.warningForeground#9a5b16
• editorPane.background#fcf8f9
• editorRuler.foreground#ecdfe3
• editorStickyScroll.background#f5eff1
• editorStickyScrollHover.background#f1e4e9
• editorSuggestWidget.background#f5eff1
• editorSuggestWidget.foreground#191017
• editorSuggestWidget.highlightForeground#9d426f
• editorSuggestWidget.selectedBackground#f1e4e9
• editorWarning.border#9a5b16
• editorWarning.foreground#9a5b16
• editorWhitespace.foreground#a38f96
• editorWidget.background#f5eff1
• editorWidget.border#ecdfe3
• editorWidget.foreground#191017
• extensionButton.prominentHoverBackground#f1e4e9
• focusBorder#ecdfe3
• gitDecoration.addedResourceForeground#3f7a54
• gitDecoration.deletedResourceForeground#b42318
• gitDecoration.modifiedResourceForeground#9a5b16
• gitDecoration.untrackedResourceForeground#9d426f
• input.background#f5eff1
• input.border#ecdfe3
• input.foreground#191017
• input.placeholderForeground#a38f96
• inputOption.activeBorder#9d426f
• inputOption.hoverBackground#f1e4e9
• inputValidation.errorBackground#b42318
• inputValidation.errorBorder#b42318
• inputValidation.infoBackground#6f6370
• inputValidation.infoBorder#6f6370
• inputValidation.warningBackground#9a5b16
• inputValidation.warningBorder#9a5b16
• list.activeSelectionBackground#ead1dc
• list.activeSelectionForeground#191017
• list.activeSelectionIconForeground#9d426f
• list.deemphasizedForeground#a38f96
• list.foreground#191017
• list.hoverBackground#f1e4e9
• list.inactiveSelectionBackground#f1e4e9
• list.inactiveSelectionForeground#191017
• menu.background#f5eff1
• menu.border#ecdfe3
• menu.foreground#191017
• menu.selectionBackground#f1e4e9
• menu.selectionForeground#191017
• notificationCenter.border#ecdfe3
• notificationCenterHeader.background#fcf8f9
• notificationLink.foreground#9d426f
• notifications.background#fcf8f9
• notifications.border#ecdfe3
• notifications.foreground#191017
• notificationToast.border#ecdfe3
• panel.background#fcf8f9
• panel.border#ecdfe3
• panelInput.border#ecdfe3
• panelSectionHeader.background#f5eff1
• panelTitle.activeForeground#191017
• panelTitle.inactiveForeground#a38f96
• peekView.border#ecdfe3
• peekViewEditor.background#f5eff1
• peekViewEditor.matchHighlightBackground#f1e4e9
• peekViewResult.background#f5eff1
• peekViewTitle.background#f5eff1
• progressBar.background#9d426f
• quickInput.background#fcf8f9
• quickInput.foreground#191017
• quickInputList.focusBackground#f1e4e9
• quickInputTitle.background#f5eff1
• sideBar.background#fcf8f9
• sideBar.border#ecdfe3
• sideBar.foreground#191017
• sideBarSectionHeader.foreground#a38f96
• statusBar.background#fcf8f9
• statusBar.foreground#191017
• statusBarItem.hoverBackground#f1e4e9
• tab.activeBackground#fcf8f9
• tab.activeForeground#191017
• tab.border#ecdfe3
• tab.inactiveBackground#fcf8f9
• tab.inactiveForeground#191017
• tab.unfocusedInactiveForeground#a38f96
• terminal.ansiBlack#fcf8f9
• terminal.ansiBlue#6f6370
• terminal.ansiBrightBlack#a38f96
• terminal.ansiBrightBlue#6f6370
• terminal.ansiBrightMagenta#9d426f
• terminal.ansiBrightRed#b42318
• terminal.ansiBrightWhite#191017
• terminal.ansiBrightYellow#9a5b16
• terminal.ansiMagenta#9d426f
• terminal.ansiRed#b42318
• terminal.ansiWhite#191017
• terminal.ansiYellow#9a5b16
• terminal.background#fcf8f9
• terminal.foreground#191017
• textLink.activeForeground#9d426f
• textLink.foreground#9d426f
• titleBar.activeBackground#fcf8f9
• titleBar.activeForeground#191017
• titleBar.inactiveBackground#fcf8f9
• titleBar.inactiveForeground#191017
• toolbar.hoverBackground#f1e4e9
• welcomePage.progress.background#9d426f
• welcomePage.tileBackground#f5eff1
• welcomePage.tileHoverBackground#f1e4e9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).