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.foreground#909488
  • activityBarBadge.background#528BFF
  • activityBarBadge.foreground#D7DAE0
  • badge.background#007fff
  • button.background#007fff
  • button.hoverBackground#229bd3
  • debugIcon.pauseForeground#007fff
  • debugIcon.restartForeground#24bfa5
  • debugIcon.stepIntoForeground#ffd700
  • debugIcon.stepOutForeground#ffff00
  • debugIcon.stopForeground#FF6103
  • debugToolBar.background#020202
  • editor.background#202020
  • editor.selectionBackground#2C313A
  • editorCursor.foreground#528BFF
  • editorHoverWidget.background#36393f
  • editorHoverWidget.border#3D59AB
  • editorWidget.border#00b294
  • extensionButton.prominentBackground#00C957
  • extensionButton.prominentHoverBackground#00FF7F
  • list.activeSelectionBackground#202020
  • list.focusBackground#161616
  • list.inactiveSelectionBackground#202020
  • menu.background#202020
  • menu.border#000
  • menu.foreground#c0c0c0
  • menu.selectionBackground#2C313A
  • menu.separatorBackground#000
  • menubar.selectionBackground#292421
  • panel.border#008080
  • panelTitle.activeBorder#8470FF
  • panelTitle.activeForeground#00C78C
  • panelTitle.inactiveForeground#ff8d70
  • progressBar.background#8470FF
  • statusBar.background#4b4b4b
  • statusBar.debuggingBackground#483D8B
  • statusBar.noFolderBackground#3D59AB
  • statusBarItem.activeBackground#292421
  • statusBarItem.hoverBackground#292421
  • statusBarItem.prominentBackground#292421
  • tab.activeBackground#202020
  • tab.activeBorderTop#24bfa5
  • tab.border#181A1F
  • tab.hoverBackground#292421
  • tab.hoverBorder#8470FF
  • tab.inactiveBackground#292421
  • widget.shadow#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.definition.keyword, punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs, punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.definition.class.begin.bracket.curly.php, punctuation.definition.class.end.bracket.curly.php, punctuation.definition.binding-pattern.object#FF9912bold
punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.block, invalid.illegal.expected-dictionary-separator.json, punctuation.section.supports.begin.bracket.curly.css, punctuation.section.supports.end.bracket.curly.css, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.parenthesis.open.cs, punctuation.parenthesis.close.cs, punctuation.definition.begin.bracket.curly, punctuation.definition.end.bracket.curly#da70d6bold
punctuation.terminator.statement, punctuation.separator.comma.js, punctuation.separator.parameter, punctuation.definition.block.tag.jsdoc, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.terminator.rule, punctuation.separator.list.comma.css, punctuation.separator.key-value.html, keyword.operator.assignment.dart, punctuation.terminator.dart, punctuation.comma.dart, punctuation.separator.element.python, invalid.deprecated.semicolon.python, punctuation.definition.decorator.python, punctuation.definition.parameters.begin.python, punctuation.decorator.js.jsx, punctuation.definition.heading.markdown, markup.heading.setext.1.markdown, fenced_code.block.language.markdown, punctuation.separator.delimiter.php, punctuation.terminator.expression.php, punctuation.terminator.java, punctuation.separator.delimiter.java, punctuation.separator.parameters.python, punctuation.separator.comma.cs#daa520bold
punctuation.definition.italic.markdown, markup.italic.markdown, punctuation.definition.markdown#f88379italic
string.other.link.description.markdown#ff4500italic
punctuation.definition.bold.markdown, markup.bold.markdown, punctuation.definition.constant#ff9933bold
punctuation.definition.raw.markdown, markup.inline.raw.string.markdown#d2691e
string.other.link.title.markdown#F08080FF
keyword.other.important.css, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.separator.colon.python, punctuation.section.function.begin.python, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, punctuation.definition.begin.bracket.round.go, punctuation.definition.end.bracket.round.go, punctuation.section.method.begin.bracket.curly.java, punctuation.section.method.end.bracket.curly.java, punctuation.definition.quote.begin.markdown, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, keyword.operator.class.php, punctuation.section.media.begin.bracket.curly, punctuation.section.media.end.bracket.curly, punctuation.definition.metadata.markdown, keyword.operator.rest#007fffbold
markup.underline.link.image.markdown, markup.underline.link.markdown#409efb
keyword.operator.assignment, keyword.operator.comparison, meta.brace.round, keyword.operator.logical.js, punctuation.separator.label.js, keyword.operator.increment, punctuation.separator.dictionary.key-value.json, punctuation.separator.key-value, keyword.operator.ternary.dart, keyword.operator.closure.dart, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.section.class.begin.python, keyword.operator.python, keyword.operator.type.annotation.ts, keyword.operator.type.ts, punctuation.definition.variable, keyword.operator.bitwise, punctuation.definition.section.case-statement, keyword.operator.combinator, meta.type_params.rust, keyword.operator.arrow.cs#0892d0bold
meta.method.body.java#ff9933
variable.parameter.dart, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js#cb4154italic
punctuation.definition.string.begin.json, punctuation.definition.string.end.json#FF6103bold
meta.brace.square, storage.type.function.arrow, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.bracket.square.java, punctuation.section.array.begin.php, punctuation.section.array.end.php, keyword.operator.bitwise.shift, punctuation.definition.entity.begin.bracket.square, punctuation.definition.entity.end.bracket.square, punctuation.squarebracket.open.cs, punctuation.squarebracket.close.cs#00ffffbold
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, punctuation.definition.list.begin.markdown#FF7F50bold
keyword.operator.ternary, constant.language.import-export-all, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff4500bold
punctuation.accessor, keyword.operator.relational, keyword.operator.arithmetic, punctuation.definition.entity.css, punctuation.dot.dart, punctuation.separator.period.python, punctuation.other.period.go#00C957bold
keyword.other.DML.sql#ee6767bold
source.sql#8470FF
keyword.other.var.cs#FF4500italic
support.function.security.sql#817f7f
constant.numeric.decimal, constant.numeric.json.comments, constant.numeric, constant.numeric.dec.python, constant.numeric.float.python, constant.numeric.integer.go, constant.numeric.floating-point.go, entity.other.keyframe-offset.percentage, constant.other.rgb-value.css, constant.numeric.integer.ruby#9e9e9e
meta.delimiter.decimal.period.js, keyword.other.unit.s.css, keyword.other.unit.px.css, keyword.other.unit.ms.css#9e9e9eitalic bold
punctuation.definition.comment, comment.line.double-slash.dart#696f5e
comment.line.double-slash, comment.line.double-dash.sql, comment.line.number-sign.python, comment.line.scss, comment.block, comment.line.number-sign.ruby, comment.block.documentation.js#787c70italic
storage.type.class.jsdoc#757575italic
variable.other.jsdoc#ff9933italic
entity.name.type.instance.jsdoc#6495EDitalic
constant.language, constant.language.boolean.true#00C957italic
constant.language.boolean.false, variable.other.less#00b294italic
keyword.control.anchor.regexp#e32636
punctuation.definition.group.regexp#faa61a
keyword.operator.or.regexp, constant.other.character-class.set.regexp#0892d0
punctuation.definition.character-class.regexp#00ffff
constant.other.character-class.range.regexp#9e9e9e
constant.character.escape.backslash.regexp#24bfa5
meta.group.regexp#8470FF
keyword.operator.quantifier.regexp#ff4500
string.regexp.js#ED9121
string.interpolated.double.dart, string.interpolated.single.dart#FF9912
source.json meta.structure.dictionary.json support.type.property-name.json#f14856
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, variable.css, variable.language.arguments.js, support.variable.object.node.js#60a7aaitalic
string.quoted.double.json#e6a666
string.quoted.double.html, string.quoted.single.html#9180ff
string.unquoted.html#ff9933italic
text.html.derivative#b6b3b0italic
storage.type.function#8470FFitalic
keyword.operator.new, keyword.other.new#00C957
variable.parameter, keyword.control.from#daa520italic
support.function#0892d0italic
string.quoted.double, string.quoted.single#b9b7b7italic
entity.name.function, source.python#fd7937italic
keyword.control.flow#e9485ditalic
variable.other.constant, keyword.operator.expression.typeof.js#379ffbitalic
variable.other.readwrite, entity.name.type#a598ffitalic
variable.other.property, meta.function-call.generic.python#00C78Citalic
variable.other.object.property, keyword.control.trycatch, meta.function-call.arguments.python#6495EDFFitalic
variable.other.object, keyword.type.go#DA70D6FFitalic
variable.language.this, keyword.struct.go#00ffffitalic
keyword.control.import, storage.modifier, keyword.import.go, keyword.other.import.dart#e32636italic
keyword.control.as, support.type.python, entity.name.import.go#daa520italic
keyword.control.conditional, keyword.function.go, keyword.control.java, keyword.control.dart#ff4500italic
storage.type, keyword.interface.go#20B2AAFFitalic
keyword.operator.expression.void#4d4dffbold
support.variable.property#BDFCC9italic
keyword.control.loop#ff4500italic
keyword.control.switch, keyword.control.go#daa500italic
keyword.control.export#ff2c2citalic
support.type.object.module, keyword.control.default, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, keyword.control.def.ruby#ffce2citalic
meta.object-binding-pattern-variable#fd7139italic
entity.other.attribute-name.class#FF9912italic
support.type.property-name, entity.other.attribute-name, source.ruby#0090c9italic
support.constant.property-value, string.unquoted.attribute-value, variable.other.definition.java#E6A666italic
constant.other.color.rgb-value.hex, support.constant.color.w3c-extended-color-name#9ca19eitalic
support.type.vendored.property-name#ff4500italic
entity.other.attribute-name.pseudo-class#f6dc57italic
meta.property-value#f65c57italic
keyword.control.at-rule.keyframes, keyword.control.at-rule.supports, keyword.control.at-rule.media, keyword.control.at-rule.import.less#FF8C00italic
keyword.operator.logical.and.media#00C957italic
entity.name.tag, meta.at-rule.media.header#00b294italic
variable.scss#a598ffitalic
keyword.other.using.cs, keyword.package.go, keyword.other.fn.rust#FF4500italic
keyword.other.namespace.cs, keyword.other.class.cs#ff8800italic
keyword.type.cs#0892d0italic
entity.name.variable.field.cs, entity.name.variable.property.cs#5F9EA0italic
entity.name.variable.local.cs#4d4dffitalic
keyword.other.get.cs, keyword.other.set.cs#DA70D6italic
support.class.dart, entity.name.variable.parameter.cs, keyword.operator.expression.in.js, keyword.operator.expression.of.js#FF6347italic
entity.name.function.dart, entity.name.function.member#007fff
source.dart#5F9EA0FFitalic
entity.name.package.go#00C957italic
entity.other.inherited-class.js.jsx#007fffitalic
support.type.builtin.ts#FF4500italic
support.type.primitive.ts#FF6347italic

Shiki preview

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

Loading...

SLab Theme by Hasibur Rahman - VS Code Theme