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.activeBorder#ffffff
  • activityBar.background#ff69b4
  • activityBar.dropBorder#ffffff
  • activityBar.foreground#FFF
  • activityBar.inactiveForeground#edcfff
  • activityBarBadge.background#cc5ff7
  • activityBarBadge.foreground#ffffff
  • badge.background#ffdded
  • badge.foreground#B700FF
  • breadcrumb.activeSelectionForeground#ff1493
  • breadcrumb.background#fff0fd
  • breadcrumb.focusForeground#23D02C
  • breadcrumb.foreground#dc87d3
  • breadcrumbPicker.background#b16464
  • button.background#ff69b4
  • button.foreground#fffafa
  • button.hoverBackground#ee469a
  • button.secondaryBackground#ee469a
  • button.secondaryForeground#fffeff
  • button.secondaryHoverBackground#eb2b8b
  • charts.blue#617fba
  • charts.foreground#ff69b4
  • charts.green#28982d
  • charts.lines#0f0004
  • charts.orange#ef7d6e
  • charts.purple#B700FF
  • charts.red#dc87d3
  • charts.yellow#F4AF1A
  • checkbox.background#ffdded
  • checkbox.border#7A3E9D
  • checkbox.foreground#B700FF
  • debugIcon.breakpointForeground#ff1493
  • debugIcon.continueForeground#ff1493
  • debugIcon.disconnectForeground#ff1493
  • debugIcon.pauseForeground#B700FF
  • debugIcon.restartForeground#ff1493
  • debugIcon.startForeground#ff1493
  • debugIcon.stepBackForeground#dc87d3
  • debugIcon.stepIntoForeground#dc87d3
  • debugIcon.stepOutForeground#dc87d3
  • debugIcon.stepOverForeground#dc87d3
  • debugIcon.stopForeground#ff1493
  • debugToolBar.background#f9e4f3
  • debugToolBar.border#7a3e9d
  • descriptionForeground#7A3E9D
  • diffEditor.border#f3dfed
  • diffEditor.diagonalFill#866a8226
  • diffEditor.insertedTextBackground#de73b920
  • diffEditor.insertedTextBorder#FDFDFEB0
  • diffEditor.removedTextBackground#D26A5D29
  • diffEditor.removedTextBorder#FDFDFEB0
  • dropdown.border#ff1493
  • dropdown.foreground#ff69b4
  • editor.background#fffeff
  • editor.findMatchBackground#b3dca7c9
  • editor.findMatchHighlightBackground#c6f9b6c9
  • editor.findMatchHighlightBorder#fabdccee
  • editor.foreground#077616
  • editor.lineHighlightBackground#ffedf5
  • editor.selectionBackground#EAECEA
  • editor.wordHighlightBackground#ffe3ee
  • editor.wordHighlightStrongBackground#ffe8f1
  • editor.wordHighlightStrongBorder#db79ef
  • editorBracketHighlight.foreground1#ea4b90
  • editorBracketHighlight.foreground2#db00b6
  • editorBracketHighlight.foreground3#bc00dd
  • editorBracketHighlight.foreground4#a100f2
  • editorBracketHighlight.foreground5#6a00f4
  • editorBracketHighlight.foreground6#2d00f7
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#ffe0f7da
  • editorCursor.foreground#ff7d9b
  • editorError.foreground#ff0000
  • editorGroupHeader.tabsBackground#f7d8e7
  • editorLineNumber.activeForeground#B700FF
  • editorLineNumber.foreground#ee84b6
  • editorWarning.foreground#fabc66
  • editorWidget.background#ffebfa
  • editorWidget.foreground#ff69b4
  • editorWidget.resizeBorder#ffffff42
  • errorForeground#f52f82
  • extensionBadge.remoteBackground#ff69b4
  • extensionBadge.remoteForeground#ff69b4
  • extensionButton.prominentBackground#ff69b4
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ea4b90
  • extensionIcon.preReleaseForeground#ff1493
  • extensionIcon.starForeground#ff1493
  • extensionIcon.verifiedForeground#DC87D3
  • focusBorder#b700ff
  • foreground#9b73b3
  • gitDecoration.addedResourceForeground#408c31
  • gitDecoration.conflictingResourceForeground#ffb341
  • gitDecoration.deletedResourceForeground#e8326c
  • gitDecoration.ignoredResourceForeground#AAAAAA
  • gitDecoration.modifiedResourceForeground#a471af
  • gitDecoration.stageDeletedResourceForeground#f9656a
  • gitDecoration.stageModifiedResourceForeground#1b9821
  • gitDecoration.submoduleResourceForeground#DB81CC
  • gitDecoration.untrackedResourceForeground#7db896
  • icon.foreground#B700FF
  • input.background#ffffff
  • input.border#ff1493
  • input.foreground#ff69b4
  • input.placeholderForeground#d2b2ba
  • inputOption.activeBackground#DC87D3
  • inputOption.activeBorder#b96db2
  • inputOption.activeForeground#fffcff
  • keybindingLabel.background#ffdded
  • keybindingLabel.border#B700FF
  • keybindingLabel.bottomBorder#a903ea
  • keybindingLabel.foreground#B700FF
  • list.activeSelectionBackground#FFDFE6
  • list.activeSelectionForeground#B700FF
  • list.activeSelectionIconForeground#fff
  • list.dropBackground#EFE8F0
  • list.errorForeground#d93066
  • list.filterMatchBackground#f0e8ed
  • list.hoverBackground#ffdded
  • list.hoverForeground#22ba29
  • list.inactiveSelectionBackground#ffdded
  • list.inactiveSelectionForeground#B700FF
  • list.warningForeground#22ba29
  • listFilterWidget.background#f0e8ed
  • menu.separatorBackground#f3b4bf
  • minimap.background#fdf6fca9
  • minimap.errorHighlight#ff2478d5
  • minimap.findMatchHighlight#ff24abd5
  • minimap.selectionHighlight#ff24abd5
  • minimap.warningHighlight#886CDB80
  • minimapGutter.addedBackground#ddf7d8
  • minimapGutter.deletedBackground#f672a0
  • minimapGutter.modifiedBackground#ff92f4e3
  • minimapSlider.activeBackground#f06ac16c
  • minimapSlider.background#ed28a56e
  • minimapSlider.hoverBackground#d698bd83
  • notificationCenter.border#B700FF
  • notificationCenterHeader.background#ffdded
  • notificationCenterHeader.foreground#ff1493
  • notificationLink.foreground#ff1493
  • notifications.background#ffe7f2
  • notifications.foreground#ee1388
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#B700FF
  • notificationsWarningIcon.foreground#fabc66
  • notificationToast.border#B700FF
  • panel.border#ff69b4
  • panelTitle.activeForeground#ff1493
  • panelTitle.inactiveForeground#ff69b4
  • peekViewEditor.matchHighlightBackground#ddf7d8
  • peekViewEditor.matchHighlightBorder#FF9EB5
  • peekViewResult.background#fdf8f8
  • peekViewResult.matchHighlightBackground#ddf7d8
  • pickerGroup.foreground#ff1493
  • scrollbarSlider.activeBackground#ffb2d6
  • scrollbarSlider.background#fde1ed
  • scrollbarSlider.hoverBackground#f4cbdd
  • sideBar.background#fffffe
  • sideBar.border#DC87D3
  • sideBar.foreground#ff69b4
  • sideBarSectionHeader.background#fff0fd
  • sideBarSectionHeader.border#FF9EB5
  • statusBar.background#7a3e9d
  • statusBar.debuggingBackground#DC87D3
  • statusBar.noFolderBackground#7A3E9D
  • statusBarItem.activeBackground#a04ad2
  • statusBarItem.errorBackground#e62350
  • statusBarItem.remoteBackground#7A3E9D
  • tab.activeBackground#ffb9da
  • tab.activeForeground#f10d87
  • tab.inactiveBackground#f7d8e7
  • tab.inactiveForeground#B700FF
  • terminal.ansiBlack#333
  • terminal.ansiBlue#4B83CD
  • terminal.ansiBrightBlack#444343
  • terminal.ansiBrightBlue#78b1fc
  • terminal.ansiBrightCyan#b2e6e1
  • terminal.ansiBrightGreen#58bbbd
  • terminal.ansiBrightMagenta#DB81CC
  • terminal.ansiBrightRed#e27b7b
  • terminal.ansiBrightWhite#978c94
  • terminal.ansiBrightYellow#f3d36b
  • terminal.ansiCyan#9DDBD6
  • terminal.ansiGreen#318B8C
  • terminal.ansiMagenta#888CCC
  • terminal.ansiRed#CF426F
  • terminal.ansiWhite#72696f
  • terminal.ansiYellow#ffd686
  • terminal.foreground#f680bb
  • terminal.selectionBackground#d8d8d8
  • terminalCursor.foreground#ff69b4
  • textLink.activeForeground#ae77b3e6
  • textLink.foreground#98649c
  • titleBar.activeBackground#ff69b4
  • titleBar.activeForeground#FFF
  • titleBar.inactiveBackground#fb72b6
  • titleBar.inactiveForeground#f4cdf0
  • welcomePage.progress.foreground#B700FF
  • welcomePage.tileBackground#ffecf5
  • welcomePage.tileHoverBackground#ffdded

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#a9d199
invalid.illegal#660000
keyword.operator#1cad24
storage#ff69b4
storage.type, support.type#7A3E9D
constant.language, support.constant, variable.language#ff319f
variable, support.variable#7A3E9D
entity.name.function, support.function#ff3ec8bold
entity.name.type.namespace, meta.body.function.definition.cpp#dc87d3
entity.other.inherited-class, support.class#7A3E9Dbold
entity.name.exception#f743a9
entity.name.sectionbold
constant.numeric, constant.character, keyword, constant#B700FF
text.html.derivative#258552
meta.tag.metadata#dc87d3
meta.tag.inline.a.start.html#ff69b4
constant.character.escape#f743a9
string.regexp#f743a9
constant.other.symbol#f743a9
punctuation.definition.string#eab42b
meta.embedded.block.php, string.quoted.double.cpp#088919
meta.embedded.line.php, punctuation.section.embedded, string.quoted.double.json.comments#ff1493
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
punctuation, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#23d02c
meta.tag, variable.other.property.js#ff69b4
entity.name.tag#f4abcd
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#b700ffitalic
constant.character.entity, punctuation.definition.entity#b700ffbold
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#088919
meta.property-name, support.type.property-name#7A3E9D
meta.property-value, meta.property-value constant.other, string.template.js, support.constant.property-value#ff69b4
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link.reference.markdown, meta.link.inline.markdown#dc87d3
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#ff1493
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#ff69b4
markup.list, punctuation.definition.list, punctuation.definition.quote#ff69b4
markup.bold, markup.italic#B700FF
markup.inline.raw#CF9FD3
meta.paragraph.markdown#654d74
string.other.link.description.markdown, string.other.link.title.markdown#077616
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
meta.function-call.php#f4af1a
keyword.operator.pattern.css, entity.other.attribute-name.pseudo-class.css, meta.at-rule.import.css, string.quoted.single.php, variable.other.constant.js#DC87D3

Shiki preview

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

Loading...

Rose Garden by emmavie - VS Code Theme