Kana Dark
Publisher: Chris WiegmanThemes in package: 1
A warm, earthy dark theme inspired by chriswiegman.com
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#c8804a
- activityBar.background#1a1816
- activityBar.border#252220
- activityBar.foreground#cec6bc
- activityBar.inactiveForeground#4a4540
- activityBarBadge.background#c8804a
- activityBarBadge.foreground#1a1816
- badge.background#c8804a
- badge.foreground#1a1816
- breadcrumb.activeSelectionForeground#d4cbbf
- breadcrumb.focusForeground#cec6bc
- breadcrumb.foreground#4a4540
- breadcrumbPicker.background#1f1d1b
- button.background#c8804a
- button.foreground#1a1816
- button.hoverBackground#d4a87a
- button.secondaryBackground#2e2b28
- button.secondaryForeground#cec6bc
- button.secondaryHoverBackground#332e2b
- checkbox.background#1f1d1b
- checkbox.border#252220
- checkbox.foreground#cec6bc
- debugToolBar.background#1f1d1b
- debugToolBar.border#252220
- descriptionForeground#a88060
- diffEditor.diagonalFill#252220
- diffEditor.insertedLineBackground#7ab87015
- diffEditor.insertedTextBackground#7ab87025
- diffEditor.removedLineBackground#c8804a15
- diffEditor.removedTextBackground#c8804a25
- disabledForeground#4a4540
- dropdown.background#1f1d1b
- dropdown.border#252220
- dropdown.foreground#cec6bc
- editor.background#1a1816
- editor.findMatchBackground#c8804a50
- editor.findMatchHighlightBackground#c8804a28
- editor.findRangeHighlightBackground#c8804a18
- editor.focusedStackFrameHighlightBackground#7ab87025
- editor.foreground#b0a898
- editor.hoverHighlightBackground#c8804a18
- editor.inactiveSelectionBackground#2e2b2880
- editor.lineHighlightBackground#1f1d1b
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#c8804a12
- editor.selectionBackground#332e2b
- editor.selectionHighlightBackground#c8804a20
- editor.stackFrameHighlightBackground#c8a06020
- editor.wordHighlightBackground#c8804a18
- editor.wordHighlightStrongBackground#c8804a30
- editorBracketHighlight.foreground1#c8804a
- editorBracketHighlight.foreground2#d4a87a
- editorBracketHighlight.foreground3#7ab870
- editorBracketHighlight.foreground4#80a898
- editorBracketHighlight.foreground5#b06858
- editorBracketHighlight.foreground6#c8a060
- editorBracketHighlight.unexpectedBracket.foreground#c8604a
- editorBracketMatch.background#c8804a20
- editorBracketMatch.border#c8804a80
- editorCodeLens.foreground#6b6460
- editorCursor.background#1a1816
- editorCursor.foreground#c8804a
- editorError.foreground#c8604a
- editorGroup.border#252220
- editorGroup.dropBackground#c8804a20
- editorGroupHeader.noTabsBackground#1a1816
- editorGroupHeader.tabsBackground#1a1816
- editorGutter.addedBackground#7ab870
- editorGutter.background#1a1816
- editorGutter.deletedBackground#c8804a
- editorGutter.modifiedBackground#d4a87a
- editorHint.foreground#6b6460
- editorHoverWidget.background#1f1d1b
- editorHoverWidget.border#252220
- editorHoverWidget.foreground#cec6bc
- editorIndentGuide.activeBackground1#4a4540
- editorIndentGuide.background1#252220
- editorInfo.foreground#80a898
- editorInlayHint.background#00000000
- editorInlayHint.foreground#6b6460
- editorInlayHint.parameterBackground#00000000
- editorInlayHint.parameterForeground#6b6460
- editorInlayHint.typeBackground#00000000
- editorInlayHint.typeForeground#6b6460
- editorLineNumber.activeForeground#7a736c
- editorLineNumber.foreground#4a4540
- editorOverviewRuler.addedForeground#7ab870
- editorOverviewRuler.border#00000000
- editorOverviewRuler.deletedForeground#c8804a
- editorOverviewRuler.errorForeground#c8804a
- editorOverviewRuler.findMatchForeground#c8804aaa
- editorOverviewRuler.infoForeground#80a898
- editorOverviewRuler.modifiedForeground#d4a87a
- editorOverviewRuler.selectionHighlightForeground#c8804a80
- editorOverviewRuler.warningForeground#d4a87a
- editorOverviewRuler.wordHighlightForeground#a8806080
- editorOverviewRuler.wordHighlightStrongForeground#c8804aa0
- editorRuler.foreground#252220
- editorSuggestWidget.background#1f1d1b
- editorSuggestWidget.border#252220
- editorSuggestWidget.foreground#cec6bc
- editorSuggestWidget.highlightForeground#c8804a
- editorSuggestWidget.selectedBackground#2e2b28
- editorWarning.foreground#d4a87a
- editorWhitespace.foreground#2e2b28
- editorWidget.background#1f1d1b
- editorWidget.border#252220
- editorWidget.foreground#cec6bc
- errorForeground#c8804a
- extensionButton.prominentBackground#c8804a
- extensionButton.prominentForeground#1a1816
- extensionButton.prominentHoverBackground#d4a87a
- focusBorder#c8804a
- foreground#cec6bc
- gitDecoration.addedResourceForeground#7ab870
- gitDecoration.conflictingResourceForeground#b06858
- gitDecoration.deletedResourceForeground#c8804a
- gitDecoration.ignoredResourceForeground#4a4540
- gitDecoration.modifiedResourceForeground#d4a87a
- gitDecoration.submoduleResourceForeground#80a898
- gitDecoration.untrackedResourceForeground#7ab870
- icon.foreground#7a736c
- input.background#1f1d1b
- input.border#252220
- input.foreground#cec6bc
- input.placeholderForeground#6b6460
- inputOption.activeBackground#2e2b28
- inputOption.activeBorder#c8804a
- inputOption.activeForeground#d4cbbf
- inputValidation.errorBackground#1f1d1b
- inputValidation.errorBorder#c8804a
- inputValidation.infoBackground#1f1d1b
- inputValidation.infoBorder#d4a87a
- list.activeSelectionBackground#332e2b
- list.activeSelectionForeground#d4cbbf
- list.dropBackground#332e2b
- list.errorForeground#c8804a
- list.filterMatchBackground#c8804a30
- list.filterMatchBorder#c8804a
- list.focusBackground#332e2b
- list.focusForeground#d4cbbf
- list.highlightForeground#c8804a
- list.hoverBackground#252220
- list.hoverForeground#cec6bc
- list.inactiveSelectionBackground#2e2b28
- list.inactiveSelectionForeground#cec6bc
- list.warningForeground#d4a87a
- menu.background#1f1d1b
- menu.foreground#cec6bc
- menu.selectionBackground#2e2b28
- menu.selectionForeground#d4cbbf
- menu.separatorBackground#252220
- menubar.selectionBackground#252220
- menubar.selectionForeground#d4cbbf
- merge.currentContentBackground#7ab87020
- merge.currentHeaderBackground#7ab87040
- merge.incomingContentBackground#80a89820
- merge.incomingHeaderBackground#80a89840
- mergeEditor.change.background#7ab87020
- mergeEditor.change.word.background#7ab87040
- minimap.background#1a1816
- minimap.errorHighlight#c8804a
- minimap.findMatchHighlight#c8804a80
- minimap.selectionHighlight#c8804a50
- minimap.warningHighlight#d4a87a
- notificationLink.foreground#d4a87a
- notifications.background#1f1d1b
- notifications.border#252220
- notifications.foreground#cec6bc
- notificationsErrorIcon.foreground#c8804a
- notificationsInfoIcon.foreground#80a898
- notificationsWarningIcon.foreground#d4a87a
- panel.background#1a1816
- panel.border#252220
- panelTitle.activeBorder#c8804a
- panelTitle.activeForeground#d4cbbf
- panelTitle.inactiveForeground#4a4540
- peekView.border#c8804a
- peekViewEditor.background#1a1816
- peekViewEditor.matchHighlightBackground#c8804a40
- peekViewResult.background#1f1d1b
- peekViewResult.fileForeground#a88060
- peekViewResult.lineForeground#cec6bc
- peekViewResult.matchHighlightBackground#c8804a40
- peekViewResult.selectionBackground#2e2b28
- peekViewResult.selectionForeground#d4cbbf
- peekViewTitle.background#1f1d1b
- peekViewTitleDescription.foreground#a88060
- peekViewTitleLabel.foreground#d4cbbf
- pickerGroup.border#252220
- pickerGroup.foreground#7a736c
- progressBar.background#c8804a
- scrollbar.shadow#00000040
- scrollbarSlider.activeBackground#7a736c
- scrollbarSlider.background#4a454040
- scrollbarSlider.hoverBackground#4a454070
- selection.background#c8804a40
- settings.checkboxBackground#1f1d1b
- settings.checkboxBorder#252220
- settings.dropdownBackground#1f1d1b
- settings.dropdownBorder#252220
- settings.headerForeground#a88060
- settings.modifiedItemIndicator#c8804a
- settings.numberInputBackground#1f1d1b
- settings.numberInputBorder#252220
- settings.textInputBackground#1f1d1b
- settings.textInputBorder#252220
- sideBar.background#1a1816
- sideBar.border#252220
- sideBar.foreground#cec6bc
- sideBarSectionHeader.background#1a1816
- sideBarSectionHeader.border#252220
- sideBarSectionHeader.foreground#a88060
- sideBarTitle.foreground#7a736c
- statusBar.background#1a1816
- statusBar.border#252220
- statusBar.debuggingBackground#c8804a
- statusBar.debuggingForeground#1a1816
- statusBar.foreground#7a736c
- statusBar.noFolderBackground#1a1816
- statusBarItem.hoverBackground#252220
- statusBarItem.remoteBackground#b06858
- statusBarItem.remoteForeground#1a1816
- symbolIcon.arrayForeground#cec6bc
- symbolIcon.booleanForeground#7ab870
- symbolIcon.classForeground#d4a87a
- symbolIcon.colorForeground#c8804a
- symbolIcon.constructorForeground#e8c87a
- symbolIcon.enumeratorForeground#b06858
- symbolIcon.enumeratorMemberForeground#b06858
- symbolIcon.eventForeground#c8804a
- symbolIcon.fieldForeground#b8a878
- symbolIcon.fileForeground#a88060
- symbolIcon.folderForeground#d4a87a
- symbolIcon.functionForeground#e8c87a
- symbolIcon.interfaceForeground#80a898
- symbolIcon.keyForeground#d4a87a
- symbolIcon.keywordForeground#c8804a
- symbolIcon.methodForeground#e8c87a
- symbolIcon.moduleForeground#8898a8
- symbolIcon.namespaceForeground#8898a8
- symbolIcon.nullForeground#7ab870
- symbolIcon.numberForeground#c8a060
- symbolIcon.objectForeground#cec6bc
- symbolIcon.operatorForeground#9a8878
- symbolIcon.packageForeground#9a8878
- symbolIcon.propertyForeground#b8a878
- symbolIcon.referenceForeground#cec6bc
- symbolIcon.snippetForeground#a88060
- symbolIcon.stringForeground#98b060
- symbolIcon.structForeground#d4a87a
- symbolIcon.textForeground#cec6bc
- symbolIcon.typeParameterForeground#80a898
- symbolIcon.unitForeground#c8a060
- symbolIcon.variableForeground#c4b8ae
- tab.activeBackground#1a1816
- tab.activeBorder#00000000
- tab.activeBorderTop#c8804a
- tab.activeForeground#d4cbbf
- tab.border#252220
- tab.hoverBackground#252220
- tab.hoverForeground#cec6bc
- tab.inactiveBackground#161412
- tab.inactiveForeground#4a4540
- tab.lastPinnedBorder#252220
- tab.unfocusedActiveBackground#1a1816
- tab.unfocusedActiveForeground#a88060
- tab.unfocusedInactiveForeground#4a4540
- terminal.ansiBlack#2e2b28
- terminal.ansiBlue#80a898
- terminal.ansiBrightBlack#4a4540
- terminal.ansiBrightBlue#80a898
- terminal.ansiBrightCyan#d4a87a
- terminal.ansiBrightGreen#7ab870
- terminal.ansiBrightMagenta#c8804a
- terminal.ansiBrightRed#c8804a
- terminal.ansiBrightWhite#d4cbbf
- terminal.ansiBrightYellow#d4a87a
- terminal.ansiCyan#d4a87a
- terminal.ansiGreen#7ab870
- terminal.ansiMagenta#b06858
- terminal.ansiRed#c8604a
- terminal.ansiWhite#cec6bc
- terminal.ansiYellow#c8a060
- terminal.background#1a1816
- terminal.foreground#b0a898
- terminal.selectionBackground#332e2b
- terminalCursor.background#1a1816
- terminalCursor.foreground#c8804a
- textBlockQuote.background#1f1d1b
- textBlockQuote.border#c8804a
- textCodeBlock.background#1f1d1b
- textLink.activeForeground#c8804a
- textLink.foreground#d4a87a
- textPreformat.foreground#cec6bc
- textSeparator.foreground#252220
- titleBar.activeBackground#1a1816
- titleBar.activeForeground#cec6bc
- titleBar.border#252220
- titleBar.inactiveBackground#1a1816
- titleBar.inactiveForeground#4a4540
- widget.shadow#00000060
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6b6460 | italic |
| comment.block.documentation, comment.line.documentation | #7a736c | italic |
| storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.tag.inline.jsdoc | #9a8878 | italic |
| keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #c8804a | italic |
| keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.in, keyword.operator.of | #c8804a | italic |
| storage, storage.type, storage.modifier | #c8804a | italic |
| string, string.quoted, string.template | #98b060 | — |
| constant.character.escape | #d4a87a | — |
| punctuation.definition.template-expression | #c8804a | — |
| string.regexp | #c8a060 | — |
| punctuation.definition.group.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp | #c8804a | — |
| constant.numeric, constant.numeric.decimal, constant.numeric.float, constant.numeric.integer | #c8a060 | — |
| constant.numeric.hex, constant.numeric.octal, constant.numeric.binary | #d4a87a | — |
| constant.language.boolean | #7ab870 | italic |
| constant.language.null, constant.language.undefined, constant.language.nil, constant.language.none | #7ab870 | italic |
| constant.language, variable.language.this, variable.language.self, variable.language.super | #c8804a | italic |
| variable.other.constant, variable.other.enummember | #b06858 | — |
| constant.other.enum | #b06858 | — |
| variable, variable.other, variable.other.readwrite | #c4b8ae | — |
| variable.parameter, variable.parameter.function | #c4b8ae | italic |
| variable.other.property, support.variable.property, variable.other.object.property | #b8a878 | — |
| meta.object-literal.key | #d4a87a | — |
| entity.name.function, meta.function-call.generic, meta.function-call entity.name.function, support.function | #e8c87a | — |
| meta.definition.function entity.name.function | #e8c87a | bold |
| support.function.builtin | #e8c87a | — |
| entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type | #d4a87a | — |
| entity.name.type.interface | #80a898 | italic |
| entity.name.type.struct, storage.type.struct | #d4a87a | — |
| entity.name.type.enum | #b06858 | — |
| entity.name.type.parameter, variable.type.parameter, punctuation.definition.typeparameters | #80a898 | — |
| support.type.primitive, support.type.builtin, support.type.builtin.go, keyword.type | #80a898 | — |
| entity.name.namespace, entity.name.module, variable.other.object | #8898a8 | — |
| keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.type, keyword.operator.spread, keyword.operator.optional | #9a8878 | — |
| punctuation, punctuation.definition, punctuation.terminator, punctuation.separator, meta.brace | #7a736c | — |
| meta.decorator, punctuation.decorator, entity.name.function.decorator, storage.type.annotation, meta.annotation | #c8804a | italic |
| entity.name.tag | #c8804a | — |
| entity.other.attribute-name | #d4a87a | italic |
| string.quoted.double.html, string.quoted.single.html | #98b060 | — |
| meta.tag.sgml.doctype | #6b6460 | italic |
| entity.name.tag.css | #c8804a | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #d4a87a | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #80a898 | italic |
| support.type.property-name.css, support.type.property-name.media.css | #b8a878 | — |
| support.constant.property-value.css | #98b060 | — |
| support.constant.color.css, constant.other.color.rgb-value.hex.css | #c8a060 | — |
| support.constant.font-name.css | #98b060 | — |
| constant.numeric.css, keyword.other.unit.css | #c8a060 | — |
| variable.css, variable.other.less, variable.scss | #80a898 | — |
| keyword.control.at-rule.css, keyword.control.at-rule.media.css | #c8804a | italic |
| support.type.property-name.json | #d4a87a | — |
| constant.language.json | #7ab870 | italic |
| markup.heading, entity.name.section.markdown | #c8804a | bold |
| punctuation.definition.heading.markdown | #a56b45 | — |
| markup.bold | #d4cbbf | bold |
| markup.italic | #cec6bc | italic |
| markup.inline.raw, markup.inline.raw.markdown | #98b060 | — |
| markup.fenced_code.block, markup.raw.block.markdown, markup.raw.block.fenced.markdown | #d8d2ca | — |
| punctuation.definition.fenced.markdown, punctuation.section.code.begin.markdown, punctuation.section.code.end.markdown | #6f8d5c | — |
| fenced_code.block.language, variable.language.fenced.markdown, entity.name.function.language.markdown | #b8c98b | italic |
| string.other.link.title.markdown | #c8804a | — |
| markup.underline.link.markdown, markup.underline.link | #96755a | — |
| punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.link.markdown | #8b7664 | — |
| punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown, markup.list.numbered.markdown, markup.list.unnumbered.markdown | #b06858 | — |
| markup.list.checkbox.markdown, punctuation.definition.task.markdown, keyword.other.task.todo.markdown, keyword.other.task.completed.markdown | #d4a87a | bold |
| markup.quote | #8fa39a | italic |
| punctuation.definition.quote.begin.markdown | #6d877e | — |
| meta.separator.markdown | #4a4540 | — |
| markup.underline.link.image.markdown, meta.link.reference.def.markdown, constant.other.reference.link.markdown | #c6a06d | — |
| markup.table, punctuation.definition.table.markdown | #bba78f | — |
| entity.name.import.go | #98b060 | — |
| support.type.builtin.go | #80a898 | — |
| support.function.builtin.go | #e8c87a | — |
| variable.other.php, variable.other.global.php | #cec6bc | — |
| constant.language.php | #b06858 | italic |
| markup.inserted | #7ab870 | — |
| markup.deleted | #c8804a | — |
| markup.changed | #d4a87a | — |
| invalid, invalid.illegal | #c8604a | underline |
| invalid.deprecated | #6b6460 | strikethrough |