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.

  • activityBar.background#c4be9d
  • badge.background#e7e7e7
  • badge.foreground#3f7063
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64b5f655
  • editor.background#faf8f3
  • editor.findMatchBackground#87a192
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.inactiveSelectionBackground#aaab9c66
  • editor.lineHighlightBackground#faf8f3
  • editor.lineHighlightBorder#9c824a
  • editor.selectionBackground#cdd0d255
  • editor.selectionHighlightBackground#cdd0d277
  • editor.wordHighlightBackground#aa769b55
  • editor.wordHighlightStrongBackground#410a0b44
  • editorBracketMatch.background#e7e7e7
  • editorBracketMatch.border#fafafa
  • editorCursor.foreground#554444
  • editorGroupHeader.tabsBackground#cdd0d2
  • editorHoverWidget.background#d1d3d4
  • editorHoverWidget.border#d78d9f
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • editorSuggestWidget.background#d1d3d4
  • editorSuggestWidget.border#d78d9f
  • editorSuggestWidget.foreground#2a3343
  • editorSuggestWidget.highlightForeground#820014
  • editorSuggestWidget.selectedBackground#2c3d5244
  • editorWidget.background#cdd0d2
  • editorWidget.border#d78d9f
  • errorForeground#b1365bf3
  • focusBorder#525e54
  • foreground#24283b
  • gitDecoration.addedResourceForeground#53245b
  • gitDecoration.modifiedResourceForeground#034694
  • gitDecoration.untrackedResourceForeground#aa769b
  • list.activeSelectionBackground#d1343822
  • list.activeSelectionForeground#2a3343
  • list.dropBackground#db82d6cc
  • list.errorForeground#a50044
  • list.focusBackground#6d50a188
  • list.highlightForeground#4d0e0b
  • list.hoverBackground#ad680066
  • list.hoverForeground#e7e7e7
  • list.inactiveFocusBackground#885f66cc
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#4d0e0b
  • scrollbar.shadow#cf6f4b
  • scrollbarSlider.background#cdd0d2
  • scrollbarSlider.hoverBackground#c4be9d
  • selection.background#ebe6d9
  • sideBar.background#cdd0d2
  • sideBar.border#8382ae
  • sideBar.foreground#85483d
  • sideBarSectionHeader.background#aebabe
  • sideBarSectionHeader.foreground#2a3343
  • sideBarTitle.foreground#30322e
  • statusBar.background#cdd0d2
  • statusBar.foreground#35495f
  • tab.activeBackground#faf8f3
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#cdd0d2
  • tab.inactiveBackground#cdd0d2
  • tab.inactiveForeground#ffffff
  • tab.unfocusedActiveBackground#cdd0d2
  • tab.unfocusedActiveBorder#cdd0d2
  • tab.unfocusedActiveForeground#aa769b
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#CA5050—
source.css#CA5050—
source.go#CA5050—
support.constant#36444D—
punctuation.separator.parameter.js#36444D—
punctuation.separator.parameter.jsx#1F272C—
punctuation.separator.parameter.ts#1F272C—
punctuation.separator.parameter.tsx#36444D—
constant.character#36444D—
constant.language#36444D—
constant.other#36444D—
comment#a5a8ad—
markup.italic#2B373E—
meta.object-literal.key.js#2B373E—
meta.object-literal.key.jsx#36444D—
meta.object-literal.key.ts#2B373E—
meta.object-literal.key.tsx#41515C—
comment.block.documentation#a5a8ad—
comment.line.double-slash#a5a8ad—
punctuation.accessor.js#41515C—
punctuation.accessor.jsx#475965—
punctuation.accessor.ts#36444D—
punctuation.accessor.tsx#36444D—
variable.language#2B373E—
variable.other.object.js#36444D—
variable.other.object.jsx#36444D—
variable.other.object.ts#36444D—
variable.other.object.tsx#36444D—
variable.other.readwrite#252F35—
variable.other.readwrite.js#36444D—
variable.other.readwrite.jsx#36444D—
variable.other.readwrite.ts#36444D—
variable.other.readwrite.tsx#36444D—
punctuation.separator.key-value.js#0C92F4—
punctuation.separator.key-value.jsx#249EF5—
punctuation.separator.key-value.ts#3CA8F6—
punctuation.separator.key-value.tsx#3CA8F6—
storage.modifier.async.js#0A81D7—
storage.modifier.async.jsx#0C92F4—
storage.modifier.async.ts#249EF5—
storage.modifier.async.tsx#249EF5—
meta.brace.round.js#249EF5—
meta.brace.round.jsx#249EF5—
meta.brace.round.ts#5AB5F7—
meta.brace.round.tsx#0A8AE6—
entity.other.inherited-class#0A8AE6—
support.class.builtin.js#3CA8F6—
support.class.builtin.jsx#249EF5—
support.class.builtin.ts#0C92F4—
support.class.builtin.tsx#249EF5—
meta.tag.attributes.js#0C92F4—
meta.tag.attributes.jsx#3CA8F6—
meta.tag.attributes.ts#0C92F4—
meta.tag.attributes.tsx#249EF5—
keyword.control.module.js#249EF5—
keyword.control.module.jsx#249EF5—
keyword.control.module.ts#3CA8F6—
keyword.control.module.tsx#249EF5—
keyword.operator.accessor#249EF5—
invalid#249EF5underline
constant.numeric#249EF5—
keyword#249EF5—
meta.var.expr.js#249EF5—
meta.var.expr.jsx#3CA8F6—
meta.var.expr.ts#3CA8F6—
meta.var.expr.tsx#0C92F4—
keyword.control.import.js#5AB5F7—
keyword.control.import.jsx#0C92F4—
keyword.control.import.ts#5AB5F7—
keyword.control.import.tsx#249EF5—
keyword.control.from.js#249EF5—
keyword.control.from.jsx#0C92F4—
keyword.control.from.ts#4BAFF7—
keyword.control.from.tsx#3CA8F6—
keyword.control.export.js#0C92F4—
keyword.control.export.jsx#0A81D7—
keyword.control.export.ts#249EF5—
keyword.control.export.tsx#5AB5F7—
keyword.control.default.js#249EF5—
keyword.control.default.jsx#3CA8F6—
keyword.control.default.ts#5AB5F7—
keyword.control.default.tsx#249EF5—
support.type.object.module.js#0A8AE6—
support.type.object.module.jsx#0C92F4—
support.type.object.module.ts#249EF5—
support.type.object.module.tsx#0C92F4—
punctuation.definition.parameters.begin.js#CA5050—
punctuation.definition.parameters.begin.jsx#AD3535—
punctuation.definition.parameters.begin.ts#CA5050—
punctuation.definition.parameters.begin.tsx#C43C3C—
punctuation.definition.parameters.end.js#CA5050—
punctuation.definition.parameters.end.jsx#CA5050—
punctuation.definition.parameters.end.ts#D06464—
punctuation.definition.parameters.end.tsx#CA5050—
punctuation.definition.parameters.end.js#D36F6F—
punctuation.definition.parameters.end.jsx#CA5050—
punctuation.definition.parameters.end.ts#CA5050—
punctuation.definition.parameters.end.tsx#C43C3C—
markup.quote#AD3535—
meta.tag.js#D06464—
meta.tag.jsx#D36F6F—
meta.tag.ts#B93838—
meta.tag.tsx#D36F6F—
meta.parameters.js#CA5050—
meta.parameters.jsx#D06464—
meta.parameters.ts#C43C3C—
meta.parameters.tsx#CA5050—
meta.brace.square.js#C43C3C—
meta.brace.square.jsx#CA5050—
meta.brace.square.ts#CA5050—
meta.brace.square.tsx#CA5050—
variable.other.class.js#D77B7B—
variable.other.class.jsx#C43C3C—
variable.other.class.ts#B93838—
variable.other.class.tsx#CA5050—
constant.other.object.key.js#CA5050—
constant.other.object.key.jsx#D77B7B—
constant.other.object.key.ts#CA5050—
constant.other.object.key.tsx#CA5050—
entity.name.function.method#AD3535—
string.template#CA5050—
support.type.property-name.json#AD3535—
variable.other.property.js#CA5050—
variable.other.property.jsx#D36F6F—
variable.other.property.ts#D77B7B—
variable.other.property.tsx#CA5050—
entity.name.tag#A42045underline
markup.italic#8F1C3D—
punctuation.accessor.js#7A1833—
punctuation.accessor.jsx#8F1C3D—
punctuation.accessor.ts#7A1833—
punctuation.accessor.tsx#601329—
source.js#8F1C3D—
source.jsx#8F1C3D—
source.ts#8F1C3D—
source.tsx#8F1C3D—
storage.modifier.js#8F1C3D—
storage.modifier.jsx#8F1C3D—
storage.modifier.ts#7A1833—
storage.modifier.tsx#8F1C3D—
storage.type#BE2550—
string.quoted.single.js#7A1833—
string.quoted.single.jsx#6D152E—
string.quoted.single.ts#8F1C3D—
string.quoted.single.tsx#8F1C3D—
support.function.dom.js#BE2550—
support.function.dom.jsx#8F1C3D—
support.function.dom.ts#B1234B—
support.function.dom.tsx#7A1833—
support.variable.property.js#A42045—
support.variable.property.jsx#8F1C3D—
support.variable.property.ts#8F1C3D—
support.variable.property.tsx#B1234B—
variable.language.constructor#8F1C3Dunderline
variable.language.this#601329—
constant.language.boolean#92AB72—
constant.language.null.js#7E995B—
constant.language.null.jsx#7E995B—
constant.language.null.ts#617646—
constant.language.null.tsx#7E995B—
entity.name.class#7E995Bunderline
entity.name.function#718951underline
entity.name.type#718951underline
markup.heading.markdown#718951—
punctuation.separator.comma.js#718951—
punctuation.separator.comma.jsx#7E995B—
punctuation.separator.comma.ts#92AB72—
punctuation.separator.comma.tsx#617646—
support.variable.property.js#7E995B—
support.variable.property.jsx#7E995B—
support.variable.property.ts#7E995B—
support.variable.property.tsx#7E995B—
support.type.primitive.js#7E995B—
support.type.primitive.jsx#7E995B—
support.type.primitive.ts#92AB72—
support.type.primitive.tsx#7E995B—
variable#7E995B—
variable.parameter#023A7B—
support.function#023A7B—
meta.import.js#034694—
meta.import.jsx#023A7B—
meta.import.ts#034694—
meta.import.tsx#034694—
meta.paragraph.markdown#034694—
entity.other.attribute-name.js#034694—
entity.other.attribute-name.jsx#034694—
entity.other.attribute-name.ts#045FCB—
entity.other.attribute-name.tsx#034694—
string.quoted.single.js#02336C—
string.quoted.single.jsx#034694—
string.quoted.single.ts#023A7B—
string.quoted.single.tsx#023A7B—
string.quoted.single.json#02336C—
support.class.promise.js#02336C—
support.class.promise.jsx#0451AD—
support.class.promise.ts#02336C—
support.class.promise.tsx#045FCB—
support.type.object.console.js#034694—
support.type.object.console.jsx#022C5D—
support.type.object.console.ts#0451AD—
support.type.object.console.tsx#034694—
support.function.console.js#023A7B—
support.function.console.jsx#023A7B—
support.function.console.ts#0451AD—
support.function.console.tsx#022C5D—
punctuation.definition.block.js#034694—
punctuation.definition.block.jsx#0451AD—
punctuation.definition.block.ts#034694—
punctuation.definition.block.tsx#0451AD—
token.info-token#316BCD—
token.warn-token#CD9731—
token.error-token#CD3131—
token.debug-token#800080—
feizhen theme by feizhen - VS Code Theme