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#32363bb7
  • activityBarBadge.background#e67574
  • badge.foreground#98999b
  • button.background#e67574
  • commandCenter.background#363b40
  • contrastBorder#2a2e32
  • editor.background#363b40
  • editor.findMatchBackground#4d545c
  • editor.findMatchHighlightBackground#4d545c
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#4d545c
  • editor.rangeHighlightBackground#4d545c
  • editor.selectionBackground#4d545c83
  • editor.selectionHighlightBackground#4d545c
  • editorBracketHighlight.foreground1#98999b
  • editorBracketHighlight.foreground2#98999b
  • editorBracketHighlight.foreground3#98999b
  • editorBracketHighlight.foreground4#98999b
  • editorBracketHighlight.foreground5#98999b
  • editorBracketHighlight.foreground6#98999b
  • editorBracketHighlight.unexpectedBracket.foreground#e67574
  • editorGroupHeader.tabsBackground#3c4147b7
  • editorWidget.background#2a2e32
  • focusBorder#88b3d163
  • list.activeSelectionBackground#88b3d163
  • list.focusOutline#88b3d163
  • menu.background#3C4147
  • menu.border#3C4147
  • menu.selectionBackground#282a2c
  • menu.selectionBorder#282a2c
  • menu.separatorBackground#282a2c
  • menubar.selectionBorder#3C4147
  • minimap.background#363b40
  • minimap.foregroundOpacity#3c4147
  • minimap.selectionHighlight#4d545c
  • panel.background#2a2e32
  • peekView.border#363b40
  • peekViewEditor.background#2a2e32
  • peekViewEditor.matchHighlightBackground#4d545c
  • peekViewEditor.matchHighlightBorder#4d545c
  • peekViewResult.background#2a2e32
  • peekViewResult.matchHighlightBackground#3C4147
  • searchEditor.findMatchBackground#2a2e32
  • selection.background#4d545c
  • sideBar.background#363b40
  • sideBar.border#363b40
  • sideBar.dropBackground#595e63
  • sideBarSectionHeader.background#363b40
  • statusBar.background#363b40
  • statusBar.debuggingBackground#82a8ad
  • statusBarItem.activeBackground#627a7c
  • statusBarItem.hoverBackground#627a7c
  • tab.activeBackground#4d545c
  • tab.activeBorder#595e63
  • tab.border#3c4147
  • tab.hoverBackground#595e63
  • tab.inactiveBackground#3c41478f
  • terminal.ansiBrightBlack#3c4147b7
  • terminal.ansiBrightCyan#4cbe9a
  • terminal.ansiBrightWhite#86a0c6
  • terminal.ansiBrightYellow#fde687
  • terminal.ansiCyan#4cbe9a
  • terminal.selectionBackground#3c4147b7
  • terminal.tab.activeBorder#e67574
  • titleBar.activeBackground#363b40
  • window.activeBorder#2a2e32
  • window.inactiveBorder#0e1013

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.rust meta.use#637a99
source.rust keyword.declaration.struct, source.rust keyword.declaration.enum, source.rust keyword.declaration.type, source.rust storage.type, keyword.control.rust, variable.language.super.rust, keyword.operator.macro.dollar.rust#e67574
source.rust keyword.operator.namespace, source.rust entity.name.namespace, source.rust punctuation.semi, source.rust punctuation.brackets.curly, source.rust punctuation.brackets.angle, source.rust punctuation.brackets.round, source.rust keyword.operator.arrow.skinny, source.rust keyword.operator.borrow.and, source.rust keyword.operator.assignment.equal, source.rust punctuation.definition.attribute, source.rust punctuation.brackets.attribute, source.rust keyword.operator.range, source.rust punctuation.brackets.square, source.rust keyword.operator.dereference, source.rust keyword.operator.assignment, keyword.operator.access.dot.rust, keyword.operator.key-value.rust, punctuation.comma.rust, source.rust punctuation.macro.open, source.rust punctuation.macro.close, source.rust meta.function.definition.rust#98999b
source.rust comment, source.rust comment.block, source.rust comment.block.documentation, source.rust comment.line#6c7277
source.rust entity.name.type.struct, source.rust meta.import, source.rust meta.attribute, source.rust entity.name.module#86a0c6
source.rust entity.name.type.enum#90c2c9
source.rust meta.function.call#a1bec2
source.rust entity.name.function, source.rustkeyword.operator.subpattern, entity.name.function.rust, entity.name.type.rust#90b1c9
source.rust keyword.other, source.rust keyword.other.fn, source.rust keyword.operator.logical, source.rust keyword.operator.comparison, source.rust keyword.operator.question, source.rust keyword.operator.math, source.rust variable.language.self, source.rust keyword.control, source.rust keyword.operator.arrow.fat, source.rust storage.modifier.mut, source.rust storage.modifier, source.rust keyword.operator.arithmetic, source.rust meta.macro.rules.rust, entity.name.function.macro.rules.rust#e67574
source.rust meta.macro, sentity.name.function.preprocessor, entity.name.function.macro.rust#90b1c9
source.rust string.quoted.double#4cbe9a
source.rust string.quoted.single.char#cc6646
source.rust entity.name.type.result, source.rust entity.name.type.primitive, source.rust entity.name.type.option, source.rust entity.name.type.numeric#88B3D1
source.rust constant.numeric, source.rust constant.language.bool, source.rust constant.language.boolean#f49e8b
source.rust constant.other.caps#a2bbd8
source.rust entity.name.type.lifetime, source.rust punctuation.definition.lifetime, source.rust entity.name.type.trait, source.rust entity.name.type.declaration, source.rust variable.other.metavariable.specifier.rust#Dca054
variable.other.metavariable.name.rust#d4d4d4
entity.name.tag.html#e67574
string.quoted.double.html#4cbe9a
punctuation.separator.key-value.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#98999b
meta.attribute.crossorigin.html#Dca054
entity.other.attribute-name.html#90c2c9
comment.block.html#6c7277
comment.block.css#6c7277
string.quoted.single.css, string.quoted.double.css, variable.parameter.url.css#4cbe9a
source.css keyword.other.unit#7f909e
source.css constant.numeric, entity.other.keyframe-offset.percentage.css#f49e8b
punctuation.terminator.rule.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.entity.css, punctuation.definition.keyword.css, punctuation.separator.key-value.css, punctuation.separator.list.comma.css, keyword.operator.combinator.css#98999b
entity.name.tag.wildcard.css#a1bec2
variable.css, variable.argument.css, meta.property-value.css#82cab3
entity.name.tag.css#e67574
entity.other.attribute-name.pseudo-class.css, support.constant.property-value.css, support.constant.font-name.css, entity.other.attribute-name.pseudo-element.css#Dca054
constant.other.color.rgb-value.hex.css#f49e8b
support.type.property-name.css, support.type.vendored.property-name.css#88B3D1
entity.other.attribute-name.id.css#86a0c6
entity.other.attribute-name.class.css#90c2c9
support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-extended-color-name.css#cfcfcf
source.css support.function, support.function.url.css, variable.parameter.keyframe-list.css#a1bec2
source.css keyword.control.at-rule, keyword.operator.logical.and.media.css#e674ad
support.type.property-name.media.css#90c2c9
meta.at-rule.media.header.css#90c2c9
source.json punctuation.separator.dictionary.key-value.json, source.json punctuation.separator.dictionary.pair.json, punctuation.separator.array.json#98999b
support.type.property-name.json#88B3D1
string.quoted.double.json#85ddc1
source.json constant.language.json, source.json constant.numeric.json#f49e8b
source.json.comments#6c7277
storage.type, source.js keyword.control, keyword.operator.ternary.js, keyword.operator.new.js, keyword.operator.logical.js, keyword.operator.relational.js, keyword.operator.comparison.js, storage.modifier.js#e67574
punctuation.terminator.statement.js, source.js keyword.operator, source.js punctuation.accessor, support.type.object.module.js, constant.language.import-export-all.js#98999b
string.quoted.double.js, string.quoted.single.js, string.template.js#4cbe9a
source.js comment.line.double-slash.js, comment.block.js#6c7277
comment.block.documentation.js#8e9499
storage.type.class.jsdoc#Dca054
variable.other.constant.js#a2bbd8
entity.name.function.js#a1bec2
meta.template.expression.js#D4D4D4
constant.numeric.decimal.js, source.js constant.language.boolean#f49e8b
meta.object-literal.key.js#a1bec2
storage.modifier.async.js#e674ad
entity.name.type.class#86a0c6
variable.other.object.property.js, variable.other.property.js, constant.language.null.js#90c2c9
variable.other.constant.property.js#82cab3bold
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#98999b
entity.other.attribute-name.js#90C2C9
support.class.component.js#DCA054
entity.name.tag.js, entity.name.tag.js.jsx#F49E8B
source.ts keyword.control, keyword.operator.ternary.ts, keyword.operator.new.ts, keyword.operator.logical.ts, keyword.operator.relational.ts, keyword.operator.comparison.ts, storage.modifier.ts#e67574
punctuation.terminator.statement.ts, source.ts keyword.operator, source.ts punctuation.accessor, support.type.object.module.ts, constant.language.import-export-all.ts#98999b
string.quoted.ts, string.quoted.single.ts, string.quoted.double.ts, string.template.ts#4cbe9a
source.ts comment.line.double-slash.ts, comment.block.ts#6c7277
comment.block.documentation.ts#8e9499
variable.other.constant.ts#82cab3
entity.name.type.ts, entity.name.type.alias.ts#86a0c6
support.type.primitive.ts#D4D4D4underline
entity.name.function.ts#a1bec2
meta.template.expression.ts#D4D4D4
constant.numeric.decimal.ts, source.ts constant.language.boolean#f49e8b
meta.object-literal.key.ts#a1bec2
storage.modifier.async.ts#e674ad
variable.other.object.property.ts, variable.other.property.ts, constant.language.null.ts#90c2c9
variable.other.constant.property.ts#82cab3
punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.separator.comma.ts, keyword.operator.assignment.tsx, punctuation.terminator.statement.tsx, punctuation.accessor.tsx, entity.name.type.module.tsx, keyword.operator.type.annotation.tsx, keyword.operator.optional.tsx, keyword.operator.type.tsx, punctuation.separator.comma.tsx, punctuation.separator.key-value.tsx#98999b
string.quoted.double.tsx, string.quoted.single.tsx, string.template.tsx#4cbe9a
entity.name.function.tsx#a1bec2
variable.other.property.tsx#d4d4d4
entity.other.attribute-name.tsx#90C2C9
variable.other.readwrite.tsx#98999b
variable.other.readwrite.alias.tsx#DCA054
support.class.component.tsx, entity.name.type.alias.tsx, entity.name.type.tsx#DCA054
entity.name.tag.tsx, constant.numeric.decimal.tsx, constant.language.boolean.false.tsx, constant.language.boolean.true.tsx, support.type.builtin.ts, support.type.primitive.ts#F49E8B
support.type.primitive.ts, support.type.primitive.tsx#f49e8b
variable.other.constant.tsx#82cab3
variable.other.object.tsx#D4D4D4
keyword.control.import.tsx, keyword.control.from.tsx, keyword.control.flow.tsx, keyword.control.export.tsx, meta.export.default.tsx, keyword.control.as.tsx, keyword.operator.logical.tsx, keyword.operator.assignment.compound.tsx, keyword.operator.comparison.tsx, keyword.operator.assignment.compound.bitwise.tsx, keyword.operator.ternary.tsx, keyword.control.type.tsx#E67574
comment.line.double-slash.tsx, comment.block.tsx#6c7277
entity.name.type.interface.ts#86a0c6
variable.object.property.tsx#d4d4d4
entity.name.tag.svelte#e67574
meta.embedded.expression.svelte#d4d4d4
meta.special#e674ad
string.quoted.svelte#4cbe9a
meta.tag.start.svelte#e674ad
punctuation.separator.key-value.svelte, punctuation.definition.tag.begin.svelte, punctuation.definition.tag.end.svelte#98999b
meta.attribute.crossorigin.svelte#Dca054
entity.other.attribute-name.svelte#90c2c9
comment.block.svelte#6c7277
entity.name.tag.astro#e67574
meta.embedded.expression.astro#d4d4d4
meta.special#e674ad
string.quoted.astro#4cbe9a
meta.tag.start.astro#DCA054
punctuation.separator.key-value.astro, punctuation.definition.tag.begin.astro, punctuation.definition.tag.end.astro#98999b
meta.attribute.crossorigin.astro#Dca054
entity.other.attribute-name.astro#90c2c9
comment.block.astro, comment#6c7277
source.yaml keyword.operator, source.yaml punctuation.separator.key-value#98999b
source.yaml string.quoted.single#4cbe9a
source.yaml string.quoted.double#4cbe9a
entity.name.tag.yaml#4cbe9a
constant.language.boolean.yaml#f49e8b
constant.numeric.float.yaml#f49e8b
string.unquoted.plain.out.yaml#9ac1c8
string.unquoted.plain.in.yaml#9ac1c8
storage.type.function.python#e67574
source.python comment.line.number-sign.python#6c7277
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.double.single-line.python, string.quoted.double.block.python, string.quoted.single.single-line.python, string.interpolated.python, string.quoted.docstring.single.python, string.quoted.single.python, string.quoted.docstring.multi.python#4cbe9a
constant.other.placeholder.python, constant.character.format.placeholder.other.python, meta.fstring.python#d4d4d4
constant.character.escape.python#4cbe9abold
string.quoted.binary.single.python, string.regexp.quoted.single.python, string.quoted.docstring.raw.single.python#4cbe9a
source.python#d4d4d4
constant.numeric.dec.python, constant.numeric.float.python#f49e8b
meta.function-call.python#78bcc5
entity.name.function.python, entity.name.function.member.python, meta.function-call.python, variable.parameter.function-call.python#90b1c9
keyword.control.import.python, keyword.control.import.from.python#e67574
keyword.control.flow.python, keyword.operator.comparison.python, keyword.operator.logical.python, constant.language.python, keyword.operator.arithmetic.python, keyword.operator.unpacking.arguments.python, keyword.operator.unpacking.parameter.python, keyword.operator.bitwise.python#e67574
entity.name.class, meta.class.python#86a0c6
support.type.python#d6b589
punctuation.separator.period.python, keyword.operator.assignment.python, punctuation.section.class.begin.python, punctuation.section.function.begin.python, punctuation.separator.annotation.result.python, punctuation.separator.annotation.python, punctuation.definition.decorator.python, punctuation.separator.colon.python, punctuation.separator.arguments.python, punctuation.separator.slice.python, variable.parameter.function-call.python, punctuation.section.function.lambda.begin.python, punctuation.separator.element.python, constant.other.ellipsis.python, punctuation.separator.dict.python#98999b
variable.language.special.self.python, variable.parameter.function.language.special.self.python, support.type.python meta.function.decorator.python#e674ad
meta.attribute.python#86a0c6
support.function.magic.python, support.variable.magic.python, meta.function-call.arguments.python, support.function.builtin.python#90b1c9
source.python entity.name#98999b
punctuation.definition.table.toml, source.toml punctuation.separator, punctuation.eq.toml, punctuation.definition.table.inline.toml#98999b
support.type.property-name.toml, meta.table.inline.toml, meta.entry.toml#88B3D1
string.quoted.single.basic.line.toml#85ddc1
meta.array.table.toml, meta.table.toml#e67574
constant.numeric.integer.toml, constant.language.boolean.toml#f49e8b
punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, punctuation.parenthesis.begin.regexp, punctuation.parenthesis.end.regexp, keyword.operator.lookahead.regexp, constant.other.set.regexp#98999b
keyword.operator.quantifier.regexp, support.other.match.begin.regexp, support.other.match.end.regexp#e67574
constant.character.escape.regexp, constant.character.set.regexp#90b1c9
support.other.escape.special.regexp, support.other.match.any.regexp#Dca054
punctuation.section.block.end.bracket.curly.c, punctuation.section.block.begin.bracket.curly.c, punctuation.section.parens.begin.bracket.round.c, punctuation.section.parens.end.bracket.round.c, punctuation.section.parameters.begin.bracket.round.c, punctuation.section.parameters.end.bracket.round.c, punctuation.section.block.begin.bracket.curly.switch.c, punctuation.section.block.end.bracket.curly.switch.c, punctuation.section.parens.begin.bracket.round.conditional.switch.c, punctuation.section.parens.end.bracket.round.conditional.switch.c, punctuation.section.arguments.begin.bracket.round.c, punctuation.section.arguments.end.bracket.round.c, punctuation.definition.begin.bracket.square.c, punctuation.definition.end.bracket.square.c, punctuation.separator.colon.case.c, punctuation.separator.delimiter.c, punctuation.separator.dot-access.c, punctuation.separator.pointer-access.c, punctuation.terminator.statement.c, keyword.operator.assignment.c#98999B
constant.numeric.decimal.c, constant.numeric.hexadecimal.c, constant.numeric.octal.c, constant.numeric.binary.c, constant.other.placeholder.c, constant.numeric.decimal.point.c, entity.name.function.preprocessor.c#F49E8B
keyword.other.unit.suffix.integer.c, keyword.other.unit.suffix.floating-point.c, keyword.other.unit.hexadecimal.c, keyword.other.unit.octal.c, keyword.other.unit.binary.c#90c0c9
string.quoted.double.c, string.quoted.single.c, string.quoted.other.lt-gt.include.c#4CBE9A
entity.name.type.c, constant.character.escape.c#A1BEC2
entity.name.function.c#90B1C9
storage.type.built-in.primitive.c, variable.parameter.probably.c, keyword.operator.ternary.c, keyword.control.c, keyword.control.case.c, keyword.control.default.c, keyword.control.switch.c, keyword.operator.c, keyword.operator.bitwise.shift.c, keyword.operator.increment.c, keyword.operator.decrement.c, keyword.operator.comparison.c, keyword.operator.logical.c, keyword.operator.assignment.compound.bitwise.c, keyword.operator.assignment.compound.c, keyword.operator.sizeof.c#E67574
source.c keyword.control.directive, storage.modifier.array.bracket.square, keyword.other.typedef.c, storage.modifier.c, storage.type.struct.c, storage.type.union.c, storage.type.enum.c#88B3D1

Shiki preview

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

Loading...

Casio Theme - Coding Theme