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#18191b
  • activityBar.background#0C0D0E
  • activityBar.border#111113
  • activityBar.foreground#b0b4ba
  • activityBarBadge.background#0090ff
  • badge.background#004074
  • breadcrumb.background#18191b
  • button.background#2870bd
  • dropdown.background#111113
  • editor.background#111113
  • editor.border#111113
  • editor.selectionBackground#2e3135
  • editor.selectionHighlightBackground#2e3135
  • editor.wordHighlightBackground#2e3135
  • editorBracketHighlight.foreground1#696e77
  • editorBracketHighlight.foreground2#696e77
  • editorBracketHighlight.foreground3#696e77
  • editorBracketHighlight.foreground4#696e77
  • editorBracketHighlight.foreground5#696e77
  • editorBracketHighlight.foreground6#696e77
  • editorBracketHighlight.unexpectedBracket.foreground#696e77
  • editorCodeLens.foreground#b0b4ba
  • editorGroup.border#363a3f
  • editorGroupHeader.tabsBackground#0C0D0E
  • editorGutter.foldingControlForeground#777b84
  • editorLineNumber.foreground#696e77
  • editorWidget.background#111113
  • focusBorder#00000000
  • input.background#18191b
  • inputOption.activeBackground#0d2847
  • inputOption.activeForeground#70b8ff
  • list.activeSelectionBackground#212225
  • list.activeSelectionBorder#00000000
  • list.focusBackground#2e3135
  • list.focusOutline#00000000
  • list.hoverBackground#272a2d
  • list.inactiveSelectionBackground#18191b
  • menu.background#111113
  • menu.border#212225
  • menu.separatorBackground#212225
  • panel.background#0C0D0E
  • panel.border#212225
  • panelTitle.activeBorder#70b8ff
  • peekView.border#43484e
  • peekViewEditor.background#18191b
  • peekViewResult.background#111113
  • peekViewResult.lineForeground#777b84
  • peekViewResult.matchHighlightBackground#003362
  • peekViewResult.selectionBackground#2e3135
  • peekViewTitleDescription.foreground#777b84
  • pickerGroup.border#363a3f
  • pickerGroup.foreground#777b84
  • sash.hoverBorder#363a3f
  • scrollbar.shadow#0C0D0E
  • scrollbarSlider.activeBackground#2e3135
  • scrollbarSlider.background#212225
  • scrollbarSlider.hoverBackground#272a2d
  • settings.checkboxBackground#0C0D0E
  • settings.checkboxBorder#363a3f
  • settings.dropdownBackground#0C0D0E
  • settings.dropdownBorder#363a3f
  • settings.modifiedItemIndicator#2870bd
  • settings.numberInputBackground#0C0D0E
  • settings.numberInputBorder#363a3f
  • settings.sashBorder#363a3f
  • settings.textInputBackground#0C0D0E
  • settings.textInputBorder#363a3f
  • sideBar.background#0C0D0E
  • sideBar.border#212225
  • sideBarSectionHeader.background#0C0D0E
  • sideBarSectionHeader.border#111113
  • sideBarTitle.foreground#777b84
  • statusBar.background#0C0D0E
  • statusBar.border#212225
  • statusBar.debuggingBackground#a35829
  • statusBar.noFolderBackground#8457aa
  • statusBarItem.remoteBackground#2870bd
  • tab.activeBackground#18191b
  • tab.border#111113
  • tab.inactiveBackground#0C0D0E
  • titleBar.activeBackground#0C0D0E
  • titleBar.border#111113
  • titleBar.inactiveBackground#0C0D0E
  • tree.indentGuidesStroke#363a3f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.line#777b84
comment.block#777b84
constant.numeric#ffca16
constant.language#de51a8
constant.other.variable#3dd68c
editorBracketMatch.border#696e77
entity.name.tag#f76b15
entity.name.type#3dd68c
entity.name.type.class#3b9eff
entity.name.type.module#3b9eff
entity.other#3b9eff
entity.other.attribute-name#e5484d
entity.scope.name#0090ff
keyword.control#9a5cd0
keyword.control.flow#de51a8
keyword.control.new#e5484d
keyword.other#de51a8
keyword.operator#777b84
keyword.operator.assignment#696e77
keyword.operator.expression#f76b15
keyword.operator.logical#777b84
keyword.operator.rest#696e77
keyword.operator.spread#696e77
keyword.operator.type.annotation#696e77
keyword.operator.ternary#777b84
keyword.operator.new#e5484d
meta.brace#696e77
meta.definition.variable#edeef0
meta.definition.function#3b9eff
meta.definition.method#3b9eff
meta.definition.property#3b9eff
meta.function-call#9a5cd0
meta.import#edeef0
meta.object-literal.key#edeef0
punctuation.accessor#696e77
punctuation.bracket#696e77
punctuation.definition#696e77
punctuation.definition.annotation#ffca16
punctuation.definition.block#696e77
punctuation.definition.parameters#696e77
punctuation.definition.string#696e77
punctuation.section#696e77
punctuation.separator#696e77
punctuation.separator.dot-access#696e77
punctuation.terminator.statement#696e77
storage.modifier#e5484d
storage.modifier.import#b0b4ba
storage.type#de51a8
storage.type.annotation#ffca16
storage.type.generic#0090ff
storage.type.function.arrow#696e77
string.quoted#ffca16
string.template#ffca16
support.type.primitive#f76b15
support.type.property-name#f76b15
support.type.builtin#de51a8
variable.object.property#edeef0
variable.other#edeef0
variable.other.constant#3b9eff
variable.other.macro.argument#de51a8
variable.parameter.probably#3b9eff
variable.language#de51a8
source.java entity.name.function#3b9eff
source.java keyword.control.new#e5484d
source.java storage.modifier#f76b15
source.java storage.modifier.extends#de51a8
source.java storage.modifier.implements#de51a8
source.java storage.type#3dd68c
source.java storage.type.primitive#de51a8
source.java storage.type.generic#3dd68c
source.java punctuation.terminator#777b84
source.kotlin keyword.control.new#e5484d
source.kotlin storage.modifier#f76b15
source.kotlin variable.parameter.function#ffca16
source.kotlin entity.other.inherited-class#9a5cd0
source.kotlin punctuation.seperator#777b84
text.html.markdown fenced_code.block.language#9a5cd0
text.html.markdown markup.bold#de51a8
text.html.markdown markup.italic#3dd68c
text.html.markdown markup.strikethrough#e5484d
text.html.markdown markup.inline.raw.string#ffca16
text.html.markdown markup.underline.link#3b9eff
text.html.markdown meta.paragraph#edeef0
text.html.markdown punctuation.definition.heading#0090ff
text.html.markdown string.other.link.title#3dd68c
text.html.markdown meta.separator#777b84
source.mdx meta.paragraph#edeef0
source.mdx punctuation.definition.heading#0090ff
source.mdx string.other.begin.code.fenced#777b84
source.mdx string.other.end.code.fenced#777b84
source.mdx variable.ordered.list#777b84
source.mdx variable.unordered.list#777b84
source.mdx markup.code#9a5cd0
source.mdx string.other.number#777b84
source.mdx meta.separator#777b84
source.mdx support.class.component#f76b15
source.objc entity.name.function#3b9eff
source.objc entity.name.function.preprocessor#f76b15
source.objc keyword.other.property.attribute#f76b15
source.objc meta.bracketed#de51a8
source.objc meta.function-call#edeef0
source.objc storage.type#e5484d
source.objc support.class.cocoa#3dd68c
source.objc support.other.protocol#f76b15
source.ruby constant.other.symbol.hashkey#3dd68c
source.ruby entity.name.function#3b9eff
source.ruby support.class#f76b15
source.ruby variable.parameter.function#3dd68c
source.shell entity.name.command#3b9eff
source.shell support.function.builtin#de51a8
source.swift entity.name.type#3b9eff
source.swift support.function.any-method#3b9eff
source.swift keyword.control.new#e5484d
source.swift meta.parameter-clause#3dd68c
source.swift meta.function-call#edeef0
source.swift entity.name.function#3b9eff
source.swift meta.definition.function.body#edeef0
source.swift meta.definition.type.body#edeef0
source.swift meta.inheritance-clause#f76b15
source.swift punctuation.definition.attribute#f76b15
source.swift storage.modifier#f76b15
source.swift support.type#3dd68c
source.swift support.function#9a5cd0
source.swift variable.parameter.function#ffca16
source.swift meta.function-result#3dd68c
source.swift variable.language.generic-parameter#3dd68c
source.ts punctuation.definition.block.tag.jsdoc#f76b15
source.ts storage.type.class.jsdoc#f76b15
source.tsx punctuation.definition.block.tag.jsdoc#f76b15
source.tsx storage.type.class.jsdoc#f76b15
text.xml entity.other.attribute-name.localname#3b9eff
source.gdscript constant.language#f76b15
source.gdscript entity.name.function#3b9eff
source.gdscript entity.name.type.class#e5484d
source.gdscript entity.other.inherited-class#e5484d
source.gdscript keyword.language#de51a8
source.gdscript keyword.control#de51a8
source.gdscript support.function#3b9eff
source.gdscript variable.parameter.function#3dd68c
source.dart entity.name.function#3b9eff
source.dart keyword.declaration#de51a8
source.dart punctuation#777b84
source.dart other.source#777b84
source.dart string.interpolated#ffca16
source.dart string.quoted#ffca16
source.dart string.template#ffca16
source.dart support.class#f76b15
source.dart variable.parameter#f76b15
source.dart storage.modifier#de51a8
source.dart storage.type.annotation#e5484d
source.dart meta.embedded.expression#f76b15
source.cs keyword.type#f76b15
source.cs keyword.type.void#de51a8
source.cs entity.name.function#3b9eff
source.cs variable.other.object.property#9a5cd0
source.cs punctuation#777b84
source.diff meta.diff.header#3b9eff
source.diff meta.diff.header.from-file#ec5d5e
source.diff meta.diff.header.from-file punctuation.definition#8c333a
source.diff meta.diff.header.to-file#3dd68c
source.diff meta.diff.header.to-file punctuation.definition#28684a
source.diff meta.diff.range#9a5cd0
source.diff markup.inserted.diff#3dd68c
source.diff markup.deleted.diff#ec5d5e
source.diff punctuation.definition.inserted.diff#28684a
source.diff punctuation.definition.deleted.diff#8c333a
source.diff punctuation.definition.range.diff#8457aa
source.rust entity.name.function#3b9eff
source.rust keyword.control.flow#de51a8
source.rust entity.name.namespace#ff801f
source.rust meta.attribute.rust#e5484d
source.rust punctuation#777b84
source.zig entity.name.function#3b9eff
source.zig keyword.control.flow#de51a8
source.zig keyword.default#de51a8
source.zig keyword.structure#de51a8
source.zig keyword.storage#9a5cd0
source.zig keyword.type#9a5cd0
source.zig keyword.type.c#3dd68c
source.zig support.function.builtin.zig#ff801f
source.zig punctuation#777b84

Shiki preview

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

Loading...

Expo Theme - Coding Theme