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#7D7D7D
  • activityBarBadge.background#383838
  • badge.background#383838
  • badge.foreground#C1C1C1
  • button.background#eeeeee
  • debugIcon.breakpointCurrentStackframeForeground#0096FF
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#FF7A84
  • debugIcon.breakpointStackframeForeground#0096FF
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#FF7A84
  • debugIcon.disconnectForeground#FF7A84
  • debugIcon.pauseForeground#FF7A84
  • debugIcon.restartForeground#0096FF
  • debugIcon.startForeground#0096FF
  • debugIcon.stepBackForeground#FF7A84
  • debugIcon.stepIntoForeground#FF7A84
  • debugIcon.stepOutForeground#FF7A84
  • debugIcon.stepOverForeground#FF7A84
  • debugIcon.stopForeground#0096FF
  • diffEditor.insertedTextBackground#3a632a4b
  • diffEditor.removedTextBackground#88063852
  • editor.background#ffffff
  • editor.lineHighlightBorder#ffffff
  • editorBracketHighlight.foreground1#999999
  • editorBracketHighlight.foreground2#999999
  • editorBracketHighlight.foreground3#999999
  • editorGroupHeader.tabsBackground#f6f6f6
  • editorGroupHeader.tabsBorder#f6f6f6
  • editorIndentGuide.activeBackground#cccccc
  • editorIndentGuide.background#eeeeee
  • editorLineNumber.activeForeground#888888
  • editorLineNumber.foreground#dddddd
  • editorRuler.foreground#eeeeee
  • editorSuggestWidget.background#f6f6f6
  • focusBorder#eeeeee
  • foreground#888888
  • gitDecoration.ignoredResourceForeground#444444
  • gitDecoration.modifiedResourceForeground#00ba4e
  • input.background#eeeeee
  • input.foreground#E0E0E0
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#eeeeee
  • list.activeSelectionForeground#202020
  • list.focusBackground#292929
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#ffffff
  • list.hoverForeground#9E9E9E
  • list.inactiveSelectionBackground#eeeeee
  • list.inactiveSelectionForeground#202020
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#FAFAFA
  • panelTitle.inactiveForeground#484848
  • peekView.border#444444
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#FAFAFA
  • scrollbar.shadow#ffffff
  • sideBar.background#f6f6f6
  • sideBarSectionHeader.background#ffffff
  • statusBar.background#f6f6f6
  • statusBar.debuggingBackground#f6f6f6
  • statusBar.foreground#7E7E7E
  • statusBar.noFolderBackground#f6f6f6
  • statusBarItem.prominentBackground#fafafa1a
  • statusBarItem.remoteBackground#f6f6f600
  • statusBarItem.remoteForeground#7E7E7E
  • symbolIcon.classForeground#FF9800
  • symbolIcon.constructorForeground#b392f0
  • symbolIcon.enumeratorForeground#FF9800
  • symbolIcon.enumeratorMemberForeground#0096FF
  • symbolIcon.eventForeground#FF9800
  • symbolIcon.fieldForeground#0096FF
  • symbolIcon.functionForeground#b392f0
  • symbolIcon.interfaceForeground#0096FF
  • symbolIcon.methodForeground#b392f0
  • symbolIcon.variableForeground#0096FF
  • tab.activeBorder#ffffff
  • tab.activeForeground#202020
  • tab.border#f6f6f6
  • tab.inactiveBackground#f6f6f6
  • tab.inactiveForeground#666666
  • terminal.ansiBrightBlack#5c5c5c
  • textLink.activeForeground#fafafa
  • textLink.foreground#CCC
  • titleBar.activeBackground#f6f6f6
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#b392f0
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#b392f0
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#FF7A84bold
markup.italic.markdownitalic
meta.link.inline.markdown#1976D2underline
string, markup.fenced_code, markup.inline#9db1c5
comment, string.quoted.docstring.multi#999999
constant.language, variable.language.this, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#0096FF
constant.numeric, constant.other.placeholder, constant.character.format.placeholder, meta.property-value, keyword.other.unit, keyword.other.template, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name.json#999999
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.definition.template-expression, entity.name.tag, keyword.other.template, markup.underline.link, punctuation.definition.metadata.markdown#7264b2
variable.parameter.function#FF9800
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#b392f0
string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml#00a043
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments, meta.object-literal.key#999999
beginning.punctuation.definition.list.markdown#FF7A84
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#0096FF
keyword.operator.assignment, keyword.operator.type.annotation, variable.other.constant, variable.other.readwrite, variable.other.object#505050
entity.name.function#ffd700
entity.name.function, entity.other.attribute-name#0096FF
storage.type.function.arrow#505050
punctuation.definition.comment.begin, comment.block#666666
Carlos Alberto Theme by Carlos Alberto da Silva - VS Code Theme