Skip to main content
CodingTheme

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#ffffff
  • activityBar.border#d3d3d3
  • activityBar.foreground#000000
  • editor.background#ffffff
  • editor.findMatchBackground#73ff00
  • editor.findMatchHighlightBackground#ffff00
  • editor.foreground#333333
  • editor.inactiveSelectionBackground#ffffff00
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#ff000000
  • editor.selectionBackground#d3d3d3
  • editor.selectionHighlightBackground#55399600
  • editorBracketMatch.background#00ffff
  • editorBracketMatch.border#00000000
  • editorCursor.background#ffffff
  • editorCursor.foreground#000000
  • editorLineNumber.activeForeground#ff0000
  • editorLineNumber.foreground#a52a2a
  • editorWarning.foreground#ff0000
  • list.activeSelectionBackground#d3d3d3
  • list.activeSelectionForeground#000000
  • panelTitle.activeForeground#000000
  • selection.background#d3d3d3
  • sideBar.background#ffffff
  • sideBar.border#d3d3d3
  • terminal.foreground#000000
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.border#d3d3d3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#0000ff
comment.block.preprocessor#0000ff
comment.documentation, comment.block.documentation#448C27
invalid.illegal#660000
keyword.operator#000000
keyword.operator.assignment.js, keyword.operator.comparison.js, keyword.operator.assignment.compound.js, keyword.operator.relational.js, keyword.operator.arithmetic.js#6a5acd
keyword.control.directive#a020f0
keyword.other.using.directive.cpp#a52a2a
storage.type.namespace.directive.cpp, keyword.other.namespace.directive.cpp#2e8b57
storage.type.struct.cpp#2e8b57bold
entity.name.namespace.cpp#000000
storage.type.built-in.primitive.cpp, storage.type.primitive.cpp, storage.modifier.specifier.const.cpp, keyword.other#2e8b57bold
keyword.control#a52a2abold
meta.body.struct.cpp, entity.name.type.cpp, storage.modifier.pointer.cpp, entity.name.type.parameter.cpp, storage.modifier.reference.cpp, meta.body.function.definition.cpp#000000
entity.name.type.struct.cpp#000000
constant.language#ff00ff
variable, support.variable#000000
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#ff00ff
string#448C27
string.quoted.double.cpp#ff00ff
constant.character.escape#A020F0
string.regexp#4B83CD
constant.other.symbol#AB6526
punctuation#a020f0
punctuation.section.block, punctuation.section.parameters, punctuation.section.arguments, punctuation.terminator.statement.cpp, punctuation.section.parens.end.bracket.round.cpp, punctuation.section.parens.begin.bracket.round.cpp, punctuation.separator.pointer-access.cpp, punctuation.separator.delimiter.comma.cpp, punctuation.definition.begin.bracket.square.array.type.cpp, punctuation.definition.end.bracket.square.array.type.cpp, punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square#000000
punctuation.section.parens.begin.bracket.round.conditional.switch.cpp, punctuation.section.parens.end.bracket.round.conditional.switch.cpp#000000
punctuation.separator.colon.case.cpp#000000
punctuation.definition.string.begin.cpp, punctuation.definition.string.end.cpp, string.quoted.other.lt-gt.include.cpp, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, meta.preprocessor.include.cpp#ff00ff
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#0000ff
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#008b8b
meta.tag.metadata.doctype.html#0000ff
meta.tag.structure, meta.tag.metadata#a52a2abold
meta.attribute.type.html#2e8b57
punctuation.separator.key-value.html#008b8b
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#ff00ff
string.quoted.double.html#ff00ff
meta.attribute.type.html#2e8b57
meta.tag.metadata.doctype.html#0000ff
meta.attribute#2e8b57
entity.name.function.js#6a5acd
meta.attribute.event-handler.click.html, meta.brace.round.js#6a5acd
storage.type.function.js#008b8b
storage.type.js#008b8b
variable.other.readwrite.js#6a5acd
variable.other.object.js#a52a2abold
meta.brace.round.js#000000
string.quoted.double.js#ff00ff
punctuation.accessor.js#6A5ACD
variable.other.property.js#6A5ACD
support.class.builtin.js#2E8B57bold
punctuation.terminator.statement.js#6a5acd
support.variable.property.js#6a5acd
constant.numeric.decimal.js#000000
meta.array.literal.js#008b8b
keyword.operator.new.js#a52a2abold
constant.character.entity, punctuation.definition.entity#2e8b57
text.html.derivative#000000
punctuation.section.property-list.begin.bracket.curly.css#008b8b
punctuation.section.property-list.end.bracket.curly.css#008b8b
punctuation.terminator.rule.css#000000
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#a52a2a
meta.property-name, support.type.property-name#2e8b57bold
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
keyword.other.unit.px.css#ff00ff
punctuation.separator.key-value.css#000000
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#2e8b57
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
storage.modifier.java, storage.type.primitive.java#2e8b57bold
punctuation.section.class.begin.bracket.curly.java, punctuation.section.class.end.bracket.curly.java, punctuation.terminator.java, punctuation.definition.parameters.begin.bracket.round.java, punctuation.definition.parameters.end.bracket.round.java, punctuation.separator.period.java, punctuation.separator.java, punctuation.section.method.end.bracket.curly.java, punctuation.section.method.begin.bracket.curly.java, punctuation.bracket.square.java#000000
punctuation.definition.string.begin.java, punctuation.definition.string.end.java#ff00ff
string.quoted.double.java#ff00ff
keyword.other.import.java#6a5acd
punctuation.definition.variable.php#A52A2Abold
variable.other.php#008B8B
keyword.operator.assignment.php, keyword.operator.comparison.php#A52A2Abold
punctuation.definition.string.begin.php, punctuation.definition.string.end.php#ff00ff
punctuation.terminator.expression.php#000000
string.quoted.double.php, string.quoted.single.php#ff00ff
support.function.construct.output.php#A020F0
support.function.construct.output.php#A020F0
support.function.string.php#008B8B

Shiki preview

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

Loading...

gVim Theme by ichsn - VS Code Theme