Skip to main content
CodingTheme

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#272822
  • activityBar.foreground#f8f8f2
  • badge.background#75715E
  • badge.foreground#f8f8f2
  • button.background#75715E
  • debugToolBar.background#1e1f1c
  • diffEditor.insertedTextBackground#4b661680
  • diffEditor.removedTextBackground#90274A70
  • dropdown.background#414339
  • dropdown.listBackground#1e1f1c
  • editor.background#23272E
  • editor.foreground#B8C0CC
  • editor.lineHighlightBackground#3e3d32
  • editor.selectionBackground#878b9180
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4a4a7680
  • editor.wordHighlightStrongBackground#6a6a9680
  • editorCursor.foreground#f8f8f0
  • editorGroup.border#34352f
  • editorGroup.dropBackground#41433980
  • editorGroupHeader.tabsBackground#1e1f1c
  • editorHoverWidget.background#414339
  • editorHoverWidget.border#75715E
  • editorIndentGuide.activeBackground#767771
  • editorIndentGuide.background#464741
  • editorLineNumber.activeForeground#c2c2bf
  • editorLineNumber.foreground#90908a
  • editorSuggestWidget.background#272822
  • editorSuggestWidget.border#75715E
  • editorWhitespace.foreground#464741
  • editorWidget.background#1e1f1c
  • focusBorder#99947c
  • input.background#414339
  • inputOption.activeBorder#75715E
  • inputValidation.errorBackground#90274A
  • inputValidation.errorBorder#f92672
  • inputValidation.infoBackground#546190
  • inputValidation.infoBorder#819aff
  • inputValidation.warningBackground#848528
  • inputValidation.warningBorder#e2e22e
  • list.activeSelectionBackground#75715E
  • list.dropBackground#414339
  • list.highlightForeground#f8f8f2
  • list.hoverBackground#3e3d32
  • list.inactiveSelectionBackground#414339
  • menu.background#1e1f1c
  • menu.foreground#cccccc
  • minimap.selectionHighlight#878b9180
  • panel.border#414339
  • panelTitle.activeBorder#75715E
  • panelTitle.activeForeground#f8f8f2
  • panelTitle.inactiveForeground#75715E
  • peekView.border#75715E
  • peekViewEditor.background#272822
  • peekViewEditor.matchHighlightBackground#75715E
  • peekViewResult.background#1e1f1c
  • peekViewResult.matchHighlightBackground#75715E
  • peekViewResult.selectionBackground#414339
  • peekViewTitle.background#1e1f1c
  • pickerGroup.foreground#75715E
  • ports.iconRunningProcessForeground#ccccc7
  • progressBar.background#75715E
  • quickInputList.focusBackground#414339
  • selection.background#878b9180
  • settings.focusedRowBackground#4143395A
  • sideBar.background#1e1f1c
  • sideBarSectionHeader.background#272822
  • statusBar.background#414339
  • statusBar.debuggingBackground#75715E
  • statusBar.noFolderBackground#414339
  • statusBarItem.remoteBackground#AC6218
  • tab.border#1e1f1c
  • tab.inactiveBackground#34352f
  • tab.inactiveForeground#ccccc7
  • tab.lastPinnedBorder#414339
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C4265E
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#B3B42B
  • titleBar.activeBackground#1e1f1c
  • widget.shadow#00000098

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.block, comment.block.documentation, punctuation.definition.comment.begin, punctuation.definition.comment.end#8B95A5italic
comment.line, comment.line.double-slash, comment.line.number-sign#8B95A5
keyword.other.using.directive.cpp #FF5733bold
support.type, support.class#B04214
meta.embedded, source.groovy.embedded#F8F8F2
entity.name.function.preprocessor, meta.preprocessor.macro.c#E53935
string#CFCFC2
punctuation.definition.template-expression, punctuation.section.embedded#F92672
meta.template.expression#CFCFC2
constant.numeric#CFCFC2
constant.language#CFCFC2
constant.character, constant.other#CFCFC2
variable.other.local, variable.other.static#32bf32
variable.other.readwrite#34A853
variable.other.constant#009688bold
variable.other.static#009688underline
variable.other.global#2aa198underline bold
variable.other.property#61AFEF
variable.other.property, variable.other.property.constant, variable.other.property.static#11abff
variable.other.enummember#11abffunderline
variable.other.property.static#11abffitalic
keyword.control#EE0000
keyword.operator.new, keyword.operator.delete#ee0000bold
storage#F92672
storage.type#4FB7C5
entity.name.type#CB4B16
entity.name.type.class#CB4B16
entity.name.type.class.templated#CB4B16
entity.name.namespace#CB4B16
entity.other.inherited-class#A6E22Eitalic underline
entity.name.function#DEA628
entity.name.function.templated#DEA628italic bold
entity.name.function.operator#DEA628bold
entity.name.function.operator.member#DEA628bold
entity.name.function.member#DEA628
entity.name.function.member.static#dEA628italic
entity.name.type.class.reference#CB4B16underline
variable.parameter#9A8CF7
entity.name.tag#F92672
entity.other.attribute-name#A6E22E
support.function#66D9EF
support.constant#66D9EF
support.other.variable#11abffitalic
constant.numeric.integer.cpp, constant.numeric.float.cpp, constant.numeric.hex.cpp, constant.numeric.oct.cpp, constant.numeric.binary.cpp, constant.numeric.decimal.cpp, constant.numeric.exponent.decimal.cpp, keyword.other.unit.exponent.decimal.cpp, keyword.operator.minus.exponent.decimal.cpp, keyword.other.unit.suffix.floating-point.cpp, constant.numeric.decimal.point.cpp#009688
keyword.operator.arithmetic.cpp, keyword.operator.assignment.cpp, keyword.operator.comparison.cpp, keyword.operator.logical.cpp, keyword.operator.bitwise.cpp, keyword.operator.increment.cpp, keyword.operator.ternary.cpp, keyword.operator.pointer.cpp, keyword.operator.member.cpp, keyword.operator.other.cpp, keyword.operator.bitwise.shift.cpp, punctuation.separator.pointer-access.cpp, punctuation.separator.colon.range-based.cpp, punctuation.separator.namespace.access.cpp, punctuation.separator.dot-access.cpp, punctuation.terminator.statement.cpp#CFCFC2
keyword.operator.cast#B07D1A
storage.modifier#8FAE00italic
invalid#F44747
invalid.deprecated#F44747
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#75715E
markup.deleted#F92672
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#AE81FFA0
entity.name.filename.find-in-files#E6DB74
markup.quote#F92672
markup.list#E6DB74
markup.bold, markup.italic#66D9EF
markup.inline.raw#FD971F
markup.heading#A6E22E
markup.heading.setext#A6E22Ebold
markup.heading.markdownbold
markup.quote.markdown#75715Eitalic
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#AE81FF
markup.underline.link.markdown,markup.underline.link.image.markdown#E6DB74
markup.italic.markdownitalic
markup.list.unnumbered.markdown, markup.list.numbered.markdown#f8f8f2
punctuation.definition.list.begin.markdown#A6E22E
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
variable.language#FD971F
keyword.operator.assignment.shell, constant.character.escape.line-continuation.shell, punctuation.definition.subshell.single.shell#FF5733bold
support.function.builtin.shell #DEA628bold
variable.other.normal.shell#009688bold
variable.other.assignment.shell#8BC34A
string.quoted.single.shell, string.quoted.double.shell, string.unquoted.shell, string.unquoted.argument.shell#9A8CF7
entity.name.command.shell, storage.modifier.export.shell#CB4B16
constant.other.option#4FB7C5
support.type.property-name.json.comments#CB4B16

Shiki preview

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

Loading...

loong Solarized Dark C/C++ by yinloonga - VS Code Theme