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.activeBorder#100F0F
  • activityBar.background#FFFCF0
  • activityBar.border#DAD8CE
  • activityBar.foreground#100F0F
  • activityBar.inactiveForeground#6F6E69
  • activityBarBadge.background#24837B
  • activityBarBadge.foreground#FFFCF0
  • badge.background#24837B
  • badge.foreground#FFFCF0
  • button.background#24837B
  • button.foreground#FFFCF0
  • diffEditor.insertedTextBackground#879A3999
  • diffEditor.removedTextBackground#D14D4199
  • dropdown.background#F2F0E5
  • dropdown.border#DAD8CE
  • dropdown.foreground#100F0F
  • dropdown.listBackground#FFFCF0
  • editor.background#FFFCF0
  • editor.findMatchBackground#D0A215
  • editor.findMatchHighlightBackground#D0A215cc
  • editor.findRangeHighlightBackground#F2F0E5
  • editor.foreground#100F0F
  • editor.hoverHighlightBackground#DAD8CE
  • editor.inactiveSelectionBackground#E6E4D9
  • editor.lineHighlightBackground#F2F0E5
  • editor.lineHighlightBorder#E6E4D9
  • editor.rangeHighlightBackground#CECDC3
  • editor.selectionBackground#100F0F44
  • editor.selectionHighlightBackground#100F0F44
  • editorBracketMatch.background#E6E4D9
  • editorBracketMatch.border#DAD8CE
  • editorError.foreground#AF3029
  • editorGroup.border#DAD8CE
  • editorGroupHeader.tabsBackground#FFFCF0
  • editorGutter.addedBackground#66800B
  • editorGutter.background#FFFCF0
  • editorGutter.deletedBackground#AF3029
  • editorGutter.modifiedBackground#24837B
  • editorHoverWidget.background#E6E4D9
  • editorIndentGuide.background1#DAD8CE
  • editorInfo.foreground#205EA6
  • editorInlayHint.background#DAD8CE
  • editorInlayHint.foreground#6F6E69
  • editorInlayHint.typeBackground#DAD8CE
  • editorInlayHint.typeForeground#100F0F
  • editorLineNumber.activeForeground#100F0F
  • editorLineNumber.foreground#CECDC3
  • editorSuggestWidget.background#FFFCF0
  • editorSuggestWidget.border#DAD8CE
  • editorSuggestWidget.foreground#100F0F
  • editorSuggestWidget.highlightForeground#6F6E69
  • editorSuggestWidget.selectedBackground#DAD8CE
  • editorWarning.foreground#BC5215
  • editorWhitespace.foreground#CECDC3
  • editorWidget.background#F2F0E5
  • editorWidget.border#DAD8CE
  • input.background#F2F0E5
  • input.border#DAD8CE
  • input.foreground#100F0F
  • input.placeholderForeground#6F6E69
  • inputOption.activeBackground#E6E4D9
  • inputOption.activeBorder#DAD8CE
  • inputOption.activeForeground#100F0F
  • inputValidation.errorBackground#AF3029
  • inputValidation.errorBorder#D14D41
  • inputValidation.infoBackground#24837B
  • inputValidation.infoBorder#3AA99F
  • inputValidation.warningBackground#BC5215
  • inputValidation.warningBorder#DA702C
  • list.activeSelectionBackground#CECDC3
  • list.activeSelectionForeground#100F0F
  • list.errorForeground#AF3029
  • list.hoverBackground#DAD8CE
  • list.hoverForeground#100F0F
  • list.inactiveSelectionBackground#DAD8CE
  • list.inactiveSelectionForeground#100F0F
  • list.warningForeground#BC5215
  • menu.background#FFFCF0
  • menu.border#DAD8CE
  • menu.foreground#100F0F
  • menu.selectionBackground#DAD8CE
  • menu.selectionForeground#100F0F
  • merge.border#DAD8CE
  • merge.commonContentBackground#CECDC3
  • merge.commonHeaderBackground#DAD8CE
  • merge.currentContentBackground#879A39
  • merge.currentHeaderBackground#66800B
  • merge.incomingContentBackground#3AA99F
  • merge.incomingHeaderBackground#24837B
  • notifications.background#E6E4D9
  • panel.background#FFFCF0
  • panel.border#DAD8CE
  • panelTitle.activeBorder#CECDC3
  • panelTitle.activeForeground#100F0F
  • panelTitle.inactiveForeground#6F6E69
  • peekView.border#DAD8CE
  • peekViewEditor.background#FFFCF0
  • peekViewEditor.matchHighlightBackground#CECDC3
  • peekViewResult.background#F2F0E5
  • peekViewResult.fileForeground#100F0F
  • peekViewResult.lineForeground#6F6E69
  • peekViewResult.matchHighlightBackground#CECDC3
  • peekViewResult.selectionBackground#E6E4D9
  • peekViewResult.selectionForeground#B7B5AC
  • peekViewTitle.background#DAD8CE
  • peekViewTitleDescription.foreground#6F6E69
  • peekViewTitleLabel.foreground#100F0F
  • sideBar.activeBackground#CECDC3
  • sideBar.activeForeground#100F0F
  • sideBar.background#FFFCF0
  • sideBar.border#DAD8CE
  • sideBar.fileIcon.foreground#205EA6
  • sideBar.folderIcon.foreground#66800B
  • sideBar.foreground#100F0F
  • sideBar.hoverBackground#DAD8CE
  • sideBar.hoverForeground#6F6E69
  • sideBarSectionHeader.background#F2F0E5
  • sideBarSectionHeader.border#DAD8CE
  • sideBarSectionHeader.foreground#100F0F
  • sideBarTitle.foreground#100F0F
  • statusBar.background#FFFCF0
  • statusBar.border#DAD8CE
  • statusBar.debuggingBackground#AF3029
  • statusBar.debuggingForeground#100F0F
  • statusBar.foreground#100F0F
  • statusBar.noFolderBackground#CECDC3
  • statusBar.noFolderForeground#B7B5AC
  • tab.activeBackground#FFFCF0
  • tab.activeForeground#100F0F
  • tab.activeModifiedBorder#AD8301
  • tab.border#DAD8CE
  • tab.hoverBackground#DAD8CE
  • tab.inactiveBackground#F2F0E5
  • tab.inactiveForeground#6F6E69
  • tab.inactiveModifiedBorder#205EA6
  • tab.unfocusedActiveModifiedBorder#D0A215
  • tab.unfocusedHoverBackground#DAD8CE
  • tab.unfocusedInactiveModifiedBorder#4385BE
  • terminal.ansiBlue#205EA6
  • terminal.ansiCyan#24837B
  • terminal.ansiGreen#66800B
  • terminal.ansiMagenta#24837B
  • terminal.ansiRed#AF3029
  • terminal.ansiYellow#AD8301
  • terminal.background#FFFCF0
  • terminal.foreground#100F0F
  • terminalCursor.background#FFFCF0
  • terminalCursor.foreground#100F0F
  • titleBar.activeBackground#FFFCF0
  • titleBar.activeForeground#100F0F
  • titleBar.border#DAD8CE
  • titleBar.inactiveBackground#F2F0E5
  • titleBar.inactiveForeground#6F6E69

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, support.type.property-name.css#100F0F
entity.name.type.class#AD8301
entity.name.type.interface, entity.name.type#AD8301
entity.name.type.struct#AD8301
entity.name.type.enum#AD8301
meta.object-literal.key, support.type.property-name#A02F6F
entity.name.function.method, meta.function.method#205EA6
entity.name.function, support.function, meta.function-call.generic#205EA6bold
variable, meta.variable, variable.other.object.property#100F0F
variable.other.object, variable.other.readwrite.alias#100F0F
variable.other.global, variable.language.this#24837B
variable.other.local#E6E4D9
variable.parameter, meta.parameter#100F0F
variable.other.property, meta.property#100F0F
string, string.other.link, markup.inline.raw.string.markdown, markup.inline.raw.code.mdx#24837B
constant.character.escape, constant.other.placeholder#100F0F
keyword#A02F6F
keyword.control.import, keyword.control.from, keyword.import#A02F6F
storage.modifier, keyword.modifier, storage.type#A02F6F
comment, punctuation.definition.comment#6F6E69
comment.documentation, comment.line.documentation#6F6E69
constant.numeric#AD8301
constant.language.boolean, constant.language.json#24837B
keyword.operator#205EA6
entity.name.function.preprocessor, meta.preprocessor#205EA6
meta.preprocessor#24837B
markup.underline.link, string.other.link.destination.mdx#205EA6
entity.name.tag#A02F6F
support.class.component#205EA6
entity.other.attribute-name, meta.attribute#AD8301
support.type#205EA6
variable.other.constant, variable.readonly#100F0F
entity.name.label, punctuation.definition.label#24837B
entity.name.namespace, storage.modifier.namespace, markup.bold.markdown#AD8301
entity.name.module, storage.modifier.module#AF3029
variable.type.parameter, variable.parameter.type#AD8301
keyword.control.exception, keyword.control.trycatch#24837B
meta.decorator, punctuation.decorator, entity.name.function.decorator#AD8301
variable.function#100F0F
punctuation, punctuation.terminator, punctuation.definition.tag, punctuation.separator, punctuation.definition.string, punctuation.section.block#100F0F
storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, constant.language.go, support.class.dart, keyword.other.documentation, storage.modifier.import.java, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, meta.separator.markdown, entity.name.section.markdown, entity.name.section.mdx, string.other.number.mdx, variable.ordered.list.mdx, variable.unordered.list.mdx#AD8301
#24837B
markup.italic.markdown, support.type.python, variable.legacy.builtin.python, support.constant.property-value.css, storage.modifier.attribute.swift#24837B
#205EA6
keyword.channel.go, keyword.other.platform.os.swift#5E409D
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx#A02F6F
#AF3029
#BC5215

Shiki preview

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

Loading...