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#1A1A1A
  • activityBar.foreground#46ABAB
  • activityBar.inactiveForeground#7D7D7D
  • activityBarBadge.background#46ABAB
  • activityBarBadge.foreground#FDFDFD
  • badge.background#46ABAB
  • badge.foreground#FDFDFD
  • button.background#437D7D
  • button.hoverBackground#46ABAB
  • debugIcon.breakpointCurrentStackframeForeground#79b8ff
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#FF7A84
  • debugIcon.breakpointStackframeForeground#79b8ff
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#FF7A84
  • debugIcon.disconnectForeground#FF7A84
  • debugIcon.pauseForeground#FF7A84
  • debugIcon.restartForeground#79b8ff
  • debugIcon.startForeground#79b8ff
  • debugIcon.stepBackForeground#FF7A84
  • debugIcon.stepIntoForeground#FF7A84
  • debugIcon.stepOutForeground#FF7A84
  • debugIcon.stepOverForeground#FF7A84
  • debugIcon.stopForeground#79b8ff
  • diffEditor.insertedTextBackground#3a632a4b
  • diffEditor.removedTextBackground#88063852
  • editor.background#1A1A1A
  • editor.foreground#FDFDFD
  • editor.lineHighlightBorder#303030
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#1A1A1A
  • editorIndentGuide.activeBackground#383838
  • editorIndentGuide.background#2A2A2A
  • editorLineNumber.foreground#727272
  • editorRuler.foreground#2A2A2A
  • editorSuggestWidget.background#1A1A1A
  • focusBorder#444444
  • foreground#888888
  • gitDecoration.ignoredResourceForeground#444444
  • input.background#2A2A2A
  • input.foreground#E0E0E0
  • inputOption.activeBackground#3a3a3a
  • list.activeSelectionBackground#212121
  • list.activeSelectionForeground#F5F5F5
  • list.focusBackground#292929
  • list.highlightForeground#EAEAEA
  • list.hoverBackground#262626
  • list.hoverForeground#9E9E9E
  • list.inactiveSelectionBackground#212121
  • list.inactiveSelectionForeground#F5F5F5
  • panelTitle.activeBorder#1f1f1f
  • panelTitle.activeForeground#FAFAFA
  • panelTitle.inactiveForeground#484848
  • peekView.border#444
  • peekViewEditor.background#242424
  • pickerGroup.border#363636
  • pickerGroup.foreground#EAEAEA
  • progressBar.background#FAFAFA
  • scrollbar.shadow#1F1F1F
  • sideBar.background#212121
  • sideBarSectionHeader.background#202020
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#1A1A1A
  • statusBar.foreground#7E7E7E
  • statusBar.noFolderBackground#1A1A1A
  • statusBarItem.prominentBackground#fafafa1a
  • statusBarItem.remoteBackground#1A1A1A00
  • statusBarItem.remoteForeground#7E7E7E
  • symbolIcon.classForeground#dd8500
  • symbolIcon.constructorForeground#D56EC1
  • symbolIcon.enumeratorForeground#dd8500
  • symbolIcon.enumeratorMemberForeground#58AE79
  • symbolIcon.eventForeground#dd8500
  • symbolIcon.fieldForeground#58AE79
  • symbolIcon.functionForeground#D56EC1
  • symbolIcon.interfaceForeground#58AE79
  • symbolIcon.methodForeground#D56EC1
  • symbolIcon.variableForeground#58AE79
  • tab.activeBorder#46ABAB
  • tab.activeForeground#FAFAFA
  • tab.border#1A1A1A
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#727272
  • terminal.ansiBlack#FFFFFF
  • terminal.ansiBlue#51A1D5
  • terminal.ansiBrightBlack#5c5c5c
  • terminal.ansiBrightBlue#78bcea
  • terminal.ansiBrightCyan#5ac7c7
  • terminal.ansiBrightGreen#6dcb90
  • terminal.ansiBrightMagenta#e396d2
  • terminal.ansiBrightRed#ee9998
  • terminal.ansiBrightWhite#7E7E7E
  • terminal.ansiBrightYellow#b8ba57
  • terminal.ansiCyan#46ABAB
  • terminal.ansiGreen#58AE79
  • terminal.ansiMagenta#D56EC1
  • terminal.ansiRed#E17375
  • terminal.ansiWhite#4d4d4d
  • terminal.ansiYellow#9D9F44
  • textLink.activeForeground#FAFAFA
  • textLink.foreground#CCCCCC
  • titleBar.activeBackground#1A1A1A
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#FDFDFD
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#FDFDFD
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown#58AE79underline
string, markup.fenced_code, markup.inline#9F86E4
comment, string.quoted.docstring.multi#6b737c
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#79b8ff
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#58AE79
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#46ABAB
variable.parameter.function#9D9F44
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#D56EC1
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#51A1D5
token.info-token#51A1D5
token.warn-token#CAC645
token.error-token#E17375
token.debug-token#D56EC1
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#FDFDFD
markup.underline.link#51A1D5
beginning.punctuation.definition.list.markdown#D56EC1
punctuation.definition.metadata.markdown#CAC645
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#46ABAB

Shiki preview

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

Loading...

Rhodes Theme - Coding Theme