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#000C18
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#F8FAFD
  • button.background#528bff
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#000C18
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.lineHighlightBackground#00050a
  • editor.selectionBackground#373063
  • editor.selectionHighlightBackground#ADD6FF26
  • editorCursor.foreground#f8f8f0
  • editorError.foreground#c24038
  • editorGroup.border#00050a
  • editorGroup.emptyBackground#0b131c
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground#000C18
  • editorIndentGuide.background#404040
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorUnnecessaryCode.opacity#000000c0
  • editorWhitespace.foreground#484a50
  • editorWidget.background#21252B
  • input.background#1d1f23
  • input.placeholderForeground#A6A6A6
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.activeSelectionIconForeground#FFF
  • list.dropBackground#000C18
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • menu.background#252526
  • menu.foreground#CCCCCC
  • notifications.background#21252b
  • ports.iconRunningProcessForeground#369432
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#000C18
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.border#000C18
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#000000
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#383E4A
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • tab.lastPinnedBorder#000C18
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#528bff
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#abb2bf
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter, meta.parameter.object-binding-pattern, meta.parameters, meta.arrow, meta.var.expr#FD9353
variable.other.object, variable.other.readwrite#ede180
comment, string.comment#464B5D
constant.language.null#89DDFF
support.type.property-name, variable.object.property, variable.other.readwrite.js.jsx#FCF7F7
markup.bold, markup.inline.raw#FFB86C
keyword.control.switch#b473ffitalic
text.xml string, entity.name.type, meta.at-rule.extend, entity.other.keyframe-offset, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name#b6ebc4
#C792EA
keyword.operator.expression.typeof, storage.modifier.async, keyword.control.flow#b473ff
meta.brace.square, meta.brace.round, meta.array.literal, meta.var.expr, meta.jsx.children, text.html.derivative#F7F1FF
string#C3E88D
keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.export, keyword.control.default, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, meta.attribute.content#B278F5italic
support.constant.property-value.css, entity.name.type.class, entity.other.inherited-class, entity.name.type.interface, entity.other.attribute-name, entity.other.attribute-name.js.jsx, variable.language.this, keyword.operator.increment#89DDFF
keyword.operator.new#fa68b8bold
string.regexp, markup.changed, markup.inserted, support.type.primitive, entity.name.type, entity.name.tag, storage.type.interface.ts, support.type.primitive.ts, meta.type.annotation.ts, meta.field.declaration.ts, meta.interface.ts, source.ts#FF91FF
invalid.illegal.unrecognized-tag.html, variable.other.jsdoc, storage.modifier#FF91FF
punctuation.accessor#8B888F
constant.language.boolean, constant.numeric, entity.name.type#89DDFF
support.class.component.js.jsx, support.class.component.tsx#ff4559
keyword.other.unit.px.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.percentage.css#FF91FF
entity.other.attribute-name.class.css#7BD88F
punctuation.definition.parameters, punctuation.definition.block, meta.brace.round, punctuation.definition.binding-pattern.object, punctuation.terminator.statement, punctuation.section.property-list, punctuation.separator.key-value, punctuation.terminator.rule, punctuation.definition.entity.css#8B888F
punctuation.definition.string, punctuation.separator.parameter, punctuation.definition.section.case-statement, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.separator.comma#8B888F
variable.parameter, meta.parameter.object-binding-pattern, meta.parameters, meta.arrow, meta.var.expr#FD9353
variable.other.object, variable.other.readwrite#ede180
comment, string.comment#464B5D
constant.language.null#89DDFF
support.type.property-name, variable.object.property, variable.other.readwrite.js.jsx#FCF7F7
markup.bold, markup.inline.raw#FFB86C
keyword.control.switch#b473ffitalic
text.xml string, entity.name.type, meta.at-rule.extend, entity.other.keyframe-offset, meta.function-call.generic.python, meta.at-rule.extend support.constant, entity.other.attribute-name#b6ebc4
#C792EA
keyword.operator.expression.typeof, storage.modifier.async, keyword.control.flow#b473ff
meta.brace.square, meta.brace.round, meta.array.literal, meta.var.expr, meta.jsx.children, text.html.derivative#F7F1FF
string#C3E88D
keyword.control.conditional, keyword.control.loop, keyword.control.flow, keyword.control.export, keyword.control.default, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, meta.attribute.content#B278F5italic
support.constant.property-value.css, entity.name.type.class, entity.other.inherited-class, entity.name.type.interface, entity.other.attribute-name, entity.other.attribute-name.js.jsx, variable.language.this, keyword.operator.increment#89DDFF
keyword.operator.new#fa68b8bold
string.regexp, markup.changed, markup.inserted, support.type.primitive, entity.name.type, entity.name.tag, storage.type.interface.ts, support.type.primitive.ts, meta.type.annotation.ts, meta.field.declaration.ts, meta.interface.ts, source.ts#FF91FF
invalid.illegal.unrecognized-tag.html, variable.other.jsdoc, storage.modifier#FF91FF
punctuation.accessor#8B888F
constant.language.boolean, constant.numeric, entity.name.type#89DDFF
support.class.component.js.jsx, support.class.component.tsx#ff4559
keyword.other.unit.px.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.percentage.css#FF91FF
entity.other.attribute-name.class.css#7BD88F
punctuation.definition.parameters, punctuation.definition.block, meta.brace.round, punctuation.definition.binding-pattern.object, punctuation.terminator.statement, punctuation.section.property-list, punctuation.separator.key-value, punctuation.terminator.rule, punctuation.definition.entity.css#8B888F
punctuation.definition.string, punctuation.separator.parameter, punctuation.definition.section.case-statement, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.separator.comma#8B888F
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#6A9955
constant.language#569cd6
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#b5cea8
constant.regexp#646695
entity.name.tag.css#d7ba7d
entity.other.attribute-name#9cdcfe
invalid#71cca2
markup.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#ce9178
markup.changed#569cd6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#ce9178
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#569cd6
meta.preprocessor.string#ce9178
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#569cd6
storage, storage.type#b278f5
entity.name.tag.yaml, constant.character.entity.html, source.css entity.name.tag.reference, source.css entity.other.attribute-name.parent-selector, variable#ede180
support.function, entity.name.function, support.function.misc.scss, entity.other.attribute-name.js.jsx, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name#79eb95
storage.modifier, keyword.operator.noexcept#569cd6
string, meta.embedded.assembly#ce9178
string.tag#ce9178
string.value#ce9178
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569cd6
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9cdcfe
keyword#b278f5
keyword.control#b278f5
keyword.operator, storage.type.function.arrow, keyword.operator.assignment#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#569cd6
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569cd6
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#569cd6

Shiki preview

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

Loading...

Nina Theme - Coding Theme