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#ededf5
  • activityBar.foreground#705697
  • activityBarBadge.background#705697
  • badge.background#705697aa
  • button.background#705697
  • dropdown.background#f5f5f5
  • editor.background#f5f5f5
  • editor.findMatchBackground#bf9cac
  • editor.findMatchHighlightBackground#edc9d899
  • editor.lineHighlightBackground#e4f6d4
  • editor.selectionBackground#c9d0d9
  • editorBracketHighlight.foreground1#daa520
  • editorBracketHighlight.foreground2#da70d6
  • editorBracketHighlight.foreground3#6459ed
  • editorCursor.foreground#54494b
  • editorGroup.dropBackground#c9d0d988
  • editorIndentGuide.activeBackground1#777777b0
  • editorIndentGuide.background1#aaaaaa60
  • editorLineNumber.activeForeground#9769dc
  • editorLineNumber.foreground#6d705b
  • editorWhitespace.foreground#aaaaaa
  • errorForeground#f1897f
  • focusBorder#9769dc
  • inputOption.activeBorder#adafb7
  • inputValidation.errorBackground#ffeaea
  • inputValidation.errorBorder#f1897f
  • inputValidation.infoBackground#f2fcff
  • inputValidation.infoBorder#4ec1e5
  • inputValidation.warningBackground#fffee2
  • inputValidation.warningBorder#ffe055
  • list.activeSelectionBackground#c4d9b1
  • list.activeSelectionForeground#6c6c6c
  • list.highlightForeground#9769dc
  • list.hoverBackground#e0e0e0
  • list.inactiveSelectionBackground#d3dbcd
  • minimap.selectionHighlight#c9d0d9
  • panel.background#f5f5f5
  • peekView.border#705697
  • peekViewEditor.background#f2f8fc
  • peekViewEditor.matchHighlightBackground#c2dfe3
  • peekViewResult.background#f2f8fc
  • peekViewResult.matchHighlightBackground#93c6d6
  • peekViewTitle.background#f2f8fc
  • pickerGroup.border#749351
  • pickerGroup.foreground#a6b39b
  • ports.iconRunningProcessForeground#749351
  • progressBar.background#705697
  • quickInputList.focusBackground#cadeb9
  • selection.background#c9d0d9
  • sideBar.background#f2f2f2
  • sideBarSectionHeader.background#ede8ef
  • statusBar.background#705697
  • statusBar.debuggingBackground#705697
  • statusBar.noFolderBackground#705697
  • statusBarItem.remoteBackground#4e3c69
  • tab.lastPinnedBorder#c9d0d9
  • titleBar.activeBackground#c4b7d7
  • walkThrough.embeddedEditorBackground#00000014
  • welcomePage.tileBackground#f0f0f7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
storage.type, support.type, entity.name.type, keyword.other.type.php, source keyword.type.cs, keyword.other.class.cs, keyword.control.type.js, keyword.control.type.jsx, keyword.control.type.ts, keyword.control.type.tsx, keyword.operator.optional.tsx, keyword.operator.optional.ts, keyword.operator.optional.jsx, keyword.operator.optional.js, storage.type.function.arrow, keyword.other.enum.cs, keyword.type, meta.encoding, keyword.other.suffix.literal.user-defined.string, keyword.control.satisfies.js, keyword.control.satisfies.ts, keyword.control.satisfies.jsx, keyword.control.satisfies.tsx#9ed44cbold
support.type.property-name.json, string.quoted, string.quoted.docstring.single.python, string.quoted.docstring.multi.python, string.template.js, string.template.ts, string.template.jsx, string.template.tsx, string.regexp.ts, string.regexp.js#98623c
constant.numeric#e95295
comment, comment.block.documentation.js, punctuation.definition.comment.js, punctuation.definition.comment.ts, punctuation.definition.comment.tsx, comment.block.documentation.ts, comment.block.documentation, punctuation.definition.comment, punctuation.definition.comment.begin.documentation.cpp, punctuation.definition.comment.end.documentation.cpp, variable.other.link.underline.jsdoc#b3ada0
constant.language.true.cpp, constant.language.false.cpp, constant.language.NULL.cpp, constant.language.nullptr.cpp, constant.language.python, constant.language.boolean.true.js, constant.language.boolean.false.js, constant.language.null.js, constant.language.undefined.js, constant.language.matlab, constant.language.null.ts, constant.language.undefined.ts, constant.language.boolean.false.ts, constant.language.boolean.true.ts, constant.language.boolean.false.tsx, constant.language.boolean.true.tsx, constant.language.null.tsx, constant.language.undefined.tsx, constant.language.json, constant.language.php, constant.language.null.cs, constant.language.true.cs, constant.language.false.cs, constant.language.c, constant.language#c5c56abold
entity.name.type.enum.cpp, storage.type.enum.cpp, storage.type.enum.declare.cpp, entity.name.type.enum#e198b4bold
entity.name.variable.enum-member#eb9b6f
entity.name.type.interface#a7b446bold
entity.name.label.ts#028760bold
source#333333
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#f6ad49italic
entity.name.tag#ac88ff
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#7fb80e
text.html.derivative, meta.jsx.children#6b6f59
text.html.markdown#333333
keyword.control.at-rule.keyframes.css, keyword.control.at-rule.keyframes.scss, keyword.control.at-rule.fontface.css, keyword.control.at-rule.fontface.scss, keyword.control.at-rule.media.css, keyword.control.at-rule.media.scss#cca6bfbold
entity.name.function.operator, entity.name.operator.cpp, keyword.other.new.cs, keyword.control.as.ts, keyword.control.as.tsx, keyword.control.as.js, keyword.control.as.jsx, storage.modifier.reference.cpp, storage.modifier.pointer.cpp, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.relational, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.type, keyword.operator.ternary, keyword.operator.spread, keyword.operator.increment, keyword.operator.decrement, keyword.operator.bitwise, keyword.operator.wordlike, keyword.operator.sizeof.cpp, support.function.magic.python, keyword.operator.rest.ts, keyword.operator.rest.js, keyword.operator.gdscript, keyword.operator.gdshader#a59acabold
keyword.other.using.directive.cpp, keyword.other.typedef.cpp, keyword.control.conditional, keyword.control.flow, keyword.control.rust, keyword.control.trycatch, keyword.control.switch, keyword.control.case, keyword.control.loop, keyword.control.default, keyword.control.if, keyword.control.else, keyword.control.for, keyword.control.while, keyword.control.break.cpp, keyword.control.continue.cpp, keyword.control.do.cpp, keyword.control.return, keyword.control.throw, keyword.control.directive, keyword.other.verilog, keyword.other.important, keyword.control.c, keyword.language.gdscript, keyword.control.gdshader#bc64a4bold
variable, support.variable, meta.method.body.java, meta.method-call.java, meta.object-literal.key.ts, constant.other.caps.rust, entity.name.variable.local#f39800
variable.language.self.rust#a69425
variable.other.jsdoc, entity.name.variable.parameter.cs, variable.parameter.function-call.python#e0a37e
meta.object-literal.key#d9a62e
constant.character.escape, constant.character.numeric.regexp, punctuation.definition.template-expression.begin.js, punctuation.definition.string.template.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, constant.character.format.placeholder.other.python#92b5a9
support.type.property-name.css, support.type.vendored.property-name.css#ff69b4
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#00a2ed
meta.property-value.css, meta.property-value.scss#a2d7dd
entity.name.tag.cssbold
entity.other.attribute-name.class.css#f69c9fbold
support.constant.color.w3c-extended-color-name.css, support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.hex.css#e6b422
entity.other.attribute-name.pseudo-class.css#cca6bfbold
punctuation.definition.entity.css, punctuation.definition.constant.css#e198b4
entity.other.attribute-name.id.css, punctuation.definition.entity.css#e95295bold
entity.name.tag.wildcard.cssbold
entity.other.keyframe-offset.percentage.css#eb9b6fbold
source.python#f39800
meta.function-call.python#38a1db
meta.item-access.python#f58220
entity.name.type.class.python#50a06ebold
entity.other.inherited-class#26610Fbold
meta.item-access.arguments.python#fab27b
storage.type.function.python, keyword.other.operator.overload.cpp, storage.type.function.ts, storage.type.function.js, keyword.other.fn.rust, storage.type.function.tsx, storage.type.function.ts, storage.type.function.jsx, storage.type.function.js, keyword.operator.arrow.cs, keyword.generator.asterisk.ts#0094c8bold
storage.type.function.lambda.python#00a497bold
constant.other.caps.python#c5c56a
keyword.control.directive.include.cpp, keyword.other.using.cs, keyword.control.import, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.from.js, keyword.control.from.jsx, keyword.control.at-rule.import.scss, keyword.control.at-rule.import.css, keyword.other.directive.using.cs#c4a3bfbold
meta.export.ts, constant.language.import-export-all.js#c4a3bf
string.quoted.double.include.cpp, string.quoted.other.lt-gt.include.cpp#c4a3bf
punctuation.definition.directive.cpp#9790a4
entity.name.function, keyword.operator.typeid.cpp, support.function.builtin.python, support.function, storage.type.accessor.get, storage.type.accessor.set, keyword.other.get.cs, keyword.other.set.cs#2ca9e1
entity.name.function.constructor.cpp, entity.name.function.definition.special.constructor.cpp, keyword.other.delegate.cs#67a70cbold
storage.type.namespace.directive.cpp, keyword.other.namespace.cs#98d98ebold
entity.name.namespace, entity.name.type.namespace.cs#007bbbbold
keyword.operator.cast#84a2d4
storage.modifier.cpp, storage.modifier.specifier.const.cpp, storage.modifier.specifier.volatile.cpp, storage.modifier.specifier.restrict.cpp, storage.modifier.specifier.static.cpp, storage.modifier.java, storage.modifier.ts, storage.modifier.specifier.functional.pre-parameters.friend.cpp, storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.protected.cpp, storage.type.modifier.access.control.private.cpp, storage.type.modifier.access.public.cpp, storage.type.modifier.access.protected.cpp, storage.type.modifier.access.private.cpp, storage.modifier.async.js, storage.modifier.async.ts, storage.modifier.inline.cpp, storage.modifier.specifier.functional.pre-parameters.inline.cpp, storage.modifier.mut.rust, keyword.control.export.ts, keyword.control.export.js, keyword.control.export.jsx, keyword.control.export.tsx, keyword.control.default.ts, keyword.control.default.js, keyword.control.default.jsx, keyword.control.default.tsx, storage.modifier.static.cpp, storage.modifier.specifier.functional.post-parameters.const.cpp, storage.modifier.virtual.cpp, storage.modifier.specifier.functional.pre-parameters.constexpr.cpp, storage.modifier.friend.cpp, storage.modifier.specifier.functional.post-parameters.override.cpp, storage.modifier.specifier.functional.post-parameters.const, storage.modifier.specifier.extern.cpp, storage.modifier.extern.cpp, storage.modifier.specifier.functional.pre-parameters.virtual.cpp, storage.modifier.const.cpp, storage.modifier.specifier.functional.pre-parameters.explicit.cpp, storage.type.function.async.python, storage.type.extern.cpp, storage.modifier.declaration.python, storage.modifier.php, storage.modifier.cs, storage.modifier#68be8dbold
storage.type.struct.cpp, storage.type.struct.declare.cpp#82ae46bold
entity.name.function.preprocessor#c5c56abold
meta.block.extern.cpp#9ea1a3
constant.language#b79b5bbold
source.vba#3e62ad
source.asm#5d5d74
constant.language.register.general, variable.register.lc3asm#ff9740
constant.language.register.segment#ffb02a
support.other.lc3asm#8b2f45bold
variable.language.this, variable.language.special.self.python, variable.language.super.ts, variable.language.super.cpp, keyword.other.this.cs, keyword.other.super.cs#cf747b
punctuation.separator, punctuation.terminator, punctuation.definition, punctuation.accessor, punctuation.section, keyword.operator.type.annotation.tsx, keyword.operator.type.annotation.ts, keyword.operator.type.annotation.jsx, keyword.operator.type.annotation.js, meta.field.declaration, meta.type.annotation, punctuation.destructuring, meta.parameter.object-binding-pattern, constant.other.ellipsis.python, punctuation.definition.string.begin, punctuation.definition.string.end#777777
variable.other.property.cpp, entity.name.variable.field, entity.name.variable.property, variable.other.object.property, meta.attribute.python#d9a62e
entity.other.inherited-class.js, entity.other.inherited-class.ts, entity.name.type.class, support.class#67a70cbold
entity.name.scope-resolution#007bbbbold
entity.name.type.module.ts#00a3afbold
keyword.control.anchor.regexp#4c6473bold
keyword.operator.or.regexp, keyword.operator.quantifier.regexp, keyword.operator.negation.regexp#a59acabold
constant.other.character-class.regexp#a69425
meta.group.regexp#98623c
constant.other.character-class.range.regexp#b78161
string.regexp.ts keyword.other.ts#9ed44cbold
meta.function.matlab, meta.function.matlab *#00a497
keyword.other.unit.hexadecimal, keyword.other.unit.binary, keyword.other.unit.octal, meta.encoding.cpp#3d6edabold
keyword.other.unit#3967c4bold
source.cpp#777777
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.strikethroughstrikethrough
markup.error#660000
markup.inserted#000000
meta.link#4B69C6
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B69C6
markup.bold, markup.italic#448C27
markup.inline.raw#9C5D27
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file, punctuation.definition.from-file.diff#4B69C6
meta.diff.header.to-file, punctuation.definition.to-file.diff#4B69C6
markup.deleted.diff#C73D20
markup.changed.diff#9C5D27
markup.inserted.diff#448C27
Theme Cesno by Cesno - VS Code Theme