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#181819
  • activityBar.border#333333
  • activityBar.foreground#b7b8bb
  • activityBar.inactiveForeground#727272
  • activityBarBadge.background#151515
  • activityBarBadge.foreground#ccced2
  • badge.background#252729
  • badge.foreground#8c999b
  • button.background#333333
  • button.border#333333
  • debugToolBar.background#252729
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#242429
  • dropdown.border#333333
  • dropdown.listBackground#252729
  • editor.background#181819
  • editor.findMatchBackground#a886da00
  • editor.findMatchBorder#e4d6eeDD
  • editor.findMatchHighlightBackground#9a70da4b
  • editor.findMatchHighlightBorder#c182eecc
  • editor.foreground#c7ced6
  • editor.lineHighlightBackground#252729
  • editor.lineHighlightBorder#16161600
  • editor.rangeHighlightBackground#2f203e20
  • editor.selectionBackground#5c55b875
  • editor.selectionHighlightBackground#200e3240
  • editor.symbolHighlightBackground#3a203ebd
  • editor.wordHighlightBackground#4a4a769d
  • editor.wordHighlightBorder#4a4a7690
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorBracketHighlight.foreground1#c7ced6
  • editorBracketHighlight.foreground2#EBCB8B
  • editorBracketHighlight.foreground3#B48EAD
  • editorBracketHighlight.foreground4#D08770
  • editorBracketHighlight.foreground5#A3BE8C
  • editorBracketMatch.background#79797990
  • editorBracketMatch.border#5b6dd400
  • editorCursor.background#0e0e0e
  • editorCursor.foreground#fafafae5
  • editorGroup.border#242424
  • editorGroup.dropBackground#1c1e1f
  • editorGroupHeader.tabsBackground#252729
  • editorGroupHeader.tabsBorder#333333
  • editorGutter.addedBackground#37ca59
  • editorGutter.deletedBackground#e1445c
  • editorGutter.modifiedBackground#0078d4
  • editorHoverWidget.background#222728ee
  • editorHoverWidget.border#333333
  • editorIndentGuide.activeBackground#786b8570
  • editorIndentGuide.background#41434730
  • editorInlayHint.background#22262800
  • editorInlayHint.foreground#444c50
  • editorLineNumber.activeForeground#c7d5e0
  • editorLineNumber.foreground#55585a
  • editorSuggestWidget.background#1c1e1fd0
  • editorSuggestWidget.border#333333
  • editorUnnecessaryCode.border#ffd900
  • editorUnnecessaryCode.opacity#000000aa
  • editorWhitespace.foreground#41454790
  • editorWidget.background#252729
  • editorWidget.resizeBorder#00000000
  • focusBorder#5c4088
  • gitDecoration.addedResourceForeground#37ca59
  • gitDecoration.deletedResourceForeground#e1445c
  • gitDecoration.ignoredResourceForeground#90959b
  • gitDecoration.modifiedResourceForeground#99d7e5
  • gitDecoration.stageDeletedResourceForeground#e1445c
  • gitDecoration.stageModifiedResourceForeground#99d7e5
  • gitDecoration.untrackedResourceForeground#7fe396
  • input.background#252729
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#ad7aff80
  • list.dropBackground#394043
  • list.highlightForeground#ad7aff
  • list.hoverBackground#394043
  • list.inactiveSelectionBackground#404246
  • menu.background#252729
  • menu.foreground#c7ced6
  • minimap.selectionHighlight#878b9180
  • notificationCenter.border#333333
  • panel.background#131414
  • panel.border#333333
  • panelSection.border#252729
  • panelSectionHeader.background#1c1e1f
  • panelTitle.activeBorder#333333
  • panelTitle.activeForeground#c5c5c0
  • panelTitle.inactiveForeground#6b7172
  • peekView.border#4c4b4d
  • peekViewEditor.background#242427
  • peekViewEditor.matchHighlightBackground#33363a
  • peekViewResult.background#282a2c
  • peekViewResult.matchHighlightBackground#33363a
  • peekViewResult.selectionBackground#33363a
  • peekViewTitle.background#282a2c
  • pickerGroup.border#333333
  • pickerGroup.foreground#5e6575
  • ports.iconRunningProcessForeground#ccccc7
  • progressBar.background#75715E
  • quickInputList.focusBackground#ad7aff60
  • scrollbar.shadow#000000aa
  • scrollbarSlider.background#31323890
  • selection.background#83789180
  • settings.checkboxBackground#242429
  • settings.focusedRowBackground#12121360
  • settings.numberInputBackground#242429
  • settings.rowHoverBackground#15151660
  • settings.textInputBackground#242429
  • sideBar.background#181819
  • sideBar.border#333333
  • sideBarSectionHeader.background#181819
  • sideBarSectionHeader.border#333333
  • sideBarSectionHeader.foreground#8c979b
  • sideBarTitle.foreground#8c969b
  • statusBar.background#252729
  • statusBar.border#333333
  • statusBar.debuggingBackground#2d8d68
  • statusBar.debuggingForeground#f5fdff
  • statusBar.foreground#8c8e9b
  • statusBar.noFolderBackground#1c1e1f
  • statusBarItem.remoteBackground#1a506d
  • statusBarItem.remoteForeground#c1e8ff
  • tab.activeBackground#181819
  • tab.activeBorder#181819
  • tab.activeBorderTop#adaeb1
  • tab.hoverBackground#343738
  • tab.inactiveBackground#252729
  • tab.inactiveForeground#ccccc7
  • tab.lastPinnedBorder#393d43
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#B3B42B
  • terminal.background#131414
  • terminal.foreground#d0d3d6
  • titleBar.activeBackground#252729
  • titleBar.inactiveBackground#1e2022
  • tree.inactiveIndentGuidesStroke#3b3b3b
  • tree.indentGuidesStroke#595e61
  • widget.border#333333
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#717a85italic
comment.block.documentation, punctiation.definition.comment, comment.line.double-slash.documentation#90a3aaitalic
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#96b7ff
entity, entity.name#96b7ff
entity.name.function#d29cf6
variable.parameter.function#e1e4e8
entity.name.tag#85e89d
keyword#f97583
storage, storage.type, meta.attribute#f97583
storage.modifier.package, storage.modifier.import, storage.type.java#e1e4e8
string, punctuation.definition.string, string punctuation.section.embedded source#9ecbff
support#96b7ff
meta.property-name#96b7ff
variable.other#e1e4e8
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic
message.error#ff5c6fstrikethrough
string variable#96b7ff
source.regexp, string.regexp#dbedff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#dbedff
string.regexp constant.character.escape#85e89dbold
support.constant#96b7ff
support.variable#96b7ff
meta.module-reference#96b7ff
punctuation.definition.list.begin.markdown#ffab70
markup.heading, markup.heading entity.name#96b7ffbold
markup.quote#85e89d
markup.italic#e1e4e8italic
markup.bold#e1e4e8bold
markup.underlineitalic
markup.strikethroughstrikethrough
markup.inline.raw#96b7ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#96b7ff
meta.separator#96b7ffbold
meta.output#96b7ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link#dbedffunderline
Owokai Themes by fluffyfen - VS Code Theme