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.

  • accent#b080ff
  • activityBar.activeBackground#8e47ff40
  • activityBar.activeBorder#00000000
  • activityBar.background#28242e
  • activityBar.border#4a464f
  • activityBar.foreground#b080ff
  • activityBar.inactiveForeground#c1bec6
  • activityBarBadge.background#7138cc
  • activityBarBadge.foreground#ffffff
  • alertButton.background#c1bec6
  • alertButton.foreground#19161d
  • alertButton.hoverBackground#dcdadf
  • alertButton.hoverForeground#211d25
  • alertButton.secondaryBackground#ffffff33
  • alertButton.secondaryForeground#ffffffbf
  • alertButton.secondaryHoverBackground#ffffff4d
  • alertButton.secondaryHoverForeground#ffffffd9
  • background#19161d
  • badge.background#8dc8fb40
  • badge.foreground#8dc8fb
  • button.background#7138cc
  • button.foreground#f2f1f4
  • button.hoverBackground#8e47ff
  • button.secondaryBackground#ffffff13
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#8e47ff40
  • button.separator#19161d40
  • checkbox.background#28242e
  • checkbox.border#4a464f
  • checkbox.foreground#8e47ff
  • commandCenter.activeBorder#8e47ff40
  • commandCenter.border#00000000
  • commandCenter.debuggingBackground#8e47ffbf
  • debugIcon.continueForeground#8dc8fb
  • debugIcon.pauseForeground#8dc8fb
  • debugIcon.restartForeground#80ffb5
  • debugIcon.startForeground#80ffb5
  • debugIcon.stopForeground#ff8080
  • debugToolBar.background#352f3d
  • diffEditor.insertedLineBackground#80ffb520
  • diffEditor.insertedTextBackground#80ffb520
  • diffEditor.removedLineBackground#ff808020
  • diffEditor.removedTextBackground#ff808020
  • disabledForeground#938f9b
  • dropdown.background#28242e
  • dropdown.border#4a464f
  • editor.background#211d25
  • editor.findMatchHighlightBackground#b080ff40
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#ffffff0d
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#8dc8fb20
  • editor.selectionBackground#c099ff40
  • editor.selectionHighlightBackground#00000000
  • editor.wordHighlightBackground#8dc8fb20
  • editorBracketHighlight.foreground1#ffcf99
  • editorBracketHighlight.foreground2#fff2b3
  • editorBracketHighlight.foreground3#dfffb3
  • editorError.foreground#ff8080bf
  • editorGroup.border#4a464f
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#28242e
  • editorGroupHeader.tabsBorder#4a464f
  • editorGutter.addedBackground#80ffb5bf
  • editorGutter.background#00000000
  • editorGutter.deletedBackground#ff8080bf
  • editorGutter.modifiedBackground#b080ffbf
  • editorHoverWidget.background#352f3d
  • editorHoverWidget.border#00000000
  • editorIndentGuide.activeBackground1#ffffff26
  • editorIndentGuide.background#ffffff0d
  • editorInfo.foreground#8dc8fb
  • editorLightBulb.foreground#fff2b3
  • editorLightBulbAutoFix.foreground#dfffb3
  • editorLineNumber.activeForeground#ffffff99
  • editorLineNumber.dimmedForeground#ffffff4d
  • editorLineNumber.foreground#ffffff66
  • editorSuggestWidget.selectedBackground#352f3d
  • editorWarning.foreground#ffcf99
  • editorWidget.background#28242e
  • editorWidget.border#00000000
  • errorForeground#ff8080
  • extensionButton.background#7138cc
  • extensionButton.foreground#ffffff
  • extensionButton.hoverBackground#8e47ff
  • extensionButton.prominentBackground#7138cc
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#8e47ff
  • focusBorder#9e61ff
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground#ff8080
  • gitDecoration.deletedResourceForeground#dfffb3
  • gitDecoration.ignoredResourceForeground#938f9b
  • gitDecoration.modifiedResourceForeground#ffcf99
  • gitDecoration.untrackedResourceForeground#80ffb5
  • icon.foreground#c1bec6
  • input.background#28242e
  • input.border#4a464f
  • inputOption.activeBackground#8141e6
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#ffffff
  • inputOption.hoverBackground#28242e
  • inputValidation.errorBackground#ff8080
  • inputValidation.errorBorder#ff8080
  • inputValidation.errorForeground#19161d
  • keybindingLabel.background#ffffff1a
  • keybindingLabel.border#00000000
  • keybindingLabel.bottomBorder#ffffff1a
  • keybindingLabel.foreground#938f9b
  • keybindingLabel.shadow#00000000
  • list.activeSelectionBackground#352f3d
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff8080
  • list.focusBackground#8dc8fb40
  • list.focusOutline#00000000
  • list.hoverBackground#ffffff0d
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#352f3d
  • list.warningForeground#ffcf99
  • minimap.errorHighlight#ff808080
  • minimap.findMatchHighlight#b080ff80
  • minimap.foregroundOpacity#ffffff40
  • minimap.infoHighlight#8dc8fb80
  • minimap.selectionHighlight#b080ff40
  • minimap.selectionOccurrenceHighlight#b080ff
  • multiDiffEditor.headerBackground#28242e
  • notifications.background#28242e
  • notifications.border#00000000
  • notificationsErrorIcon.foreground#ff8080
  • notificationsInfoIcon.foreground#8dc8fb
  • notificationsWarningIcon.foreground#ffcf99
  • panel.background#211d25
  • panel.border#00000000
  • panelTitle.activeBackground#352f3d
  • panelTitle.activeBorder#00000000
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#938f9b
  • peekViewTitle.background#28242e
  • pickerGroup.foreground#8e47ff
  • problemsErrorIcon.foreground#ff8080
  • problemsInfoIcon.foreground#8dc8fb
  • problemsWarningIcon.foreground#ffcf99
  • progressBar.background#7138cc
  • quickInput.background#211d25
  • quickInput.overlayBackground#19161d80
  • quickInputList.focusBackground#352f3d
  • quickInputList.focusForeground#ffffff
  • scmGraph.historyItemBaseRefColor#8dc8fb
  • scmGraph.historyItemHoverLabelForeground#19161d
  • scmGraph.historyItemRefColor#8dc8fb
  • scmGraph.historyItemRemoteRefColor#8e47ff
  • scrollbar.shadow#19161d
  • settings.dropdownBackground#28242e
  • settings.dropdownBorder#4a464f
  • sideBar.background#211d25
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#211d25
  • sideBarSectionHeader.border#352f3d
  • sideBarTitle.background#28242e
  • sideBarTitle.border#4a464f
  • statusBar.background#00000000
  • statusBar.debuggingBackground#8e47ff40
  • statusBar.foreground#938f9b
  • statusBar.noFolderBackground#00000000
  • statusBarItem.hoverBackground#ffffff13
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.remoteBackground#00000000
  • statusBarItem.remoteForeground#938f9b
  • symbolIcon.arrayForeground#808aff
  • symbolIcon.classForeground#ffcf99
  • symbolIcon.functionForeground#8dc8fb
  • symbolIcon.interfaceForeground#8e47ff
  • symbolIcon.propertyForeground#938f9b
  • symbolIcon.typeParameterForeground#8e47ff
  • symbolIcon.variableForeground#ff8080
  • tab.activeBackground#28242e
  • tab.activeBorder#211d25
  • tab.activeBorderTop#b080ff
  • tab.activeForeground#ffffff
  • tab.border#4a464f
  • tab.inactiveBackground#28242e
  • tab.inactiveForeground#938f9b
  • terminal.ansiBlue#8dc8fb
  • terminal.ansiBrightBlack#ffffff40
  • terminal.ansiBrightBlue#8dc8fb
  • terminal.ansiBrightCyan#80f4ff
  • terminal.ansiBrightGreen#80ffb5
  • terminal.ansiBrightMagenta#8e47ff
  • terminal.ansiBrightRed#ff8080
  • terminal.ansiBrightYellow#fff2b3
  • terminal.ansiCyan#80f4ff
  • terminal.ansiGreen#80ffb5
  • terminal.ansiMagenta#8e47ff
  • terminal.ansiRed#ff8080
  • terminal.ansiYellow#fff2b3
  • terminal.border#4a464f
  • textLink.activeForeground#8dc8fb
  • textLink.foreground#b080ff
  • textPreformat.background#ffffff1a
  • textPreformat.foreground#938f9b
  • titleBar.activeBackground#00000000
  • titleBar.border#00000000
  • titleBar.inactiveBackground#00000000
  • toolbar.hoverBackground#352f3d
  • tree.inactiveIndentGuidesStroke#938f9b40
  • tree.indentGuidesStroke#938f9b80
  • welcomePage.background#211d25
  • welcomePage.progress.background#28242e
  • welcomePage.progress.foreground#8dc8fb
  • welcomePage.tileBackground#19161d
  • widget.border#ffffff33
  • widget.shadow#19161d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.block.documentation, punctuation.definition.comment#666666italic
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.backtick, string.template, string.interpolated, string.unquoted#ffbf00
constant.character.escape, constant.character.unicode#ff8c00
punctuation.definition.template-expression, punctuation.section.embedded#ff8c00
constant.numeric, constant.numeric.decimal, constant.numeric.integer, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary, constant.numeric.float#ff8c00
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.none, constant.language.nan#17a398
constant.other, support.constant#ffafd1
storage.type.class, storage.type.interface, storage.type.enum, storage.type.struct, storage.type.trait, storage.type.module, storage.type.namespace, storage.type.record#7b2ff7italic
entity.name.type.class, entity.other.inherited-class, entity.name.type.struct, entity.name.type.trait, entity.name.type.record#da80ff
entity.name.type.interface, entity.name.type.enum, entity.name.type, entity.name.type.alias, entity.name.type.primitive, support.type, support.class, keyword.other.type.php, storage.type.php, support.type.php#17a398
keyword.control.constructor, storage.type.function.constructor, entity.name.function.constructor#cc2222
entity.name.function, support.function, support.function.builtin, meta.definition.method entity.name.function, meta.function.expression entity.name.function#ff3333
storage.modifier, storage.modifier.ts, storage.modifier.js, storage.modifier.async, storage.modifier.static, storage.modifier.abstract, storage.modifier.readonly#afb42b
storage.type.function, storage.type.arrow, storage.type.const, storage.type.let, storage.type.var, storage.type.async, storage.type.ts, keyword.declaration#80d8ff
variable, variable.other, variable.other.readwrite, variable.other.property, variable.object.property, variable.other.constant, support.variable, meta.object-literal.key, variable.other.readwrite.instance.python, variable.other.readwrite.class.python, variable.other.readwrite.global.python, variable.other.cpp, variable.other.readwrite.cpp, variable.other.member.cpp, variable.other.field.cpp, variable.other.readwrite.cs, variable.other.field.cs, variable.other.member.cs, variable.other.rust, variable.other.readwrite.rust, variable.other.go, variable.other.readwrite.go, variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby, variable.other.php, variable.other.global.php, variable.other.java, variable.other.field.java#00e64d
variable.parameter, variable.parameter.function.python, variable.parameter.cpp, variable.parameter.cs, variable.parameter.rust, variable.parameter.go, variable.parameter.java, variable.parameter.php, variable.parameter.ruby#33b5e5
variable.language.this, variable.language.super, variable.language.self, variable.parameter.function.language.special.self.python, variable.language.special.self.python, variable.language.special.cls.python, variable.language.this.cpp, variable.language.this.cs, variable.language.this.php#ffffffitalic
keyword, keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.return, keyword.control.yield, keyword.control.await, keyword.control.heritage, keyword.other, keyword.other.import, keyword.other.use, keyword.other.fn, keyword.other.def, keyword.other.new, keyword.other.using, keyword.other.class, keyword.other.namespace#ffffff
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.void, keyword.operator.instanceof, keyword.operator.in, keyword.operator.of, keyword.operator.spread, keyword.operator.arrow, keyword.operator.range, keyword.operator.pointer, keyword.operator.address-of, keyword.operator.dereference#ffffff
meta.decorator, meta.decorator entity.name.function, punctuation.decorator, entity.name.function.decorator, storage.type.annotation, punctuation.definition.annotation#ff0055
meta.class punctuation.definition.block, meta.class punctuation.section.block, meta.class.body punctuation.definition.block, meta.interface punctuation.definition.block, meta.interface.ts punctuation.definition.block, meta.interface.tsx punctuation.definition.block, punctuation.definition.class.begin.bracket.curly.php, punctuation.definition.class.end.bracket.curly.php, punctuation.section.block.begin.bracket.curly.class.cpp, punctuation.section.block.end.bracket.curly.class.cpp#da80ff
meta.function punctuation.definition.block, meta.method punctuation.definition.block, meta.arrow punctuation.definition.block, meta.function.expression punctuation.definition.block, punctuation.definition.begin.bracket.curly.php, punctuation.definition.end.bracket.curly.php, punctuation.section.block.begin.bracket.curly.function.definition.special.constructor.cpp, punctuation.section.block.end.bracket.curly.function.definition.special.constructor.cpp, punctuation.section.block.begin.bracket.curly.function.definition.cpp, punctuation.section.block.end.bracket.curly.function.definition.cpp, punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs#ff3333
punctuation.definition.parameters.begin, punctuation.definition.parameters.end, meta.function punctuation.definition.parameters, meta.method punctuation.definition.parameters, meta.parameters punctuation.definition.parameters, punctuation.parenthesis.open.cs, punctuation.parenthesis.close.cs#00e64d
punctuation.definition.block, punctuation.section.block, meta.brace.round, meta.brace.square, punctuation.definition.array#888888
meta.block punctuation.definition.block#ffffff99
meta.brace.square.ts, meta.brace.square.tsx, meta.brace.square.js#00b0ff
punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end#ffffff99
support.function.builtin.python#ff3333
support.function.magic.python, entity.name.function.magic.python#ff0055
meta.function.parameters.annotation.python, meta.type.annotation.python, support.type.python#17a398
meta.import.python entity.name.module, support.module.python, entity.name.module.python#da80ff
entity.name.function.decorator.python, punctuation.definition.decorator.python#ff0055
meta.fstring.python, constant.character.format.placeholder.other.python#ff8c00
storage.type.cpp, storage.type.c, keyword.type.cpp, keyword.type.c, support.type.cpp, support.type.c, storage.type.built-in.cpp, storage.type.built-in.c, storage.type.primitive.cpp, storage.type.primitive.c, keyword.other.type.cpp, keyword.other.type.c, storage.type.integral.cpp, storage.type.integral.c, storage.type.floating-point.cpp, storage.type.floating-point.c, storage.type.void.cpp, storage.type.void.c, storage.type.boolean.cpp, storage.type.boolean.c#17a398
storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.private.cpp, storage.type.modifier.access.control.protected.cpp, storage.type.modifier.access.cpp, storage.type.modifier.cpp, storage.type.modifier.c#afb42b
keyword.type.string.cs, keyword.type.cs, keyword.type.void.cs, keyword.type.bool.cs, keyword.type.int.cs, keyword.type.float.cs, keyword.type.double.cs, keyword.type.char.cs, keyword.type.byte.cs, keyword.type.long.cs, keyword.type.object.cs, keyword.type.decimal.cs#17a398
entity.name.variable.property.cs, entity.name.variable.field.cs, entity.name.variable.local.cs#00e64d
entity.name.variable.parameter.cs#33b5e5
variable.other.cpp, variable.other.readwrite.cpp, variable.other.member.cpp, variable.other.field.cpp, meta.class.cpp variable.other, meta.struct.cpp variable.other#00e64d
meta.function.cpp storage.type, meta.function.c storage.type, meta.function.definition.cpp storage.type#17a398
keyword.control.directive, keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.pragma, meta.preprocessor.cpp, meta.preprocessor.c#ff0055
string.quoted.other.lt-gt.include.cpp, string.quoted.other.lt-gt.include.c#ffbf00
meta.template.cpp entity.name.type, storage.type.template.cpp#17a398
entity.name.namespace.cpp, entity.name.scope-resolution.cpp#da80ff
storage.modifier.pointer.cpp, storage.modifier.reference.cpp#ff0055
entity.name.function.preprocessor.cpp, entity.name.function.preprocessor.c#ff0055
storage.type.cs, support.type.cs, storage.type.built-in.cs, storage.type.integral.cs, storage.type.floating-point.cs, storage.type.void.cs, storage.type.boolean.cs, storage.type.string.cs#17a398
variable.other.readwrite.cs, variable.other.field.cs, variable.other.member.cs, meta.class.cs variable.other, meta.class.body.cs variable.other#00e64d
storage.type.annotation.cs, punctuation.definition.annotation.cs#ff0055
entity.name.namespace.cs#da80ff
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#ff0055
entity.name.function.macro.rust, support.function.macro.rust#ff0055
entity.name.type.rust, support.type.rust, storage.type.rust#17a398
variable.other.rust, variable.other.readwrite.rust#00e64d
support.function.builtin.go#ff3333
entity.name.type.go, support.type.go, storage.type.go#17a398
variable.other.go, variable.other.readwrite.go#00e64d
variable.language.this.php#ffffffitalic
meta.function.parameter.typehinted.php variable.other.php, meta.function.parameter.php variable.other.php, variable.parameter.php#33b5e5
storage.type.annotation.java, punctuation.definition.annotation.java#ff0055
storage.type.java, support.type.java, storage.type.primitive.java#17a398
variable.other.java, variable.other.field.java#00e64d
entity.name.tag, entity.name.tag.html, entity.name.tag.block.any.html, entity.name.tag.inline.any.html, meta.tag entity.name.tag#ff3333
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, meta.tag punctuation.definition.tag#7b2ff7
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.event#00e64d
string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value string#80f4ff
punctuation.separator.key-value, punctuation.separator.key-value.html#ffffff
meta.tag.sgml.doctype.html, entity.name.tag.doctype, keyword.other.doctype#ff0055
constant.character.entity.html, punctuation.definition.entity.html#ffafd1
entity.name.tag.css, entity.name.tag.scss, entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, meta.selector#da80ff
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name#33b5e5
support.constant.property-value.css, meta.property-value.css, support.constant.color, support.constant.font-name, meta.property-value#00e64d
keyword.other.unit.css, keyword.other.unit.scss, keyword.unit, keyword.other.unit#ffafd1
keyword.control.at-rule, keyword.control.at-rule.css, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import#ff0055
variable.css, variable.scss, support.variable.property.css#00e64d
keyword.other.create.sql, keyword.other.drop.sql, keyword.other.alter.sql#da80ff
keyword.other.sql#f48fb1
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.DCL.sql, keyword.other.TCL.sql, keyword.other.alias.sql, keyword.other.order.sql, keyword.other.join.sql, storage.modifier.sql#80d8ff
support.function.aggregate.sql, support.function.scalar.sql, support.function.string.sql, support.function.date.sql, entity.name.function.sql#ff3333
entity.name.table.sql, variable.other.table.sql#da80ff
keyword.operator.comparison.sql, keyword.operator.logical.sql, keyword.operator.sql#ffffff
storage.type.sql, support.type.sql#17a398
string.quoted.single.sql, string.quoted.double.sql#ffbf00
constant.numeric.sql#ff8c00
comment.line.double-dash.sql, comment.block.sql#666666italic
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double#33b5e5
meta.structure.dictionary.value.json string.quoted.double#ffbf00
entity.name.tag.yaml, string.unquoted.plain.out.yaml#fff2b3
string.unquoted.yaml, string.quoted.single.yaml, string.quoted.double.yaml#80f4ff
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml#ff0055
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#da80ffbold
markup.bold#ffffffbold
markup.italic#8dc8fbitalic
markup.inline.raw, markup.raw.inline#00e64d
markup.underline.link, string.other.link.title.markdown#33b5e5
markup.quote#666666italic
string.regexp, constant.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp#ff8c00
invalid, invalid.deprecated#ff0000strikethrough
Romanesca Rosenkreuz Theme by IKadzura - VS Code Theme