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#c4d8ee
  • activityBar.border#b0cce4
  • activityBar.foreground#0c1d45
  • activityBar.inactiveForeground#437c9099
  • activityBarBadge.background#0c1d45
  • activityBarBadge.foreground#ffffff
  • badge.background#437c90cc
  • badge.foreground#ffffff
  • debugToolBar.background#eef4fb
  • dropdown.background#eef4fb
  • editor.background#f0f4fb
  • editor.foreground#0c1d45
  • editor.inactiveSelectionBackground#d0dcea
  • editor.lineHighlightBackground#dce8f566
  • editor.selectionBackground#b8d4ee
  • editor.selectionHighlightBackground#437c9026
  • editorCursor.foreground#0c1d45
  • editorGroup.border#c4d8ee
  • editorGroup.dropBackground#437c9033
  • editorGroupHeader.tabsBackground#dce8f5
  • editorHoverWidget.background#eef4fb
  • editorHoverWidget.border#0c1d4530
  • editorIndentGuide.activeBackground#999999
  • editorIndentGuide.background#cccccc
  • editorLineNumber.activeForeground#437c90
  • editorWhitespace.foreground#c4d8ee
  • editorWidget.background#eef4fb
  • errorForeground#a1173c
  • focusBorder#437c90
  • input.background#ffffff
  • input.placeholderForeground#999999
  • list.activeSelectionBackground#b8d4ee
  • list.dropBackground#dce8f5
  • list.focusBackground#b8d4ee
  • list.highlightForeground#437c90
  • list.hoverBackground#e4eef8
  • list.inactiveSelectionBackground#ccdded
  • menu.background#ffffff
  • menu.foreground#0c1d45
  • minimap.selectionHighlight#b8d4ee
  • peekViewResult.background#eef4fb
  • pickerGroup.foreground#437c90
  • progressBar.background#437c90
  • settings.numberInputBackground#ffffff
  • settings.textInputBackground#ffffff
  • sideBar.background#dce8f5
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#0c1d4520
  • sideBarTitle.foreground#0c1d45
  • statusBar.background#0c1d45
  • statusBar.debuggingBackground#0c1d45
  • statusBar.noFolderBackground#0c1d45
  • statusBarItem.remoteBackground#0e639c
  • statusBarItem.remoteForeground#ffffff
  • tab.inactiveBackground#cddeed
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#1a5c7a
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#437c90
  • terminal.ansiBrightCyan#267f99
  • terminal.ansiBrightGreen#3a7a5a
  • terminal.ansiBrightMagenta#7a3d8a
  • terminal.ansiBrightRed#a0001a
  • terminal.ansiBrightWhite#333333
  • terminal.ansiBrightYellow#9a7520
  • terminal.ansiCyan#267f99
  • terminal.ansiGreen#3a7a5a
  • terminal.ansiMagenta#437c90
  • terminal.ansiRed#9a7520
  • terminal.ansiWhite#555555
  • terminal.ansiYellow#9a7520
  • titleBar.activeBackground#dce8f5
  • titleBar.activeForeground#0c1d45
  • titleBar.border#b0cce4
  • titleBar.inactiveBackground#e8f0fb
  • titleBar.inactiveForeground#0c1d4599

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#0c1d45
emphasisitalic
strongbold
header#000080
comment#1f5c3d
constant.language#0d3d54
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#066040
constant.regexp#646695
entity.name.tag#135f78
entity.name.tag.css#6e5010
entity.other.attribute-name#000e50
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#6e5010
invalid#800010
markup.underlineunderline
markup.bold#0d3d54bold
markup.heading#0d3d54bold
markup.italicitalic
markup.inserted#1f5c3d
markup.deleted#7a3010
markup.changed#0d3d54
punctuation.definition.quote.begin.markdown#1f5c3d
punctuation.definition.list.begin.markdown#1a5c7a
markup.inline.raw#7a3010
punctuation.definition.tag#666666
meta.preprocessor, entity.name.function.preprocessor#0d3d54
meta.preprocessor.string#7a3010
meta.preprocessor.numeric#066040
meta.structure.dictionary.key.python#000e50
meta.diff.header#0d3d54
storage#1a5c7a
storage.type#1a5c7a
storage.modifier, keyword.operator.noexcept#1a5c7a
string, entity.name.operator.custom-literal.string, meta.embedded.assembly#7a3010
string.tag#7a3010
string.value#7a3010
string.regexp#600010
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#1a5c7a
meta.template.expression#0c1d45
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#000e50
keyword#1a5c7a
keyword.control#1a5c7a
keyword.operator#0c1d45
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#1a5c7a
keyword.other.unit#066040
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#1a5c7a
support.function.git-rebase#000e50
constant.sha.git-rebase#066040
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#0c1d45
variable.language#1a5c7a
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#6e5010
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#135f78
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#5c1e70
variable, meta.definition.variable.name, support.variable, entity.name.variable#000e50
variable.other.constant, variable.other.enummember#135f78
meta.object-literal.key#000e50
comment#1f5c3d
keyword.control#0d3d54
keyword.operator.class, keyword.operator, constant.other, source.php.embedded.line#0c1d45
variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag, markup.deleted.git_gutter#6e5010
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit#534000
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution, support.type, support.class#135f78
string, constant.other.symbol, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter#1a6650
keyword.operator, constant.other.color#135f78
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level, markup.changed.git_gutter#0a3d5a
keyword, storage, storage.type, entity.name.tag.css#1a5c7a
invalid#800010
meta.separator#0c1d45
invalid.deprecated#6e5010
markup.quote#534000
markup.list#1a5c7a
markup.bold, markup.italic#534000
markup.inline.raw#6e5010
token.info-token#1a5c7a
token.warn-token#6e5010
token.error-token#800010
token.debug-token#5c1e70
SECOTRON Color Theme by SECOTRON - VS Code Theme