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#070506
  • activityBar.border#836f7922
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#6c6775
  • activityBarBadge.background#b1b6f0
  • activityBarBadge.foreground#070506
  • badge.background#b1b6f0
  • badge.foreground#070506
  • button.background#979fec25
  • button.foreground#ffffff
  • button.hoverBackground#979fec40
  • button.separator#979fec20
  • descriptionForeground#cac4f5
  • editor.background#070506
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#ffffff06
  • editor.selectionBackground#979fec40
  • editorBracketHighlight.foreground1#648ed0
  • editorBracketHighlight.foreground2#cd9dcf
  • editorBracketHighlight.foreground3#7c93dd
  • editorCursor.foreground#ffffff
  • editorGroup.border#836f7922
  • editorGroupHeader.tabsBackground#070506
  • editorGroupHeader.tabsBorder#836f7922
  • editorLineNumber.activeForeground#e4e6fb
  • editorLineNumber.foreground#6c6775
  • focusBorder#979fec
  • foreground#e1dff6
  • input.background#0c0a0b
  • input.border#836f7922
  • input.foreground#ffffff
  • input.placeholderForeground#6c6775
  • list.activeSelectionBackground#979fec35
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#979fec28
  • list.highlightForeground#979fec
  • list.hoverBackground#ffffff06
  • menu.background#070506
  • menu.border#836f7922
  • menu.foreground#ffffff
  • menu.selectionBackground#979fec35
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#836f7922
  • panel.border#836f7922
  • quickInput.background#070506
  • quickInput.foreground#ffffff
  • quickInputList.focusBackground#979fec28
  • quickInputList.focusForeground#ffffff
  • selection.background#979fec80
  • sideBar.background#080808
  • sideBar.border#836f7922
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#070506
  • sideBarSectionHeader.border#836f7911
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#e4e6fb
  • statusBar.background#070506
  • statusBar.border#836f7922
  • statusBar.debuggingBackground#b37580
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#070506
  • statusBar.noFolderBorder#836f7922
  • tab.activeBackground#070506
  • tab.activeBorderTop#979fec
  • tab.activeForeground#ffffff
  • tab.border#836f7911
  • tab.inactiveBackground#070506
  • tab.inactiveForeground#6c6775
  • terminal.ansiBlack#070506
  • terminal.ansiBlue#979fec
  • terminal.ansiBrightBlack#836f79
  • terminal.ansiBrightBlue#e4e6fb
  • terminal.ansiBrightCyan#c3cef2
  • terminal.ansiBrightGreen#a7c1e8
  • terminal.ansiBrightMagenta#eddaee
  • terminal.ansiBrightRed#d5aeb5
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f6dbe6
  • terminal.ansiCyan#7c93dd
  • terminal.ansiGreen#648ed0
  • terminal.ansiMagenta#cd9dcf
  • terminal.ansiRed#b37580
  • terminal.ansiWhite#d9b6fd
  • terminal.ansiYellow#e095b5
  • terminal.background#0c0a0b
  • terminal.foreground#ffffff
  • textLink.activeForeground#b1b6f0
  • textLink.foreground#9ba1eb
  • textPreformat.foreground#d9b6fd
  • titleBar.activeBackground#070506
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#070506
  • walkThrough.embeddedEditorBackground#0c0a0b
  • welcomePage.background#070506
  • welcomePage.progress.background#979fec
  • welcomePage.tileBackground#ffffff04
  • welcomePage.tileHoverBackground#ffffff0a
  • widget.shadow#000000aa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6c6775italic
string, string.quoted, string.quoted.single, string.quoted.double, string.template#b1b6f0
constant.numeric, constant.numeric.integer.decimal.python, constant.numeric.float.python, constant.language.boolean, constant.language.java, constant.language.python#dcd9d6
constant.language, variable.other.constant#c3cef2
keyword.operator#e095b5
entity.name.type, entity.name.type.class, entity.name.type.interface#d9b6fd
entity.name.function, entity.name.function.java, entity.name.function.member, meta.method-call.java, meta.function-call, meta.method.identifier.java, meta.definition.method.java, support.function, variable.function#8AA9E6
variable.other.object, support.variable.java, variable.other.object.java#c3cef2
variable, variable.other, variable.parameter, variable.other.readwrite, variable.other.local, variable.other.property, variable.other.object.property, variable.other.member, meta.definition.variable.java#E1DFF6
variable.language.java, variable.language.this, variable.language.super, variable.language.self#e095b5
support.type.property-name.json, meta.object-literal.key#7c93dd
punctuation, punctuation.definition.parameters, punctuation.accessor#dcd9d6
storage.type, keyword.declaration#cd9dcf
storage.modifier#e095b5
keyword.control#e095b5
keyword.other.package, keyword.other.import, storage.modifier.package, storage.modifier.import, keyword.other.directive, keyword.control.import, keyword.control.from, keyword.other.package.java, keyword.other.import.java#cd9dcf
variable.other.packaged, entity.name.namespace, storage.modifier.import.java, entity.name.scope-resolution, variable.other.legal#7c93dd
punctuation.definition.string, punctuation.definition.string.begin.python, punctuation.definition.string.end.python, punctuation.definition.string.begin.java, punctuation.definition.string.end.java#9ca0e1
entity.name.section.markdown, markup.heading.markdown#cd9dcfbold
meta.paragraph.markdown#c3cef2
storage.type.function.python#e095b5
support.function.magic.python#8AA9E6
meta.function-call.generic.python, meta.function-call.python#cd9dcf
variable.other.object.property, support.type, support.class, variable.other.property, meta.method-call.java storage.type.java, meta.class.body.java storage.type.java#E1DFF6
Shinjuku Midnight by davu - VS Code Theme