Skip to main content
CodingTheme

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#2A324B
  • activityBar.foreground#FFCC00
  • activityBar.inactiveForeground#ffffff30
  • activityBarBadge.background#FFCC00
  • activityBarBadge.foreground#303956
  • badge.background#FFCC00
  • badge.foreground#303956
  • button.background#FFCC00
  • button.foreground#242B40
  • debugExceptionWidget.background#303956
  • debugExceptionWidget.border#FF5C57
  • debugToolBar.border#E9EAEB00
  • diffEditor.insertedTextBackground#B3FF6324
  • diffEditor.removedTextBackground#FFAEAC44
  • dropdown.background#303956
  • dropdown.border#E9EAEB00
  • editor.background#2A324B
  • editor.findMatchBackground#FFCC006A
  • editor.findMatchHighlightBackground#FFCC002A
  • editor.findRangeHighlightBackground#F5B90011
  • editor.focusedStackFrameHighlightBackground#B3FF6322
  • editor.foldBackground#47506B
  • editor.foreground#F3F4F5
  • editor.hoverHighlightBackground#FFCC0018
  • editor.lineHighlightBackground#303956
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#F5B90033
  • editor.selectionBackground#FFCC0022
  • editor.snippetTabstopHighlightBackground#ADB1C23A
  • editor.stackFrameHighlightBackground#F5B90033
  • editor.wordHighlightBackground#ADB1C23A
  • editorBracketMatch.background#47506B
  • editorBracketMatch.border#47506B
  • editorError.foreground#FF5C56
  • editorGroup.emptyBackground#2A324F
  • editorGroupHeader.tabsBackground#242B40
  • editorGutter.addedBackground#B3FF63
  • editorGutter.deletedBackground#FF5C57
  • editorGutter.modifiedBackground#00A39FAA
  • editorLineNumber.activeForeground#FFCC00
  • editorLineNumber.foreground#9194A2aa
  • editorLink.activeForeground#ffd000
  • editorOverviewRuler.addedForeground#B3FF63
  • editorOverviewRuler.deletedForeground#FF5C57
  • editorOverviewRuler.errorForeground#FF5C56
  • editorOverviewRuler.findMatchForeground#04d1bcAA
  • editorOverviewRuler.modifiedForeground#00A39FAA
  • editorOverviewRuler.warningForeground#FFCC00
  • editorOverviewRuler.wordHighlightForeground#ADB1C288
  • editorOverviewRuler.wordHighlightStrongForeground#35CF68
  • editorWarning.foreground#FFCC00
  • editorWhitespace.foreground#ADB1C255
  • extensionButton.prominentBackground#FFCC00
  • extensionButton.prominentHoverBackground#FFCC0070
  • focusBorder#FFCC00
  • foreground#bebebe
  • gitDecoration.modifiedResourceForeground#5dd9ffaa
  • gitDecoration.untrackedResourceForeground#B3FF63aa
  • input.background#303956
  • input.border#E9EAEB00
  • input.foreground#f3f4f5a9
  • input.placeholderForeground#f3f4f550
  • list.activeSelectionBackground#FFCC0033
  • list.activeSelectionForeground#FFCC00
  • list.errorForeground#FF5C56
  • list.focusBackground#FFCC0033
  • list.focusForeground#FFCC00
  • list.highlightForeground#FFCC00
  • list.hoverBackground#303956
  • list.inactiveSelectionBackground#FFCC0033
  • list.inactiveSelectionForeground#FFCC00
  • list.warningForeground#B38700
  • menu.background#242b40
  • menu.selectionBackground#303956
  • menu.selectionForeground#ffd000
  • menubar.selectionBackground#303956
  • menubar.selectionForeground#ffd000
  • merge.currentContentBackground#35CF6833
  • merge.currentHeaderBackground#35CF6866
  • merge.incomingContentBackground#14B1FF33
  • merge.incomingHeaderBackground#14B1FF77
  • notifications.background#2A324B
  • notifications.foreground#FFCC00
  • panel.background#242b40
  • panel.border#00000000
  • panelTitle.activeBorder#FFCC00
  • panelTitle.activeForeground#f3f4f5
  • peekView.border#B3FF63
  • peekViewEditor.background#14B1FF08
  • peekViewEditor.matchHighlightBackground#F5B90088
  • peekViewEditor.matchHighlightBorder#F5B90000
  • peekViewResult.matchHighlightBackground#F5B90088
  • peekViewResult.selectionBackground#B3FF63
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#B3FF6311
  • pickerGroup.foreground#FFCC00
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#47506B80
  • scrollbarSlider.background#47506B80
  • scrollbarSlider.hoverBackground#47506B80
  • selection.background#FFCC0044
  • settings.modifiedItemIndicator#B3FF63
  • sideBar.background#242B40
  • sideBar.border#DEDFE000
  • sideBar.foreground#ffffffb0
  • sideBarSectionHeader.background#303956
  • sideBarSectionHeader.border#DEDFE000
  • sideBarSectionHeader.foreground#ffffffe0
  • statusBar.background#242B40
  • statusBar.border#00000000
  • statusBar.debuggingBackground#FFCC00bb
  • statusBar.debuggingBorder#00A39F00
  • statusBar.debuggingForeground#303956
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#47506B
  • statusBar.noFolderBorder#00000000
  • statusBar.noFolderForeground#2A324B
  • statusBarItem.remoteBackground#FFCC00
  • tab.activeBorderTop#FFCC00
  • tab.border#ECECEC00
  • tab.inactiveBackground#242B40
  • tab.inactiveForeground#f3f4f560
  • terminal.ansiBlack#565869
  • terminal.ansiBlue#5DD9FF
  • terminal.ansiBrightBlack#75798F
  • terminal.ansiBrightBlue#14B1FF
  • terminal.ansiBrightCyan#04d1bc
  • terminal.ansiBrightGreen#B3FF63
  • terminal.ansiBrightMagenta#FF94D2
  • terminal.ansiBrightRed#FFAEAC
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F5B900
  • terminal.ansiCyan#04d1bc
  • terminal.ansiGreen#2DAE58
  • terminal.ansiMagenta#FF577F
  • terminal.ansiRed#FF577F
  • terminal.ansiWhite#FAFBF9
  • terminal.ansiYellow#FFCC00
  • textLink.activeForeground#FFCC00
  • textLink.foreground#FFCC00
  • titleBar.activeBackground#242b40
  • titleBar.activeForeground#e2e6e9
  • titleBar.inactiveBackground#242b40
  • titleBar.inactiveForeground#e2e6e94d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid.illegal#FF5C56
meta.object-literal.key, meta.object-literal.key constant.character.escape, meta.object-literal string, meta.object-literal string constant.character.escape, support.type.property-name, support.type.property-name constant.character.escape#B3FF63
keyword, storage, meta.class storage.type, keyword.operator.expression.import, keyword.operator.new#FF577Fitalic bold
keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignmentbold
support.type, meta.type.annotation entity.name.type, new.expr meta.type.parameters entity.name.type, storage.type.primitive, storage.type.built-in.primitive, meta.function.parameter storage.type#B3FF63bold
storage.type.annotation#ffd000
keyword.other.unit#FF5C57
constant.language, support.constant, variable.language#5DD9FF
variable, support.variable#f3f4f5
variable.language.this#B3FF63italic bold
entity.name.function, support.function#FFCC00bold
entity.name.function.decorator#5dd9ffbold
meta.class entity.name.type, new.expr entity.name.type, entity.other.inherited-class, support.class#FFCC00
keyword.preprocessor.pragma, keyword.control.directive.include, keyword.other.preprocessor#5dd9ffbold
entity.name.exception#FF5C56
entity.name.section
constant.numeric#FF5C57
constant, constant.character#B3FF63
string#ffd000
string#ffd000
constant.character.escape#F5B900
string.regexp, string.regexp constant.character.escape#FFCC00
string.regexp punctuation#ffffff
string.regexp keyword, string.regexp keyword.control, string.regexp constant#FF577Fbold
string.regexp keyword.other#fc2666
constant.other.symbol#ffd000
comment, punctuation.definition.comment#7D808Citalic
comment.block.preprocessor#7D808C
comment.block.documentation entity.name.type#B3FF63
comment.block.documentation storage, comment.block.documentation keyword.other, meta.class comment.block.documentation storage.type#7D808C
comment.block.documentation variable#ffd000
punctuation#ADB1C2
keyword.operator, keyword.other.arrow, keyword.control.@#ADB1C2
meta.tag.metadata.doctype.html entity.name.tag, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#9194A2
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#ADB1C2
entity.name.tag#FFCC00
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#B3FF63
constant.character.entity, punctuation.definition.entity#FF577F
meta.selector, meta.selector entity, meta.selector entity punctuation, source.css entity.name.tag#FFCC00
source.css variable#FFCC00italic
punctuation.definition.entity.css#FFCC00
source.css meta.property-name, source.css support.type.property-name#f3f4f5
source.css support.type.vendored.property-name#f3f4f5AA
meta.property-value, support.constant.property-value#FFCC00
source.css support.constant#B3FF63italic
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#FF577F
source.css support.function#B3FF63italic
keyword.other.important#FFCC00
source.css.scss entity.other.attribute-name.class.css, source.css.scss entity.other.attribute-name.id.css#FF577F
source.css.less entity.other.attribute-name.class.css#FF577F
source.stylus meta.brace.curly.css#ADB1C2
source.stylus entity.other.attribute-name.class, source.stylus entity.other.attribute-name.id, source.stylus entity.name.tag#FF577Fbold
source.stylus support.type.property-name#f3f4f5
source.stylus variable#5dd9ffbold
markup.changed#888888
markup.deleted#888888
markup.italicitalic
markup.error#FF5C56
markup.inserted#888888
meta.link#ffd000
string.other.link.title.markdown#B3FF63
markup.output, markup.raw#999999
markup.prompt#999999
markup.heading#B3FF63
markup.boldbold
markup.traceback#FF5C56
markup.underlineunderline
markup.quote#777985
markup.bold, markup.italic#FFCC00
markup.inline.raw#FF577Fbold
meta.brace.round, meta.brace.square, storage.type.function.arrow#ADB1C2
support.function.js#FFCC00bold
string.regexp.js#FFCC00
variable.language.super, support.type.object.module.js#FF577Fbold
meta.jsx.children#ffffff
entity.name.tag.yaml#5dd9ffbold
variable.other.alias.yaml#B3FF63
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#75798F
meta.use.php entity.other.alias.php#FFCC00
source.php support.function.construct, source.php support.function.var#5dd9ffbold
storage.modifier.extends.php, source.php keyword.other, storage.modifier.php#FF577Fbold
meta.class.body.php storage.type.php#FF577Fbold
storage.type.php, meta.class.body.php meta.function-call.php storage.type.php, meta.class.body.php meta.function.php storage.type.php#B3FF63
source.php keyword.other.DML#D94E4A
source.sql.embedded.php keyword.operator#B3FF63
source.ini keyword, source.toml keyword, source.env variable#5dd9ffbold
source.ini entity.name.section, source.toml entity.other.attribute-name#FF577Fbold
source.go storage.type#B3FF63
keyword.import.go, keyword.package.go#FF5C56
source.reason variable.language string#f3f4f5
source.reason support.type, source.reason constant.language, source.reason constant.language constant.numeric, source.reason support.type string.regexp#B3FF63
source.reason keyword.operator keyword.control, source.reason keyword.control.less, source.reason keyword.control.flow#ADB1C2
source.reason string.regexp#ffd000
source.reason support.property-value#5dd9ffbold
source.rust support.function.core.rust#5dd9ffbold
source.rust storage.type.core.rust, source.rust storage.class.std#B3FF63
source.rust entity.name.type.rust#FFCC00
storage.type.function.coffee#ADB1C2
keyword.type.cs, storage.type.cs#B3FF63
entity.name.type.namespace.cs#FFCC00
meta.diff.header#5dd9ffbold
markup.inserted.diff#B3FF63
markup.deleted.diff#FF5C56
meta.diff.range, meta.diff.index, meta.separator#B3FF63
source.makefile variable#5dd9ffbold
keyword.control.protocol-specification.objc#FF577Fbold
meta.parens storage.type.objc, meta.return-type.objc support.class, meta.return-type.objc storage.type.objc#B3FF63
source.sql keyword#5dd9ffbold
keyword.other.special-method.dockerfile#B3FF63
constant.other.symbol.elixir#5dd9ffbold
storage.type.elm, support.module.elm#FFCC00
source.elm keyword.other#ADB1C2
source.erlang entity.name.type.class#FFCC00
variable.other.field.erlang#5dd9ffbold
source.erlang constant.other.symbol#B3FF63
storage.type.haskell#B3FF63
meta.declaration.class.haskell storage.type.haskell, meta.declaration.instance.haskell storage.type.haskell#FFCC00
meta.preprocessor.haskell#75798F
source.haskell keyword.control#FF577Fbold
source.ocaml markup.underline
source.ocaml punctuation.definition.tag emphasis, source.ocaml entity.name.class constant.numeric, source.ocaml support.type#FF577Fbold
source.ocaml constant.numeric entity.other.attribute-name#FFCC00
source.ocaml comment meta.separator#7D808C
source.ocaml support.type strong, source.ocaml keyword.control strong#ADB1C2
source.ocaml support.constant.property-value#5dd9ffbold
source.scala entity.name.class#FFCC00
storage.type.scala#B3FF63
variable.parameter.scala#5dd9ffbold
meta.bracket.scala, meta.colon.scala#ADB1C2
meta.metadata.simple.clojure#ADB1C2
meta.metadata.simple.clojure meta.symbol#FFCC00
source.r keyword.other#ADB1C2
source.svelte meta.block.ts entity.name.label#5dd9ffbold
keyword.operator.word.applescript#FF577Fbold
meta.function-call.livescript#B3FF63
variable.language.self.lua#FFCC00
entity.name.type.class.swift, meta.inheritance-clause.swift, meta.import.swift entity.name.type#FFCC00
source.swift punctuation.section.embedded#B38700
variable.parameter.function.swift entity.name.function.swift#f3f4f5
meta.function-call.twig#f3f4f5
string.unquoted.tag-string.django#f3f4f5
entity.tag.tagbraces.django, entity.tag.filter-pipe.django#ADB1C2
meta.section.attributes.haml constant.language, meta.section.attributes.plain.haml constant.other.symbol#FF8380
meta.prolog.haml#9194A2
support.constant.handlebars#ADB1C2
text.log log.constant#ffd000
source.c string constant.other.placeholder, source.cpp string constant.other.placeholder#B38700
constant.other.key.groovy#5dd9ffbold
storage.type.groovy#FFCC00
meta.definition.variable.groovy storage.type.groovy#B3FF63
storage.modifier.import.groovy#ffd000
entity.other.attribute-name.class.pug, entity.other.attribute-name.id.pug#FFCC00
constant.name.attribute.tag.pug#ADB1C2
entity.name.type.wasm#B3FF63

Shiki preview

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

Loading...

Nanowise Galaxy by nanowise - VS Code Theme