Skip to main content
CodingTheme

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#2F333D
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#6699CC
  • activityBarBadge.foreground#F8FAFD
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#282c35
  • editor.findMatchHighlightBackground#314365
  • editor.lineHighlightBackground#383E4A
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorCursor.background#b6bcc4
  • editorCursor.foreground#ffffff
  • editorError.foreground#E15A60
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#181A1F
  • editorGroupHeader.tabsBackground#1c1f26
  • editorGroupHeader.tabsBorder#282c35
  • editorGutter.background#282c35
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#21252B
  • gitDecoration.conflictingResourceForeground#E15A60
  • gitDecoration.deletedResourceForeground#E15A60
  • gitDecoration.ignoredResourceForeground#64727f
  • gitDecoration.modifiedResourceForeground#6699CC
  • gitDecoration.untrackedResourceForeground#99C794
  • input.background#1d1f23
  • list.activeSelectionBackground#343d46
  • list.activeSelectionForeground#dfe1e8
  • list.focusBackground#343d46
  • list.focusForeground#dfe1e8
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#232830
  • list.hoverForeground#c0c5cd
  • list.inactiveSelectionBackground#343d46
  • list.inactiveSelectionForeground#dfe1e8
  • panel.background#232830
  • panel.border#232830
  • peekViewEditor.matchHighlightBackground#29244b
  • scrollbar.shadow#282c35
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#282c35
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#232830
  • sideBar.border#232830
  • sideBar.foreground#64727f
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.foreground#c0c5cd
  • statusBar.background#21252B
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#2b303b
  • tab.border#1c1f26
  • tab.inactiveBackground#1c1f26
  • terminal.ansiBlack#7F7F7F
  • terminal.ansiBlue#6699CC
  • terminal.ansiBrightBlack#7F7F7F
  • terminal.ansiBrightBlue#6699CC
  • terminal.ansiBrightCyan#5FB3B3
  • terminal.ansiBrightGreen#99C794
  • terminal.ansiBrightMagenta#C594C5
  • terminal.ansiBrightRed#E15A60
  • terminal.ansiBrightWhite#D4D4D4
  • terminal.ansiBrightYellow#FAC863
  • terminal.ansiCyan#5FB3B3
  • terminal.ansiGreen#99C794
  • terminal.ansiMagenta#C594C5
  • terminal.ansiRed#E15A60
  • terminal.ansiWhite#D4D4D4
  • terminal.ansiYellow#FAC863
  • titleBar.activeBackground#1c1f26
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#1c1f26
  • titleBar.inactiveForeground#6B717D
  • widget.shadow#282c35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#D4D4D4
comment, punctuation.definition.comment#7F7F7Fitalic
variable#D4D4D4
keyword, storage.type, storage.modifier#C594C5
keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#5FB3B3
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#EB606B
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#6699CC
support.other.variable, string.other.link#F2777A
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#F99157
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#99C794
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#FAC863
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#E15A60
variable.language#E15A60italic
entity.name.method.js#D8DEE9
meta.class-method.js entity.name.function.js, variable.function.constructor#D8DEE9
entity.other.attribute-name#BB80B3
markup.inserted#99C794
markup.deleted#E15A60
markup.changed#BB80B3
string.regexp#5FB3B3
constant.character.escape#5FB3B3
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#AB7967
entity.name.filename.find-in-files#99C794
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6699CCitalic
source.js constant.other.object.key.js string.unquoted.label.js#E15A60italic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
source.js entity.other.attribute-name.jsitalic
text.html.basic entity.other.attribute-name.htmlitalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Oceanic Next Bimbo by Ergenekon Yigit - VS Code Theme