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#C4BE9D
  • badge.background#aaa
  • badge.foreground#fafafa
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#f3f0e0
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.lineHighlightBackground#bbc0c425
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#bbc0c455
  • editor.selectionHighlightBackground#bbc0c488
  • editor.wordHighlightBackground#bbc0c4aa
  • editor.wordHighlightStrongBackground#bbc0c4dd
  • editorBracketMatch.background#ecf6ff
  • editorBracketMatch.border#c3c1a9
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#bbc0c4
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • editorSuggestWidget.background#c3c1a9
  • editorSuggestWidget.border#936776
  • editorSuggestWidget.foreground#344250
  • editorSuggestWidget.highlightForeground#4d0e0b
  • editorSuggestWidget.selectedBackground#fafafa
  • errorForeground#B1365Bf3
  • focusBorder#525e54
  • git.color.modified#a50044
  • gitDecoration.modifiedResourceForeground#eae3cd
  • gitDecoration.untrackedResourceForeground#a50044
  • list.activeSelectionBackground#eae3cd
  • list.activeSelectionForeground#677d7f
  • list.dropBackground#999a9d
  • list.errorForeground#a50044
  • list.focusBackground#885f66aa
  • list.highlightForeground#89345d
  • list.hoverBackground#b1c1a5
  • list.hoverForeground#30322e
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#95a5a6
  • scrollbarSlider.background#bbc0c4
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#bbc0c4
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#bbc0c4
  • statusBar.foreground#35495f
  • tab.activeBackground#f3f0e0
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#bbc0c4
  • tab.inactiveBackground#bbc0c4
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#bbc0c4
  • tab.unfocusedActiveBorder#bbc0c4
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#884b50underline
source.go#c4773b—
source.json#c4773b—
source.css#c4773b—
markup.italic#82484C—
punctuation.accessor.js#884b50—
punctuation.accessor.jsx#884b50—
punctuation.accessor.ts#7C4449—
punctuation.accessor.tsx#884b50—
source.js#764145—
source.jsx#884b50—
source.ts#7C4449—
source.tsx#82484C—
storage.modifier.js#8E4E54—
storage.modifier.jsx#9A555B—
storage.modifier.ts#884b50—
storage.modifier.tsx#884b50—
storage.type#945257—
string.quoted.single.js#82484C—
string.quoted.single.jsx#884b50—
string.quoted.single.ts#884b50—
string.quoted.single.tsx#945257—
support.function.dom.js#764145—
support.function.dom.jsx#884b50—
support.function.dom.ts#884b50—
support.function.dom.tsx#884b50—
support.variable.property.js#7C4449—
support.variable.property.jsx#884b50—
support.variable.property.ts#884b50—
support.variable.property.tsx#884b50—
variable.language.constructor#764145underline
variable.language.this#764145—
meta.var.expr.js#9A555B—
meta.var.expr.jsx#8E4E54—
meta.var.expr.ts#884b50—
meta.var.expr.tsx#884b50—
variable#357CA7—
keyword.control.import.js#357CA7—
keyword.control.import.jsx#3782AF—
keyword.control.import.ts#307097—
keyword.control.import.tsx#3988B7—
keyword.control.from.js#4293C3—
keyword.control.from.jsx#3782AF—
keyword.control.from.ts#4293C3—
keyword.control.from.tsx#3782AF—
keyword.control.export.js#3782AF—
keyword.control.export.jsx#3782AF—
keyword.control.export.ts#3782AF—
keyword.control.export.tsx#357CA7—
variable.parameter#3782AF—
support.function#3782AF—
meta.import.js#3988B7—
meta.import.jsx#3782AF—
meta.import.ts#3782AF—
meta.import.tsx#3782AF—
meta.paragraph.markdown#3782AF—
entity.other.attribute-name.js#3782AF—
entity.other.attribute-name.jsx#357CA7—
entity.other.attribute-name.ts#3988B7—
entity.other.attribute-name.tsx#357CA7—
string.quoted.single.js#4293C3—
string.quoted.single.jsx#3782AF—
string.quoted.single.ts#357CA7—
string.quoted.single.tsx#3C8EBF—
string.quoted.single.json#3782AF—
support.class.promise.js#357CA7—
support.class.promise.jsx#307097—
support.class.promise.ts#3782AF—
support.class.promise.tsx#357CA7—
support.type.object.console.js#3C8EBF—
support.type.object.console.jsx#3782AF—
support.type.object.console.ts#357CA7—
support.type.object.console.tsx#307097—
support.function.console.js#3782AF—
support.function.console.jsx#3988B7—
support.function.console.ts#3782AF—
support.function.console.tsx#4293C3—
punctuation.definition.block.js#3988B7—
punctuation.definition.block.jsx#3C8EBF—
punctuation.definition.block.ts#3C8EBF—
punctuation.definition.block.tsx#307097—
keyword#c4773b—
keyword.control.default.js#c4773b—
keyword.control.default.jsx#c4773b—
keyword.control.default.ts#CC8955—
keyword.control.default.tsx#c4773b—
support.type.object.module.js#c4773b—
support.type.object.module.jsx#C77D44—
support.type.object.module.ts#c4773b—
support.type.object.module.tsx#c4773b—
keyword.control.module.js#B26C36—
keyword.control.module.jsx#c4773b—
keyword.control.module.ts#BB7238—
keyword.control.module.tsx#C77D44—
keyword.operator.accessor#c4773b—
invalid#c4773bunderline
constant.numeric#c4773b—
constant.language.boolean#C77D44—
constant.language.null.js#c4773b—
constant.language.null.jsx#AA6733—
constant.language.null.ts#c4773b—
constant.language.null.tsx#BB7238—
entity.name.class#c4773bunderline
entity.name.function#c4773bunderline
entity.name.type#C9834Dunderline
markup.heading.markdown#CC8955—
punctuation.separator.comma.js#c4773b—
punctuation.separator.comma.jsx#c4773b—
punctuation.separator.comma.ts#BB7238—
punctuation.separator.comma.tsx#AA6733—
support.variable.property.js#BB7238—
support.variable.property.jsx#c4773b—
support.variable.property.ts#AA6733—
support.variable.property.tsx#c4773b—
support.type.primitive.js#c4773b—
support.type.primitive.jsx#AA6733—
support.type.primitive.ts#C77D44—
support.type.primitive.tsx#C9834D—
punctuation.definition.parameters.begin.js#B03F4D—
punctuation.definition.parameters.begin.jsx#C35866—
punctuation.definition.parameters.begin.ts#C0505E—
punctuation.definition.parameters.begin.tsx#B84251—
punctuation.definition.parameters.end.js#9F3946—
punctuation.definition.parameters.end.jsx#9F3946—
punctuation.definition.parameters.end.ts#B84251—
punctuation.definition.parameters.end.tsx#BD4857—
punctuation.definition.parameters.end.js#BD4857—
punctuation.definition.parameters.end.jsx#B03F4D—
punctuation.definition.parameters.end.ts#B84251—
punctuation.definition.parameters.end.tsx#B03F4D—
markup.quote#B84251—
meta.tag.js#B84251—
meta.tag.jsx#B84251—
meta.tag.ts#B84251—
meta.tag.tsx#A73C4A—
meta.parameters.js#C0505E—
meta.parameters.jsx#B84251—
meta.parameters.ts#C0505E—
meta.parameters.tsx#BD4857—
meta.brace.square.js#B84251—
meta.brace.square.jsx#B84251—
meta.brace.square.ts#B03F4D—
meta.brace.square.tsx#B03F4D—
variable.other.class.js#B03F4D—
variable.other.class.jsx#B84251—
variable.other.class.ts#B03F4D—
variable.other.class.tsx#B03F4D—
punctuation.separator.key-value.js#B03F4D—
punctuation.separator.key-value.jsx#B84251—
punctuation.separator.key-value.ts#B84251—
punctuation.separator.key-value.tsx#B03F4D—
storage.modifier.async.js#BD4857—
storage.modifier.async.jsx#A73C4A—
storage.modifier.async.ts#B03F4D—
storage.modifier.async.tsx#B03F4D—
meta.brace.round.js#B84251—
meta.brace.round.jsx#C0505E—
meta.brace.round.ts#A73C4A—
meta.brace.round.tsx#B03F4D—
constant.other.object.key.js#BD4857—
constant.other.object.key.jsx#BD4857—
constant.other.object.key.ts#B84251—
constant.other.object.key.tsx#B03F4D—
entity.name.function.method#B84251—
string.template#B84251—
support.type.property-name.json#B03F4D—
variable.other.property.js#9F3946—
variable.other.property.jsx#A73C4A—
variable.other.property.ts#BD4857—
variable.other.property.tsx#B84251—
support.constant#406F64—
punctuation.separator.parameter.js#406F64—
punctuation.separator.parameter.jsx#46796D—
punctuation.separator.parameter.ts#406F64—
punctuation.separator.parameter.tsx#406F64—
constant.character#3D6A60—
constant.language#406F64—
constant.other#406F64—
comment#376057—
markup.italic#3D6A60—
meta.object-literal.key.js#406F64—
meta.object-literal.key.jsx#406F64—
meta.object-literal.key.ts#3D6A60—
meta.object-literal.key.tsx#3D6A60—
comment.block.documentation#3D6A60—
comment.line.double-slash#46796D—
punctuation.accessor.js#3D6A60—
punctuation.accessor.jsx#406F64—
punctuation.accessor.ts#406F64—
punctuation.accessor.tsx#406F64—
variable.language#406F64—
variable.other.object.js#376057—
variable.other.object.jsx#406F64—
variable.other.object.ts#406F64—
variable.other.object.tsx#46796D—
variable.other.readwrite#3A655B—
variable.other.readwrite.js#406F64—
variable.other.readwrite.jsx#3D6A60—
variable.other.readwrite.ts#406F64—
variable.other.readwrite.tsx#406F64—
entity.other.inherited-class#497E72—
support.class.builtin.js#406F64—
support.class.builtin.jsx#497E72—
support.class.builtin.ts#406F64—
support.class.builtin.tsx#3D6A60—
meta.tag.attributes.js#46796D—
meta.tag.attributes.jsx#406F64—
meta.tag.attributes.ts#406F64—
meta.tag.attributes.tsx#406F64—
Niketa Theme Light Old by selfrefactor - VS Code Theme