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#f6f6f6
  • activityBar.foreground#9e9e9e
  • activityBarBadge.background#616161
  • badge.background#e0e0e0
  • badge.foreground#616161
  • button.background#757575
  • button.hoverBackground#616161
  • debugIcon.breakpointCurrentStackframeForeground#1976d2
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#d32f2f
  • debugIcon.breakpointStackframeForeground#1976d2
  • debugIcon.continueForeground#6f42c1
  • debugIcon.disconnectForeground#6f42c1
  • debugIcon.pauseForeground#6f42c1
  • debugIcon.restartForeground#1976d2
  • debugIcon.startForeground#1976d2
  • debugIcon.stepBackForeground#6f42c1
  • debugIcon.stepIntoForeground#6f42c1
  • debugIcon.stepOutForeground#6f42c1
  • debugIcon.stepOverForeground#6f42c1
  • debugIcon.stopForeground#1976d2
  • diffEditor.insertedTextBackground#b7e7a44b
  • diffEditor.removedTextBackground#e597af52
  • editor.background#ffffff
  • editor.foreground#212121
  • editor.lineHighlightBorder#f2f2f2
  • editorBracketMatch.background#e7f3ff
  • editorBracketMatch.border#c8e1ff
  • editorGroupHeader.tabsBackground#f6f6f6
  • editorGroupHeader.tabsBorder#ffffff
  • editorIndentGuide.background#eeeeee
  • editorLineNumber.activeForeground#757575
  • editorLineNumber.foreground#cccccc
  • editorSuggestWidget.background#f3f3f3
  • extensionButton.prominentBackground#000000aa
  • extensionButton.prominentHoverBackground#000000bb
  • focusBorder#d0d0d0
  • foreground#757575
  • gitDecoration.ignoredResourceForeground#aaaaaa
  • input.border#e9e9e9
  • inputOption.activeBackground#ededed
  • list.activeSelectionBackground#eeeeee
  • list.activeSelectionForeground#212121
  • list.focusBackground#dddddd
  • list.focusForeground#212121
  • list.highlightForeground#212121
  • list.inactiveSelectionBackground#e0e0e0
  • list.inactiveSelectionForeground#212121
  • panel.background#ffffff
  • panel.border#f4f4f4
  • panelTitle.activeBorder#ffffff
  • panelTitle.inactiveForeground#bdbdbd
  • peekView.border#e0e0e0
  • peekViewEditor.background#f8f8f8
  • pickerGroup.foreground#000000
  • progressBar.background#000000
  • scrollbar.shadow#ffffff
  • sideBar.background#f6f6f6
  • sideBar.border#f6f6f6
  • sideBarSectionHeader.background#eeeeee
  • sideBarTitle.foreground#999999
  • statusBar.background#f6f6f6
  • statusBar.border#f6f6f6
  • statusBar.debuggingBackground#f6f6f6
  • statusBar.foreground#7e7e7e
  • statusBar.noFolderBackground#f6f6f6
  • statusBarItem.prominentBackground#0000001a
  • statusBarItem.remoteBackground#f6f6f600
  • statusBarItem.remoteForeground#7e7e7e
  • symbolIcon.classForeground#dd8500
  • symbolIcon.constructorForeground#6f42c1
  • symbolIcon.enumeratorForeground#dd8500
  • symbolIcon.enumeratorMemberForeground#1976d2
  • symbolIcon.eventForeground#dd8500
  • symbolIcon.fieldForeground#1976d2
  • symbolIcon.functionForeground#6f42c1
  • symbolIcon.interfaceForeground#1976d2
  • symbolIcon.methodForeground#6f42c1
  • symbolIcon.variableForeground#1976d2
  • tab.activeBorder#ffffff
  • tab.activeForeground#424242
  • tab.border#f6f6f6
  • tab.inactiveBackground#f6f6f6
  • tab.inactiveForeground#bdbdbd
  • tab.unfocusedActiveBorder#ffffff
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#e0e0e0
  • terminal.ansiBrightBlack#a1a1a1
  • terminal.ansiBrightBlue#6871ff
  • terminal.ansiBrightCyan#57d9ad
  • terminal.ansiBrightGreen#a3d900
  • terminal.ansiBrightMagenta#a37acc
  • terminal.ansiBrightRed#d6656a
  • terminal.ansiBrightWhite#7e7e7e
  • terminal.ansiBrightYellow#e7c547
  • terminal.ansiCyan#4dbf99
  • terminal.ansiGreen#77cc00
  • terminal.ansiMagenta#9966cc
  • terminal.ansiRed#d32f2f
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f29718
  • terminal.background#ffffff
  • textLink.activeForeground#000000
  • textLink.foreground#000000
  • titleBar.activeBackground#f6f6f6
  • titleBar.border#ffffff00
  • titleBar.inactiveBackground#f6f6f6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#24292E
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown#1976D2underline
string, markup.fenced_code, markup.inline#2B5581
comment, string.quoted.docstring.multi#C2C3C5
constant.numeric, constant.language, constant.other.placeholder, constant.character.format.placeholder, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support#1976D2
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, entity.name.tag.yaml, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression#D32F2F
variable.parameter.function#FF9800
support.function, entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#6F42C1
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#22863A
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
strong, markup.heading.markdown, markup.bold.markdown#6F42C1
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#212121
markup.underline.link, punctuation.definition.metadata.markdown#22863A
beginning.punctuation.definition.list.markdown#6F42C1
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, string.other.link.title.markdown, string.other.link.description.markdown#D32F2F
ref.license#CCCCCC
ref.snippet#606060
ref.matchtext#000000
keyword, storage.modifier, storage.type#5C55AA
entity.name.type, support.type#6A38C7
string, string.quoted#238FE7
entity.name.tag, meta.tag, variable#D22D3D
support.class, support.function, entity.name.function, entity.name.type.class#CD3746
entity.other.attribute-name, support.type.property-name.json#9D48A8
meta.jsx.children#4E4C67
variable.other#404059

Shiki preview

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

Loading...

Bandung Ice - Coding Theme