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#f9f6f1
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.lineHighlightBackground#bdc3c725
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#bdc3c755
  • editor.selectionHighlightBackground#bdc3c788
  • editor.wordHighlightBackground#bdc3c7aa
  • editor.wordHighlightStrongBackground#bdc3c7dd
  • editorBracketMatch.background#ecf6ff
  • editorBracketMatch.border#c3c1a9
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#bdc3c7
  • 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#bdc3c7
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#bdc3c7
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#bdc3c7
  • statusBar.foreground#35495f
  • tab.activeBackground#f9f6f1
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#bdc3c7
  • tab.inactiveBackground#bdc3c7
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#bdc3c7
  • tab.unfocusedActiveBorder#bdc3c7
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#b76144
source.css#b76144
source.go#b76144
comment#063672
constant.language#063672
constant.other#06346D
keyword.control.flow.js#052F63
keyword.control.flow.jsx#063672
keyword.control.flow.ts#063877
keyword.control.flow.tsx#063672
keyword.control.module.js#063672
keyword.control.module.jsx#06346D
keyword.control.module.ts#073B7C
keyword.control.module.tsx#073D81
keyword.operator.accessor#063672
markup.italic#073D81
meta.import.js#063672
meta.import.jsx#063877
meta.import.ts#063672
meta.import.tsx#063672
meta.object-literal.key.js#073B7C
meta.object-literal.key.jsx#06346D
meta.object-literal.key.ts#063672
meta.object-literal.key.tsx#063672
meta.paragraph.markdown#06346D
punctuation.definition.block.js#063877
punctuation.definition.block.jsx#073B7C
punctuation.definition.block.ts#073D81
punctuation.definition.block.tsx#063672
punctuation.separator.parameter.js#063672
punctuation.separator.parameter.jsx#063672
punctuation.separator.parameter.ts#06346D
punctuation.separator.parameter.tsx#053168
string.quoted.single.js#06346D
string.quoted.single.jsx#063672
string.quoted.single.ts#06346D
string.quoted.single.tsx#063672
string.quoted.single.json#053168
support.class.promise.js#063877
support.class.promise.jsx#063672
support.class.promise.ts#063672
support.class.promise.tsx#063672
support.function#063672
support.function.console.js#073B7C
support.function.console.jsx#063672
support.function.console.ts#063672
support.function.console.tsx#063672
support.type.object.console.js#063672
support.type.object.console.jsx#06346D
support.type.object.console.ts#063672
support.type.object.console.tsx#063672
variable.parameter#052F63
meta.tag.js#FF7E9A
meta.tag.jsx#ff5177
meta.tag.ts#FF2454
meta.tag.tsx#FF426B
variable.language#FF426B
invalid#ff5177underline
constant.numeric#ff5177
meta.brace.square.js#FF426B
meta.brace.square.jsx#FF2454
meta.brace.square.ts#ff5177
meta.brace.square.tsx#FF6083
meta.var.expr.js#ff5177
meta.var.expr.jsx#ff5177
meta.var.expr.ts#FF335F
meta.var.expr.tsx#ff5177
keyword.control.import.js#FF426B
keyword.control.import.jsx#FF7E9A
keyword.control.import.ts#FF426B
keyword.control.import.tsx#ff5177
keyword.control.from.js#FF7E9A
keyword.control.from.jsx#FF335F
keyword.control.from.ts#FF6083
keyword.control.from.tsx#ff5177
keyword.control.export.js#FF335F
keyword.control.export.jsx#FF6F8F
keyword.control.export.ts#FF426B
keyword.control.export.tsx#ff5177
keyword.control.default.js#FF426B
keyword.control.default.jsx#ff5177
keyword.control.default.ts#ff5177
keyword.control.default.tsx#FF7E9A
support.type.object.module.js#FF6083
support.type.object.module.jsx#FF6083
support.type.object.module.ts#FF335F
support.type.object.module.tsx#ff5177
punctuation.definition.parameters.begin.js#ff5177
punctuation.definition.parameters.begin.jsx#FF2454
punctuation.definition.parameters.begin.ts#ff5177
punctuation.definition.parameters.begin.tsx#ff5177
punctuation.definition.parameters.end.js#ff5177
punctuation.definition.parameters.end.jsx#FF6F8F
punctuation.definition.parameters.end.ts#FF7E9A
punctuation.definition.parameters.end.tsx#FF6F8F
punctuation.definition.parameters.end.js#FF426B
punctuation.definition.parameters.end.jsx#ff5177
punctuation.definition.parameters.end.ts#FF7E9A
punctuation.definition.parameters.end.tsx#ff5177
markup.quote#ff5177
entity.other.attribute-name.js#FF6F8F
entity.other.attribute-name.jsx#ff5177
entity.other.attribute-name.ts#FF426B
entity.other.attribute-name.tsx#ff5177
meta.parameters.js#FF426B
meta.parameters.jsx#ff5177
meta.parameters.ts#FF6F8F
meta.parameters.tsx#ff5177
variable.other.class.js#ff5177
variable.other.class.jsx#ff5177
variable.other.class.ts#ff5177
variable.other.class.tsx#ff5177
constant.other.object.key.js#FF335F
constant.other.object.key.jsx#FF335F
constant.other.object.key.ts#FF6F8F
constant.other.object.key.tsx#FF426B
entity.name.function.method#ff5177
string.quoted.single.js#ff5177
string.quoted.single.jsx#FF6083
string.quoted.single.ts#ff5177
string.quoted.single.tsx#ff5177
support.type.property-name.json#FF2454
variable.other.property.js#ff5177
variable.other.property.jsx#FF7E9A
variable.other.property.ts#FF426B
variable.other.property.tsx#FF426B
entity.name.class#ff5177underline
comment.block.documentation#BF6E53
comment.line.double-slash#b76144
constant.language.null.js#b76144
constant.language.null.jsx#C2755B
constant.language.null.ts#b76144
constant.language.null.tsx#AF5D41
entity.name.type#BF6E53
entity.other.inherited-class#AF5D41
markup.heading.markdown#BC674A
meta.brace.round.js#AF5D41
meta.brace.round.jsx#AF5D41
meta.brace.round.ts#b76144
meta.brace.round.tsx#AF5D41
entity.name.function#b76144underline
meta.tag.attributes.js#BC674A
meta.tag.attributes.jsx#b76144
meta.tag.attributes.ts#AF5D41
meta.tag.attributes.tsx#b76144
punctuation.accessor.js#b76144
punctuation.accessor.jsx#BF6E53
punctuation.accessor.ts#b76144
punctuation.accessor.tsx#b76144
punctuation.separator.comma.js#b76144
punctuation.separator.comma.jsx#A7583E
punctuation.separator.comma.ts#b76144
punctuation.separator.comma.tsx#b76144
source.js#AF5D41
source.jsx#b76144
source.ts#AF5D41
source.tsx#AF5D41
storage.modifier.async.js#AF5D41
storage.modifier.async.jsx#b76144
storage.modifier.async.ts#b76144
storage.modifier.async.tsx#AF5D41
support.class.builtin.js#A7583E
support.class.builtin.jsx#b76144
support.class.builtin.ts#b76144
support.class.builtin.tsx#b76144
support.type.primitive.js#BC674A
support.type.primitive.jsx#BC674A
support.type.primitive.ts#AF5D41
support.type.primitive.tsx#BF6E53
support.variable.property.js#AF5D41
support.variable.property.jsx#AF5D41
support.variable.property.ts#b76144
support.variable.property.tsx#BC674A
variable#b76144
variable.other.object.js#b76144
variable.other.object.jsx#AF5D41
variable.other.object.ts#b76144
variable.other.object.tsx#b76144
variable.other.readwrite#AF5D41
variable.other.readwrite.js#BC674A
variable.other.readwrite.jsx#b76144
variable.other.readwrite.ts#A7583E
variable.other.readwrite.tsx#b76144
constant.character#0068a8
constant.language.boolean#0068a8
entity.name.tag#0063A0underline
keyword#0063A0
markup.italic#0068a8
punctuation.accessor.js#0063A0
punctuation.accessor.jsx#0068a8
punctuation.accessor.ts#0068a8
punctuation.accessor.tsx#006DB0
punctuation.separator.key-value.js#0068a8
punctuation.separator.key-value.jsx#0071B7
punctuation.separator.key-value.ts#006DB0
punctuation.separator.key-value.tsx#0068a8
storage.modifier.js#0071B7
storage.modifier.jsx#0068a8
storage.modifier.ts#0071B7
storage.modifier.tsx#006DB0
storage.type#0068a8
string.template#006DB0
support.constant#0068a8
support.function.dom.js#005F99
support.function.dom.jsx#0068a8
support.function.dom.ts#006DB0
support.function.dom.tsx#0068a8
support.variable.property.js#0068a8
support.variable.property.jsx#0068a8
support.variable.property.ts#0068a8
support.variable.property.tsx#0063A0
variable.language.constructor#0068a8underline
variable.language.this#0063A0
Niketa Theme Light Old by selfrefactor - VS Code Theme