Skip to main content
CodingTheme

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#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#544
  • 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
  • git.color.modified#4d0e0b
  • 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#fff
  • 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#36444d
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#36444d
comment.line.double-slash#36444d
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

Shiki preview

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

Loading...

Niketa Future Theme Light by selfrefactor - VS Code Theme