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#32302e
  • activityBar.foreground#ffffff98
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#d7a65a
  • activityBarBadge.foreground#2e2c2a
  • badge.background#d7a65a
  • badge.foreground#2e2c2a
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#2c2927
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • button.background#45423e
  • button.border#59524d
  • button.foreground#ffffff
  • button.hoverBackground#403c39
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#45494e
  • checkbox.background#3c3c3c
  • checkbox.border#00000000
  • checkbox.foreground#cccccc
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.diagonalFill#393939
  • diffEditor.insertedLineBackground#8f8f6e0e
  • diffEditor.insertedTextBackground#77775c19
  • diffEditor.removedLineBackground#652c2c3f
  • diffEditor.removedTextBackground#56313168
  • dropdown.background#3c3c3c
  • dropdown.border#00000000
  • dropdown.foreground#cccccc
  • editor.background#2b2927
  • editor.findMatchBackground#374a43
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#ffffff0b
  • editor.findMatchHighlightBorder#707070
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#c6cbcc
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#51665e3d
  • editor.lineHighlightBackground#ffffff0a
  • editor.lineHighlightBorder#282828
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#6f8c813d
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#53616deb
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#568388b8
  • editorBracketHighlight.foreground1#00000000
  • editorBracketHighlight.foreground2#00000000
  • editorBracketHighlight.foreground3#00000000
  • editorBracketHighlight.foreground4#00000000
  • editorBracketHighlight.foreground5#00000000
  • editorBracketHighlight.foreground6#00000000
  • editorBracketHighlight.unexpectedBracket.foreground#b98182
  • editorBracketMatch.background#383736
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#999999
  • editorCursor.background#000000
  • editorCursor.foreground#5cc1a3e6
  • editorError.background#b73a3400
  • editorError.border#ffffff00
  • editorError.foreground#f48771
  • editorGroup.border#444444
  • editorGroup.dropBackground#587b8059
  • editorGroup.emptyBackground#2b2927
  • editorGroupHeader.tabsBackground#2b2927
  • editorGutter.addedBackground#9fe3b6
  • editorGutter.background#2b2927
  • editorGutter.commentRangeForeground#5f5f5f
  • editorGutter.deletedBackground#94151b
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#e3c89f
  • editorHoverWidget.background#242322
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.background#4490bf00
  • editorInfo.border#4490bf00
  • editorInfo.foreground#ce8d2c
  • editorLineNumber.activeForeground#c6c6c6
  • editorLineNumber.foreground#858585
  • editorLink.activeForeground#37b9ff
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#242322
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#0097fb
  • editorSuggestWidget.selectedBackground#062f4a
  • editorWarning.background#a9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#242322
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5f5f5f
  • focusBorder#7d7772
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#cccccc
  • input.background#3c3c3c
  • input.border#00000000
  • input.foreground#cccccc
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#007fd466
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#4c4c4c
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#587b8059
  • list.focusBackground#4c4c4c
  • list.focusForeground#cccccc
  • list.focusOutline#cccccc
  • list.highlightForeground#0097fb
  • list.hoverBackground#303030
  • list.hoverForeground#cccccc
  • list.inactiveSelectionBackground#3d3d3d
  • list.inactiveSelectionForeground#cccccc
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#252526
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#094771
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#3b3b3d
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403b
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384b
  • merge.incomingHeaderBackground#395f8f
  • minimap.background#2b2927
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#515c6a
  • minimap.selectionHighlight#383e43
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#9d630c
  • notificationCenter.border#474747
  • notificationCenterHeader.background#303031
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#252526
  • notifications.border#303031
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#474747
  • panel.background#2e2c29
  • panel.border#80808059
  • panelSection.border#80808059
  • panelSection.dropBackground#587b8059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#444444
  • peekViewEditor.background#242322
  • peekViewEditor.matchHighlightBackground#4c4c4c3d
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#242322
  • peekViewResult.background#262625
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#00000000
  • peekViewResult.selectionBackground#4c4c4c
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#242322
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#3794ff
  • progressBar.background#0e70c0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#256aa7
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#cccccc
  • sideBar.background#2e2c2a
  • sideBar.border#cccccc1e
  • sideBar.dropBackground#587b8059
  • sideBar.foreground#cccccc
  • sideBarActivityBarTop.border#00000000
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#cccccc1e
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#2d2b29
  • statusBar.debuggingBackground#483623
  • statusBar.debuggingForeground#ebebeb
  • statusBar.foreground#b8b5b1
  • statusBar.noFolderBackground#2d2b29
  • statusBar.noFolderForeground#b8b5b1
  • statusBarItem.activeBackground#ffffff25
  • statusBarItem.errorBackground#00000000
  • statusBarItem.errorForeground#d37777
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#584e46
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#00000000
  • statusBarItem.warningForeground#d3c677
  • tab.activeBackground#33302d
  • tab.activeBorder#b49056
  • tab.activeBorderTop#00000000
  • tab.activeForeground#d9d9d9
  • tab.border#3f3c38
  • tab.inactiveBackground#2c2927
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#80808059
  • terminal.foreground#cccccc
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#0087ff
  • terminalCursor.foreground#ffffff
  • textLink.activeForeground#24a0e4
  • textLink.foreground#37b9ff
  • titleBar.activeBackground#32302e
  • titleBar.activeForeground#cccccc
  • titleBar.border#cccccc0f
  • titleBar.inactiveBackground#363432
  • titleBar.inactiveForeground#b9b9b9
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.logical, keyword.operator.math.rust, keyword.operator.relational#92c8d5
entity.name.type.lifetime.rust#cbc0b1
keyword.operator.question.rust#939293
keyword.operator.borrow.and.rust#b5b4b3
punctuation.definition.delayed.unison, punctuation.definition.list.begin.unison, punctuation.definition.list.end.unison, punctuation.definition.ability.begin.unison, punctuation.definition.ability.end.unison, punctuation.operator.assignment.as.unison, punctuation.separator.pipe.unison, punctuation.separator.delimiter.unison, punctuation.definition.hash.unison#c6cbcc
variable.other.generic-type.haskell#d17b8d
storage.type.haskell#ecc77c
support.variable.magic.python#c6cbcc
punctuation.separator.period.python, punctuation.separator.element.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python#c6cbcc
variable.parameter.function.language.special.self.python#d19577
storage.modifier.lifetime.rust#c6cbcc
support.function.std.rust#d4d4d4
entity.name.lifetime.rust#d19577
variable.language.rust#c6cbcc
meta.attribute.rust#d19577
keyword.other.rust, keyword.other.fn.rust, keyword.declaration.struct.rust, entity.name.function.macro.rules.rust#d17b8d
entity.name.function.rust, meta.function-call.rust, entity.name.function.macro.rust#92c8d5
constant.language.bool, constant.language.boolean, support.constant.edge, constant.language.json#d17b8d
constant.other.character-class.regexp#c6cbcc
keyword.operator.quantifier.regexp#ecc77c
punctuation.definition.string.begin,punctuation.definition.string.end#95d1be
variable.parameter.function#c6cbcc
comment markup.link#7f848e
markup.changed.diff#d19577
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#d4d4d4
markup.inserted.diff#95d1be
markup.deleted.diff#c6cbcc
meta.function.c,meta.function.cpp#c6cbcc
punctuation.separator.key-value#c6cbcc
keyword.operator.expression.import#d4d4d4
support.constant.math#d19577
support.constant.property.math#ecc77c
variable.other.constant#d19577
storage.type.annotation.java, storage.type.object.array.java#d19577
source.java#c6cbcc
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#c6cbcc
meta.method.java#d4d4d4
storage.modifier.import.java,storage.type.java,storage.type.generic.java#d19577
keyword.operator.instanceof.java#d17b8d
meta.definition.variable.name.java#c6cbcc
keyword.other.kotlin, constant.language.kotlin#d17b8d
keyword.operator.logical#92c8d5
keyword.operator.bitwise#92c8d5
keyword.operator.channel#92c8d5
support.constant.property-value.scss,support.constant.property-value.css#ecc77c
keyword.operator.css,keyword.operator.scss,keyword.operator.less#92c8d5
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#ecc77c
punctuation.separator.list.comma.css#c6cbcc
support.constant.color.w3c-standard-color-name.css#ecc77c
support.type.vendored.property-name.css#92c8d5
support.module.node,support.type.object.module,support.module.node#d19577
entity.name.type.module#d19577
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#c6cbcc
support.constant.json#ecc77c
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#d17b8d
support.type.object.console#c6cbcc
support.variable.property.process#ecc77c
entity.name.function,support.function.console#d4d4d4
keyword.operator.misc.rust#c6cbcc
keyword.operator.sigil.rust#d17b8d
keyword.operator.delete#d17b8d
support.type.object.dom#92c8d5
support.variable.dom,support.variable.property.dom#c6cbcc
punctuation#939293
support.type.posix-reserved.c,support.type.posix-reserved.cpp#92c8d5
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#d17b8d
variable.parameter.function.language.python#ecc77c
support.type.python#92c8d5
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#c6cbcc
constant.character.format.placeholder.other.python#ecc77c
keyword.operator.assignment.compound#92c8d5
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#92c8d5
entity.name.namespace#d19577
variable#c6cbcc
variable.language#d19577
token.variable.parameter.java#c6cbcc
import.storage.java#d19577
token.package.keyword#d17b8d
token.package#c6cbcc
entity.name.function, meta.require, support.function.any-method, variable.function#d4d4d4
entity.name.type.namespace#d19577
support.class, entity.name.type.class#d19577
entity.name.class.identifier.namespace.type#d19577
entity.name.class, variable.other.class.js, variable.other.class.ts#d19577
entity.name.type#d19577
keyword.control#d17b8d
control.elements, keyword.operator.less#ecc77c
keyword.other.special-method#d4d4d4
storage#d17b8d
token.storage#d17b8d
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#d17b8d
token.storage.type.java#d19577
support.function#92c8d5
support.type.property-name#c6cbcc
support.constant.property-value#c6cbcc
support.constant.font-name#ecc77c
meta.tag#c6cbcc
string#95d1be
entity.other.inherited-class#d19577
constant.other.symbol#92c8d5
constant.numeric#ecc77c
constant#c6cbcc
punctuation.definition.constant#ecc77c
entity.name.tag#c6cbcc
entity.other.attribute-name#ecc77c
entity.other.attribute-name.id#d4d4d4
entity.other.attribute-name.class.css#ecc77c
meta.selector#d17b8d
markup.heading#c6cbcc
markup.heading punctuation.definition.heading, entity.name.section#d4d4d4
keyword.other.unit#c6cbcc
markup.bold,todo.bold#ecc77c
punctuation.definition.bold#d19577
markup.italic, punctuation.definition.italic,todo.emphasis#d17b8d
emphasis md#d17b8d
entity.name.section.markdown#c6cbcc
punctuation.definition.heading.markdown#c6cbcc
punctuation.definition.list.begin.markdown#c6cbcc
markup.heading.setext#c6cbcc
punctuation.definition.bold.markdown#ecc77c
markup.inline.raw.markdown#95d1be
markup.inline.raw.string.markdown#95d1be
punctuation.definition.list.markdown#c6cbcc
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#c6cbcc
beginning.punctuation.definition.list.markdown#c6cbcc
punctuation.definition.metadata.markdown#c6cbcc
markup.underline.link.markdown,markup.underline.link.image.markdown#d17b8d
string.other.link.title.markdown,string.other.link.description.markdown#d4d4d4
string.regexp#92c8d5
constant.character.escape#92c8d5
punctuation.section.embedded, variable.interpolation#c6cbcc
punctuation.section.embedded.begin,punctuation.section.embedded.end#d17b8d
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#c6cbcc
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#c6cbcc
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#c6cbcc
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#95d1be
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#92c8d5
meta.function.decorator.python#d4d4d4
support.token.decorator.python,meta.function.decorator.identifier.python#92c8d5
function.parameter#c6cbcc
function.brace#c6cbcc
function.parameter.ruby, function.parameter.cs#c6cbcc
constant.language.symbol.ruby#92c8d5
rgb-value#92c8d5
inline-color-decoration rgb-value#ecc77c
less rgb-value#ecc77c
selector.sass#c6cbcc
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#d19577
block.scope.end,block.scope.begin#c6cbcc
storage.type.cs#d19577
entity.name.variable.local.cs#c6cbcc
token.info-token#d4d4d4
token.warn-token#ecc77c
token.error-token#f44747
token.debug-token#d17b8d
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#d17b8d
meta.template.expression#c6cbcc
keyword.operator.module#d17b8d
support.type.type.flowtype#d4d4d4
support.type.primitive#d19577
meta.property.object#c6cbcc
variable.parameter.function.js#c6cbcc
keyword.other.template.begin#95d1be
keyword.other.template.end#95d1be
keyword.other.substitution.begin#95d1be
keyword.other.substitution.end#95d1be
keyword.operator.assignment#92c8d5
keyword.operator.arithmetic.go, keyword.operator.address.go, keyword.operator.assignment.go#92c8d5
entity.name.package.go, source.go#d19577
keyword.type.go,keyword.function.go#d17b8d
punctuation.quasi.element#d17b8d
constant.character.entity#c6cbcc
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#92c8d5
entity.global.clojure#d19577
meta.symbol.clojure#c6cbcc
constant.keyword.clojure#92c8d5
source.ini#95d1be
meta.scope.prerequisites.makefile#c6cbcc
source.makefile#d19577
storage.modifier.import.groovy#d19577
meta.method.groovy#d4d4d4
meta.definition.variable.name.groovy#c6cbcc
meta.definition.class.inherited.classes.groovy#95d1be
support.variable.semantic.hlsl#d19577
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl#d17b8d
text.variable, text.bracketed#c6cbcc
support.type.swift, support.type.vb.asp#d19577
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#d19577
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#c6cbcc
meta.brace.square#c6cbcc
comment, punctuation.definition.comment#7d7b74
markup.quote.markdown#7f848e
punctuation.definition.block.sequence.item.yaml#c6cbcc
constant.language.symbol.elixir#92c8d5
markup.italic.markdownitalic

Shiki preview

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

Loading...

Arrakis Theme - Coding Theme