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#0f1214
  • activityBarBadge.background#007acc
  • editor.background#0f1214
  • editor.foreground#eeffff
  • editorGroup.border#0f1214
  • editorGroup.dropBackground#0f1214
  • editorGroupHeader.noTabsBackground#0f1214
  • editorGroupHeader.tabsBackground#0f1214
  • editorGroupHeader.tabsBorder#1d2224
  • editorGutter.addedBackground#0f1214
  • editorGutter.deletedBackground#0f1214
  • editorGutter.modifiedBackground#0f1214
  • foreground#ffffff
  • selection.background#0f1214
  • sideBar.background#0f1214
  • sideBar.border#1a1d24
  • sideBar.dropBackground#ffffff00
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#0f1214
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#1d2224
  • statusBarItem.remoteBackground#5376b5
  • tab.activeBackground#0f1214
  • tab.activeBorder#5376b5
  • tab.activeForeground#ffffff
  • tab.border#0f1214
  • tab.hoverBackground#1d2224
  • tab.hoverBorder#364d78
  • tab.inactiveBackground#0f1214
  • tab.inactiveForeground#ffffff
  • tab.unfocusedActiveForeground#ffffff
  • tab.unfocusedHoverBackground#1d2224
  • tab.unfocusedHoverBorder#0f1214
  • titleBar.activeBackground#0f1214

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.other.constant.ts, variable.other.object.ts, variable.other.readwrite.alias.ts, variable.other.property.ts, meta.function-call.ts, support.class.promise.ts, variable.other.enummember.ts, entity.other.inherited-class.ts#ffffff
support.type.primitive.ts, string.template.ts, keyword.control.conditional.ts, keyword.control.export.ts, keyword.control.flow.ts, storage.modifier.async.ts, variable.language.this.ts, storage.modifier.ts, keyword.operator.new.ts#c392a9bold
entity.name.function.ts, keyword.control.import.ts#80d0d0
constant.language.ts, constant.numeric.decimal.ts, constant.language.boolean.true.ts, constant.language.boolean.false.ts#c37748
storage.type.ts, storage.modifier.ts#e3d16dbold
string.quoted.double.ts#bdd86a
#ffffff
keyword.control.export.js, keyword.operator.new.js, variable.language.this.js, keyword.control.flow.js, keyword.control.loop.js, keyword.control.conditional.js, keyword.operator.expression.instanceof.js#c392a9bold
keyword.control.import.js, entity.name.function.js#80d0d0
constant.numeric.decimal.js#c37748
storage.type.class.js, storage.type.js, storage.type.function.js#e3d16dbold
string.quoted.double.js, storage.modifier.js#bdd86a
#ffffff
keyword.control.wgsl, keyword.other.fn.wgsl#c392a9bold
entity.name.function.wgsl#80d0d0
constant.numeric.decimal.wgsl#c37748
storage.type.wgsl#e3d16dbold
entity.name.attribute.wgsl#bdd86a
#ffffff
entity.other.attribute-name.css#c392a9
entity.other.attribute-name.class.css#80d0d0
entity.other.attribute-name.id.css#5db0dd
constant.numeric.css, meta.property-value.css#c37748
support.type.property-name.css#e3d16d
string.quoted.double.css#bdd86a
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#bd8bdd
#ffffff
entity.other.attribute-name.html#c392a9
#80d0d0
#c37748
entity.name.tag.html#e3d16d
string.quoted.double.html#bdd86a
#bd8bdd
NVB theme by nilsblix06 - VS Code Theme