Skip to main content
Coding Theme

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.background#252421
  • activityBar.border#383831
  • activityBar.foreground#dcddcb
  • activityBarBadge.background#76480d
  • activityBarBadge.foreground#dcddcb
  • badge.background#252421
  • badge.foreground#969b8c
  • button.background#3e3b2c
  • button.border#2f302c
  • debugToolBar.background#252421
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#252421
  • dropdown.listBackground#252421
  • editor.background#1c1c1b
  • editor.findMatchBackground#00000000
  • editor.findMatchBorder#efefef90
  • editor.findMatchHighlightBackground#d7da8620
  • editor.findMatchHighlightBorder#d9da86aa
  • editor.foldBackground#272727
  • editor.foreground#ebe9d7
  • editor.hoverHighlightBackground#ffc40010
  • editor.lineHighlightBackground#252522
  • editor.rangeHighlightBackground#3c3e2020
  • editor.selectionBackground#337fa380
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#a0956550
  • editor.wordHighlightBackground#76724a10
  • editor.wordHighlightBorder#766e4a90
  • editor.wordHighlightStrongBackground#968c6a20
  • editor.wordHighlightTextBackground#fbff0010
  • editorBracketHighlight.foreground1#ebe9d7
  • editorBracketHighlight.foreground2#EBCB8B
  • editorBracketHighlight.foreground3#B48EAD
  • editorBracketHighlight.foreground4#D08770
  • editorBracketHighlight.foreground5#A3BE8C
  • editorBracketMatch.background#5b73d490
  • editorBracketMatch.border#00000000
  • editorCursor.background#0e0e0e
  • editorCursor.foreground#ebc726dd
  • editorGroup.border#383831
  • editorGroup.dropBackground#43413980
  • editorGroupHeader.tabsBackground#252421
  • editorGroupHeader.tabsBorder#343530
  • editorHoverWidget.background#272822ee
  • editorHoverWidget.border#343530ee
  • editorIndentGuide.activeBackground#57504360
  • editorIndentGuide.background#47454130
  • editorInlayHint.background#bebaa0
  • editorInlayHint.foreground#1c1c1a
  • editorLineNumber.activeForeground#b4aa60
  • editorLineNumber.foreground#444444
  • editorSuggestWidget.background#151616cc
  • editorSuggestWidget.border#75715e30
  • editorUnnecessaryCode.border#ffd900
  • editorUnnecessaryCode.opacity#000000aa
  • editorWhitespace.foreground#46474160
  • editorWidget.background#252421
  • editorWidget.resizeBorder#00000000
  • focusBorder#337fa380
  • input.background#252421
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#337fa380
  • list.dropBackground#414339
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#33332c
  • list.inactiveSelectionBackground#34352c
  • menu.background#252421
  • menu.foreground#ebe9d7
  • minimap.selectionHighlight#878b9180
  • panel.background#161616
  • panel.border#383831
  • panelSection.border#252421
  • panelSectionHeader.background#252421
  • panelTitle.activeBorder#00000000
  • panelTitle.activeForeground#c5c5c0
  • panelTitle.inactiveForeground#75715E
  • peekView.border#524b40
  • peekViewEditor.background#22211e
  • peekViewEditor.matchHighlightBackground#373a33
  • peekViewResult.background#2b2825
  • peekViewResult.matchHighlightBackground#373a33
  • peekViewResult.selectionBackground#414339
  • peekViewTitle.background#252421
  • pickerGroup.foreground#75715E
  • ports.iconRunningProcessForeground#ccccc7
  • progressBar.background#75715E
  • quickInputList.focusBackground#337fa380
  • scrollbar.shadow#000000aa
  • scrollbarSlider.background#33352d90
  • selection.background#8d918780
  • settings.checkboxBackground#232420
  • settings.focusedRowBackground#1B1B1B
  • settings.rowHoverBackground#00000000
  • sideBar.background#1c1c1b
  • sideBar.border#383831
  • sideBar.foreground#dcddcb
  • sideBarSectionHeader.background#1c1c1b
  • sideBarSectionHeader.border#333333
  • sideBarSectionHeader.foreground#969b8c
  • sideBarTitle.foreground#969b8c
  • statusBar.background#252421
  • statusBar.border#383831
  • statusBar.debuggingBackground#adad1c
  • statusBar.debuggingForeground#1c1f1f
  • statusBar.foreground#969b8c
  • statusBar.noFolderBackground#252421
  • statusBarItem.remoteBackground#0b5052
  • tab.activeBackground#1c1c1a
  • tab.activeBorder#1c1c1a
  • tab.activeBorderTop#737062
  • tab.border#00000000
  • tab.hoverBackground#343530
  • tab.inactiveBackground#252421
  • tab.inactiveForeground#ccccc7
  • tab.lastPinnedBorder#414339
  • terminal.ansiBlack#1B1B1B
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83A598
  • terminal.ansiBrightCyan#8EC07C
  • terminal.ansiBrightGreen#B8BB26
  • terminal.ansiBrightMagenta#D3869B
  • terminal.ansiBrightRed#FB4934
  • terminal.ansiBrightWhite#EBDBB2
  • terminal.ansiBrightYellow#FABD2F
  • terminal.ansiCyan#689D6A
  • terminal.ansiGreen#98971A
  • terminal.ansiMagenta#B16286
  • terminal.ansiRed#CC241D
  • terminal.ansiWhite#A89984
  • terminal.ansiYellow#D79921
  • terminal.background#161616
  • terminal.foreground#EBDBB2
  • titleBar.activeBackground#252421
  • titleBar.inactiveBackground#1b1c19
  • widget.border#333333
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#7b785aitalic
comment.block.documentation, comment.line.double-slash.documentation#ad9556italic
string, string.template, punctuation.definition.string#64b358—
constant.numeric#80a9f5—
punctuation.separator.pointer-access, entity.name.function.operator, meta.template.expression, storage.modifier.import, constant.character, variable.language, support.constant, keyword.operator, constant.other, source, text#ebe9d7
keyword, keyword.operator.expression, keyword.operator.logical, keyword.operator.cast, punctuation.accessor.optional#dbad49bold
constant.language#8f9396—
meta.attribute, keyword.storage, storage.modifier, storage.type.class, storage.type.modifier.access#8f9396—
keyword.type, storage.type, entity.other, entity.name.tag, entity.name.type, support.function, constant.other.placeholder, entity.name.scope-resolution, punctuation.definition.interpolation, punctuation.definition.template-expression#8f9396
support, storage.identifier, entity.name.tag.class#8f9396—
meta.property-name, variable.readwrite, entity.other.attribute-name, entity.other.inherited-class, variable.readwrite.other.block#ebe9d7—
entity.name.function.preprocessor, entity.name.other.preprocessor.macro.predefined#ebe9d7bold
support.function, entity.name.function, entity.name.function-call, meta.function-call.generic, entity.name.function.definition#e694b9—
invalid#c00000bold
string.detected-link—underline
meta.diff, meta.diff.header#75715E—
markup.deleted#e06c75—
markup.inserted#98c379—
markup.changed#e5c07b—
constant.numeric.line-number.find-in-files - match#56b6c2A0—
entity.name.filename.find-in-files#e5c07b—
punctuation.accessor, punctuation.separator, punctuation.terminator#ebe9d7—
markup.bold—bold
markup.heading.markdown—bold
markup.block.raw, markup.inline.raw#8f9396—
Owokai Themes by fluffyfen - VS Code Theme