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.activeBackground#00000000
  • activityBar.activeBorder#00ff88
  • activityBar.activeFocusBorder#00000000
  • activityBar.background#080a08
  • activityBar.border#00000000
  • activityBar.dropBorder#00000000
  • activityBar.foreground#d0d0d0
  • activityBar.inactiveForeground#606060
  • activityBarBadge.background#00ff88
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#00ff88
  • breadcrumb.background#0a0a0a
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#cccccc
  • button.background#00ff88
  • button.foreground#000000
  • button.hoverBackground#33ff99
  • contrastActiveBorder#00000000
  • contrastBorder#333333
  • diffEditor.insertedLineBackground#00ff8811
  • diffEditor.insertedTextBackground#00ff8822
  • diffEditor.removedLineBackground#ff005511
  • diffEditor.removedTextBackground#ff005522
  • editor.background#0e110e
  • editor.findMatchBackground#0ea5e944
  • editor.findMatchHighlightBackground#0ea5e922
  • editor.foreground#e6e6e6
  • editor.lineHighlightBackground#00000000
  • editor.rangeHighlightBackground#00ff8811
  • editor.selectionBackground#00ff8833
  • editor.selectionHighlightBackground#00ff8822
  • editor.wordHighlightBackground#00ff8815
  • editor.wordHighlightStrongBackground#00ff8825
  • editorCursor.foreground#00ff88
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#08090a
  • editorGroupHeader.tabsBorder#00000000
  • editorHoverWidget.background#0a0a0a
  • editorHoverWidget.border#333333
  • editorIndentGuide.activeBackground1#00ff88
  • editorIndentGuide.background1#1c1c1c
  • editorLineNumber.activeForeground#00ff88
  • editorLineNumber.foreground#454545
  • editorRuler.foreground#1c1c1c
  • editorWhitespace.foreground#2a2a2a
  • editorWidget.background#0a0a0a
  • editorWidget.border#333333
  • focusBorder#00000000
  • gitDecoration.addedResourceForeground#00ff88
  • gitDecoration.conflictingResourceForeground#ff00dd
  • gitDecoration.deletedResourceForeground#ff0055
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#ffdd00
  • gitDecoration.untrackedResourceForeground#0088ff
  • input.background#0a0a0a
  • input.border#333333
  • input.foreground#ffffff
  • input.placeholderForeground#666666
  • inputOption.activeBorder#00ff88
  • inputValidation.errorBackground#ff0055
  • inputValidation.errorBorder#ff0055
  • list.activeSelectionBackground#00ff8811
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.focusAndSelectionOutline#00000000
  • list.focusBackground#1a1a1a
  • list.focusForeground#ffffff
  • list.focusHighlightForeground#00ff88
  • list.focusOutline#00000000
  • list.hoverBackground#00ff8815
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00ff8811
  • list.inactiveSelectionForeground#cccccc
  • list.inactiveSelectionIconForeground#cccccc
  • menu.background#000000
  • menu.border#333333
  • menu.foreground#ffffff
  • menu.selectionBackground#1a1a1a
  • menu.selectionForeground#ffffff
  • minimap.background#000000
  • minimap.errorHighlight#ff0055
  • minimap.findMatchHighlight#0088ff44
  • minimap.selectionHighlight#00ff8844
  • minimap.warningHighlight#ffdd00
  • notificationCenter.border#333333
  • notificationCenterHeader.background#0a0a0a
  • notifications.background#0a0a0a
  • notifications.border#333333
  • notifications.foreground#ffffff
  • notificationToast.border#333333
  • panel.background#050505
  • panel.border#1a1a1a
  • panelTitle.activeBorder#00ff88
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#666666
  • peekView.border#00ff88
  • peekViewEditor.background#0a0a0a
  • peekViewResult.background#050505
  • peekViewTitle.background#000000
  • progressBar.background#00ff88
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#444444
  • sideBar.background#080b08
  • sideBar.border#00000000
  • sideBar.foreground#b8b8b8
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#d0d0d0
  • sideBarTitle.foreground#d0d0d0
  • statusBar.background#08090a
  • statusBar.border#00ff8833
  • statusBar.debuggingBackground#c85450
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#b8b8b8
  • statusBar.noFolderBackground#08090a
  • tab.activeBackground#00000000
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00ff88
  • tab.activeForeground#d0d0d0
  • tab.border#00000000
  • tab.focusBorder#00000000
  • tab.hoverBackground#0f0f0f22
  • tab.hoverBorder#00000000
  • tab.hoverForeground#b8b8b8
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#707070
  • tab.lastPinnedBorder#00000000
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#a0a0a0
  • tab.unfocusedInactiveForeground#606060
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0088ff
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#3399ff
  • terminal.ansiBrightCyan#33ffee
  • terminal.ansiBrightGreen#33ffaa
  • terminal.ansiBrightMagenta#ff33ee
  • terminal.ansiBrightRed#ff3377
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffee33
  • terminal.ansiCyan#00ffdd
  • terminal.ansiGreen#00ff88
  • terminal.ansiMagenta#ff00dd
  • terminal.ansiRed#ff0055
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffdd00
  • terminal.background#000000
  • terminal.foreground#f5f5f5
  • titleBar.activeBackground#08090a
  • titleBar.activeForeground#d0d0d0
  • titleBar.border#00000000
  • titleBar.inactiveBackground#08090a
  • titleBar.inactiveForeground#606060
  • tree.inactiveIndentGuidesStroke#00ff8833
  • tree.indentGuidesStroke#00ff8833
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a4a4aitalic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.other.special-method, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.go#66ccff
string, string.quoted, string.template, punctuation.definition.string#99ddaa
constant.numeric, constant.language, constant.character, constant.escape#c4b078
entity.name.function, meta.function-call, variable.function, support.function, entity.name.method#00ff88
entity.name.class, entity.name.type, support.type, support.class, entity.name.interface#7cb3b3
variable, variable.parameter, variable.other, variable.language.this, variable.language.super#e8e8e8
variable.object.property, meta.object-literal.key, support.variable.property, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.field.declaration.go, variable.field.go#a8d0ff
entity.name.tag, punctuation.definition.tag#7aa3c4
entity.other.attribute-name, entity.other.attribute-name.html#c4b078
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison.go, punctuation.separator.key-value#aaffaa
punctuation, punctuation.separator, punctuation.terminator#707070
constant, constant.other, support.constant#b078a8
string.regexp, constant.character.escape#00ff88
entity.name.import, entity.name.module, support.module#6b9bd1
entity.name.function.decorator, meta.decorator, punctuation.decorator#a87cb3
constant.character.escape, constant.character.entity#00ff88
meta.template.expression, punctuation.definition.template-expression#00ff88
entity.name.package.go, variable.other.field.go, entity.name.type.struct.go, meta.struct.go variable.other.go#88ddff
meta.function.receiver.go variable.parameter.go, variable.parameter.receiver.go#ffaa55
entity.name.type.interface.go, support.type.go#dd88ff
support.type.property-name.css#7cb3b3
support.constant.property-value.css, meta.property-value.css#c4b078
markup.heading, entity.name.section.markdown#00ff88bold
markup.bold#ffffffbold
variable.language.go, constant.language.go#ffcc77
keyword.operator.address.go, keyword.operator.channel.go#00ff88bold
markup.italic#d5d5d5italic
markup.inline.raw, markup.fenced_code#8ba888
support.type.property-name.json#7cb3b3
invalid, invalid.illegal#ff4757bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart#7cb3b3
storage.type.primitive.dart, storage.type.built-in.dart#66ccff
entity.name.function.dart, support.function.dart#6366f1
variable.other.dart, variable.parameter.dart, variable.declaration.dart, meta.definition.variable.dart#e8e8e8
variable.other.property.dart, meta.field.declaration.dart#a8d0ff
keyword.control.dart, keyword.declaration.dart, storage.type.annotation.dart#66ccff
support.class.flutter, support.type.flutter, meta.function-call.dart entity.name.function.dart#dd88ff
string.interpolated.dart, punctuation.definition.interpolation.dart, meta.template.expression.dart#6366f1
storage.type.annotation.dart, meta.declaration.annotation.dart#a87cb3
entity.name.constructor, meta.constructor.dart#7cb3b3
entity.name.type.rust, storage.type.rust, storage.class.std.rust#7cb3b3
meta.macro.rust, entity.name.function.macro.rust#a87cb3
entity.name.type.swift, support.type.swift#7cb3b3
variable.language.php, variable.other.global.php#dd88ff
constant.other.symbol.ruby#c4b078
entity.name.type.class.cs, storage.type.cs#7cb3b3
entity.name.tag.cs, meta.attribute.cs#a87cb3
meta.decorator.ts, meta.decorator.tsx#a87cb3
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.js, support.class.component.tsx#dd88ff
entity.name.tag.js.jsx, entity.name.tag.tsx#dd88ff
entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html#7aa3c4
entity.name.tag.yaml#7cb3b3
entity.name.type.class.java, storage.type.java, storage.type.generic.java#7cb3b3
entity.name.type.class.kotlin, storage.type.kotlin#7cb3b3
Carbon Code Theme by sazardev - VS Code Theme