Skip to main content
Coding Theme

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#0E181B
  • activityBar.border#E8F0F31F
  • activityBar.foreground#D9E5E8
  • activityBar.inactiveForeground#5C808A
  • activityBarBadge.background#0081CC
  • breadcrumb.foreground#9DB4BB
  • button.background#0081CC
  • button.foreground#EBFFFF
  • debugToolBar.background#000000
  • debugToolBar.border#E8F0F31F
  • diffEditor.insertedTextBackground#00DB8B55
  • diffEditor.removedTextBackground#FF006A55
  • editor.background#0E181B
  • editor.findMatchBackground#0081CCff
  • editor.foreground#F8FBFC
  • editor.selectionBackground#00C2FF33
  • editorError.foreground#FF1E00
  • editorGroupHeader.border#E8F0F31F
  • editorGroupHeader.tabsBackground#191920
  • editorGutter.addedBackground#66FFDEff
  • editorGutter.deletedBackground#FF1E00
  • editorGutter.modifiedBackground#66E6FFff
  • editorInfo.foreground#0081CC
  • editorLineNumber.activeForeground#5C808Aff
  • editorLineNumber.foreground#5C808A80
  • editorLink.activeForeground#00FFBF
  • editorWarning.foreground#FFFFE5
  • editorWidget.background#000000
  • editorWidget.resizeBorder#00C2FF
  • focusBorder#00C2FF
  • gitDecoration.addedResourceForeground#66FFDEff
  • gitDecoration.conflictingResourceForeground#CC0044
  • gitDecoration.deletedResourceForeground#FF1E00ff
  • gitDecoration.ignoredResourceForeground#F8FBFC50
  • gitDecoration.modifiedResourceForeground#66E6FFff
  • gitDecoration.stageDeletedResourceForeground#FF1E00ff
  • gitDecoration.stageModifiedResourceForeground#66E6FFff
  • gitDecoration.untrackedResourceForeground#66FFDEff
  • input.background#191920
  • input.border#E8F0F31F
  • list.activeSelectionBackground#00A1FF35
  • list.errorForeground#FF1E00
  • list.focusBackground#00A1FF35
  • list.highlightForeground#00C2FFff
  • list.hoverBackground#3F606935
  • list.inactiveSelectionBackground#00A1FF35
  • list.warningForeground#FFFFE5
  • menubar.selectionBackground#3F606950
  • peekView.border#E8F0F31F
  • peekViewTitle.background#0E181B
  • progressBar.background#00C2FF
  • scrollbarSlider.activeBackground#0081CCbb
  • scrollbarSlider.background#5C808A77
  • scrollbarSlider.hoverBackground#0081CCbb
  • selection.background#00C2FF33
  • sideBar.background#0E181B
  • sideBar.border#E8F0F31F
  • sideBarSectionHeader.background#29454C55
  • statusBar.background#0081CC
  • statusBar.debuggingBackground#00DB8B
  • statusBar.debuggingForeground#0E181B
  • statusBar.foreground#D6FEFF
  • statusBar.noFolderBackground#3F6069
  • statusBarItem.errorBackground#CC0044
  • statusBarItem.errorForeground#FFE5F4
  • statusBarItem.warningForeground#FFFFE5
  • tab.border#E8F0F31F
  • tab.inactiveBackground#202028
  • terminal.ansiBlack#0E181Bff
  • terminal.ansiBlue#00C2FFff
  • terminal.ansiBrightBlack#0E181Bff
  • terminal.ansiBrightBlue#00C2FFff
  • terminal.ansiBrightCyan#66E6FFff
  • terminal.ansiBrightGreen#00FFBFff
  • terminal.ansiBrightMagenta#9DB4BBff
  • terminal.ansiBrightRed#FF1E00ff
  • terminal.ansiBrightWhite#ffffffff
  • terminal.ansiBrightYellow#B3F2FFff
  • terminal.ansiCyan#66E6FFff
  • terminal.ansiGreen#00FFBFff
  • terminal.ansiMagenta#9DB4BBff
  • terminal.ansiRed#FF1E00ff
  • terminal.ansiWhite#F8FBFCff
  • terminal.ansiYellow#B3F2FFff
  • terminal.background#0E181Bff
  • textLink.foreground#00A1FF
  • titleBar.activeBackground#0E181B
  • titleBar.border#E8F0F31F
  • titleBar.inactiveBackground#0E181B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
meta.diff.header#000080
comment, punctuation.definition.comment#5C808A
constant.language#FF80BB
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#FF80BB
constant.regexp#FF80BB
entity.name.tag#0081CC
entity.name.tag.css#00C2FF
entity.other.attribute-name#B3F2FF
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#66E6FF
invalid#f44747
markup.underlineunderline
markup.boldbold
markup.heading, punctuation.definition.heading.markdown, source.toml, support.type.property-name.table.toml#00C2FF
markup.italicitalic
markup.inserted#A3FFF0
markup.deleted#ce9178
markup.changed#0081CC
meta.selector#d7ba7d
punctuation.definition.tag#9DB4BB
meta.preprocessor#0081CC
meta.preprocessor.string#FF006A
meta.preprocessor.numeric#A3FFF0
meta.structure.dictionary.key.python#B3F2FF
storage#0081CC
storage.type#0081CC
storage.modifier#0081CC
string#A3FFF0
string.tag#A3FFF0
string.value#A3FFF0
string.regexp#FF006A
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#0081CC
variable.parameter.function.language.special.self#D6FEFFitalic
variable.parameter#B3F2FF
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#F8FBFC
keyword#0081CC
keyword.control#0081CC
keyword.operator#9DB4BB
punctuation#9DB4BB
punctuation.brackets.curly, punctuation.brackets.round, punctuation.section.brackets.begin.js, punctuation.section.brackets.begin.ts, punctuation.section.brackets.end.js, punctuation.section.brackets.end.ts, punctuation.section.block.begin.js, punctuation.section.block.begin.ts, punctuation.section.block.end.js, punctuation.section.block.end.ts, meta.brace.angle.ts, meta.brace.angle.js, meta.brace.round.ts, meta.brace.round.js, meta.brace.square.ts, meta.brace.square.js#9DB4BB
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#0081CC
keyword.other.unit#A3FFF0
support.function.git-rebase#d4d4d4
constant.sha.git-rebase#A3FFF0
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#00A1FF
variable.language.this#0081CC
entity.name.function, support.function, support.constant.handlebars#00C2FF
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#66E6FF
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#66E6FF
keyword.control#0081CC
variable, meta.definition.variable.name, support.variable, tomlTableKey#F8FBFC
meta.object-literal.key, meta.object-literal.key entity.name.function, support.type.property-name.json.comments, support.type.property-name.json#B3F2FF
variable.other.member, variable.other.property, variable.attribute, variable.member, meta.attribute#B3F2FF
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#FF80BB
support.module, entity.name.namespace, support.other.namespace, meta.import, variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, support.variable.ts, support.variable.js#00A1FF
rainx0r-theme by rainx0r - VS Code Theme