Skip to main content
Coding Theme

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#DDD6C1
  • activityBar.border#DDD6C1
  • activityBar.foreground#000
  • activityBar.inactiveForeground#7e7a67
  • activityBarBadge.background#B58900
  • activityBarBadge.foreground#fefbf1
  • badge.background#B58900AA
  • badge.foreground#fefbf1
  • button.background#DDD6C1
  • button.foreground#363531
  • button.hoverBackground#e5dec9
  • button.secondaryBackground#f3eedf
  • button.secondaryForeground#3d4a4e
  • button.secondaryHoverBackground#DFCA8844
  • checkbox.background#fefbf1
  • checkbox.border#e0d8be
  • checkbox.foreground#3d4a4e
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.background#fefbf1
  • dropdown.border#e0d8be
  • dropdown.foreground#3d4a4e
  • dropdown.listBackground#fefbf1
  • editor.background#f8f5e8
  • editor.findMatchBackground#c9c0bb
  • editor.findMatchHighlightBackground#c9c0bbFE
  • editor.foreground#3d4a4e
  • editor.hoverHighlightBackground#dbd4b6FE
  • editor.inactiveSelectionBackground#e5dec9ab
  • editor.lineHighlightBackground#EEE8D5
  • editor.lineHighlightBorder#DDD6C1
  • editor.rangeHighlightBackground#EEE8D5FE
  • editor.selectionBackground#e5dec9
  • editor.selectionHighlightBackground#c9c0bbe3
  • editor.wordHighlightBackground#d6cfbad7
  • editor.wordHighlightStrongBackground#b588004c
  • editorBracketHighlight.foreground1#a1485D
  • editorBracketHighlight.foreground2#a1485D
  • editorBracketHighlight.foreground3#a1485D
  • editorBracketHighlight.foreground4#a1485D
  • editorBracketHighlight.foreground5#a1485D
  • editorBracketHighlight.foreground6#a1485D
  • editorBracketHighlight.unexpectedBracket.foreground#5622f5
  • editorCursor.foreground#657B83
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorHoverWidget.background#fefbf1
  • editorHoverWidget.border#DDD6C1
  • editorHoverWidget.foreground#3d4a4e
  • editorHoverWidget.highlightForeground#B58900AA
  • editorHoverWidget.statusBarBackground#e9e1d1
  • editorIndentGuide.background1#586E7580
  • editorLineNumber.activeForeground#B58900
  • editorLineNumber.foreground#6d4327
  • editorMultiCursor.primary.foreground#6d4327
  • editorMultiCursor.secondary.foreground#B58900
  • editorOverviewRuler.addedForeground#5d8535
  • editorOverviewRuler.background#f8f5e8
  • editorOverviewRuler.border#DDD6C1
  • editorOverviewRuler.deletedForeground#a1485c
  • editorOverviewRuler.errorForeground#a1485D
  • editorOverviewRuler.modifiedForeground#915b15
  • editorOverviewRuler.warningForeground#b58900
  • editorRuler.foreground#e0d8be
  • editorSuggestWidget.background#fefbf1
  • editorSuggestWidget.border#DDD6C1
  • editorSuggestWidget.foreground#3d4a4e
  • editorSuggestWidget.selectedBackground#DFCA88
  • editorSuggestWidget.selectedForeground#3d4a4e
  • editorWhitespace.foreground#75705880
  • editorWidget.background#EEE8D5
  • editorWidget.border#DDD6C1
  • editorWidget.resizeBorder#b49471
  • extensionButton.prominentBackground#dfd8c6
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#b49471
  • git.blame.editorDecorationForeground#7e7a67
  • gitDecoration.addedResourceForeground#5d8535
  • gitDecoration.deletedResourceForeground#a1485c
  • gitDecoration.ignoredResourceForeground#7e7a67
  • gitDecoration.modifiedResourceForeground#915b15
  • gitDecoration.untrackedResourceForeground#B58900
  • input.background#DDD6C1
  • input.border#b49471
  • input.foreground#3d4a4e
  • input.placeholderForeground#586E75AA
  • inputOption.activeBorder#D3AF86
  • inputValidation.errorBackground#F2EDDE
  • inputValidation.errorBorder#a1485D
  • inputValidation.errorForeground#a1485D
  • list.activeSelectionBackground#DFCA88
  • list.activeSelectionForeground#6C6C6C
  • list.focusBackground#DFCA8844
  • list.focusForeground#3d4a4e
  • list.focusHighlightForeground#B58900
  • list.focusOutline#170c00
  • list.highlightForeground#B58900
  • list.hoverBackground#DFCA8844
  • list.inactiveSelectionBackground#D1CBB8
  • list.inactiveSelectionForeground#626d70
  • menu.background#fefbf1
  • menu.foreground#3d4a4e
  • menu.selectionBackground#DFCA88
  • menu.selectionForeground#3d4a4e
  • menu.separatorBackground#DDD6C1
  • menubar.selectionBackground#DFCA88
  • menubar.selectionForeground#3d4a4e
  • minimap.selectionHighlight#eee8d5ce
  • notebook.cellEditorBackground#F7F0E0
  • panel.background#efe8d3
  • panel.border#DDD6C1
  • panelSectionHeader.background#EEE8D5
  • panelSectionHeader.border#DDD6C1
  • panelSectionHeader.foreground#3d4a4e
  • panelTitle.activeForeground#000
  • panelTitle.inactiveForeground#3d4a4e
  • peekView.border#B58900
  • peekViewEditor.background#FFFBF2
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewEditorGutter.background#FFFBF2
  • peekViewResult.background#EEE8D5
  • peekViewResult.fileForeground#3d4a4e
  • peekViewResult.lineForeground#7e7a67
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#DDD6C1
  • pickerGroup.foreground#3d4a4e
  • progressBar.background#B58900
  • quickInput.background#f8f3e3
  • quickInput.foreground#3d4a4e
  • quickInputList.focusBackground#DFCA8866
  • quickInputList.focusForeground#3d4a4e
  • scmGraph.foreground1#3d4a4e
  • scmGraph.foreground2#5d8535
  • scmGraph.foreground3#a1485c
  • scmGraph.foreground4#727171
  • scmGraph.foreground5#1c7477
  • scmGraph.historyItemBaseRefColor#3d4a4e
  • scmGraph.historyItemHoverAdditionsForeground#5d8535
  • scmGraph.historyItemHoverDefaultLabelBackground#EEE8D5
  • scmGraph.historyItemHoverDefaultLabelForeground#3d4a4e
  • scmGraph.historyItemHoverDeletionsForeground#a1485c
  • scmGraph.historyItemHoverLabelForeground#fefbf1
  • scmGraph.historyItemRefColor#B58900
  • scmGraph.historyItemRemoteRefColor#727171
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#B58900
  • scrollbarSlider.background#b5890044
  • scrollbarSlider.hoverBackground#b5890088
  • selection.background#DFCA88
  • settings.dropdownListBorder#e0d8be
  • sideBar.background#f3eedf
  • sideBar.border#DDD6C1
  • sideBar.foreground#1a1b1b
  • sideBarSectionHeader.background#EEE8D5
  • sideBarSectionHeader.border#DDD6C1
  • sideBarSectionHeader.foreground#3d4a4e
  • sideBarTitle.foreground#333b3d
  • statusBar.background#EEE8D5
  • statusBar.border#DDD6C1
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.foreground#3d4a4e
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.errorBackground#915b15
  • statusBarItem.errorForeground#fefbf1
  • statusBarItem.focusBorder#b49471
  • statusBarItem.hoverBackground#DDD6C1
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#DFCA8844
  • statusBarItem.remoteBackground#DFCA8844
  • symbolIcon.arrayForeground#357ba3
  • symbolIcon.booleanForeground#357ba3
  • symbolIcon.classForeground#357ba3
  • symbolIcon.colorForeground#3d4a4e
  • symbolIcon.constantForeground#7090a3
  • symbolIcon.constructorForeground#a5445b
  • symbolIcon.enumeratorForeground#357ba3
  • symbolIcon.enumeratorMemberForeground#357ba3
  • symbolIcon.eventForeground#3d4a4e
  • symbolIcon.fieldForeground#727171
  • symbolIcon.fileForeground#3d4a4e
  • symbolIcon.folderForeground#3d4a4e
  • symbolIcon.functionForeground#3d4a4e
  • symbolIcon.interfaceForeground#357ba3
  • symbolIcon.keyForeground#727171
  • symbolIcon.keywordForeground#a5445b
  • symbolIcon.methodForeground#3d4a4e
  • symbolIcon.moduleForeground#6b7980
  • symbolIcon.namespaceForeground#6b7980
  • symbolIcon.nullForeground#3d4a4e
  • symbolIcon.numberForeground#915b15
  • symbolIcon.objectForeground#357ba3
  • symbolIcon.operatorForeground#915b15
  • symbolIcon.packageForeground#6b7980
  • symbolIcon.propertyForeground#727171
  • symbolIcon.referenceForeground#357ba3
  • symbolIcon.snippetForeground#1c7477
  • symbolIcon.stringForeground#1c7477
  • symbolIcon.structForeground#357ba3
  • symbolIcon.textForeground#1c7477
  • symbolIcon.typeParameterForeground#357ba3
  • symbolIcon.unitForeground#915b15
  • symbolIcon.variableForeground#3d4a4e
  • tab.activeBackground#fefbf1
  • tab.activeBorder#f3eedf
  • tab.activeBorderTop#B58900
  • tab.activeForeground#3d4a4e
  • tab.border#DDD6C1
  • tab.hoverBackground#fefbf1
  • tab.hoverForeground#3d4a4e
  • tab.inactiveBackground#f3eedf
  • tab.inactiveForeground#626d70
  • tab.lastPinnedBorder#FDF6E3
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#3d4a4e
  • terminal.ansiBrightBlue#2877c2
  • terminal.ansiBrightCyan#12898d
  • terminal.ansiBrightGreen#619e23
  • terminal.ansiBrightMagenta#60639c
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#1c7477
  • terminal.ansiGreen#5d8535
  • terminal.ansiMagenta#BE7797
  • terminal.ansiRed#a1485c
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#f8f5e8
  • terminal.selectionBackground#e5dec9
  • terminalCursor.foreground#3d4a4e
  • testing.coveredBackground#fefbf1
  • testing.coveredBorder#3d4a4e
  • testing.coveredGutterBackground#fefbf1
  • testing.iconFailed#a1485c
  • testing.iconPassed#5d8535
  • textLink.activeForeground#357ba3
  • textLink.foreground#6b7980
  • titleBar.activeBackground#EEE8D5
  • titleBar.activeForeground#3b545c
  • titleBar.border#DDD6C1
  • titleBar.inactiveBackground#f3eedf
  • titleBar.inactiveForeground#9B9588
  • tree.indentGuidesStroke#e0d8be
  • walkThrough.embeddedEditorBackground#F7F0E0
  • welcomePage.background#f8f5e8
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line.double-slash.js, comment.line.double-slash.ts, comment.block.js, comment.block.ts, comment.block.css, comment.line.double-slash.css#7e7a67italic
string, string.unquoted.yaml, string.quoted.single.yaml, string.quoted.double.yaml, string.quoted.double.json, string.quoted.single.java, string.quoted.double.java, string.quoted.single.js, string.quoted.single.ts, string.quoted.double.js, string.quoted.double.ts, string.template.js, string.template.ts, string.quoted.double.css, string.quoted.single.css#1c7477—
constant.numeric, constant.numeric.yaml, constant.numeric.json, constant.numeric.java, constant.numeric.js, constant.numeric.ts, constant.numeric.css#915b15—
string.regexp, string.regexp.js, string.regexp.ts#8d5bdd—
keyword, support, keyword.control.java, keyword.other.java, keyword.control.js, keyword.control.ts, keyword.operator.new.js, keyword.operator.new.ts, keyword.operator.expression.js, keyword.operator.expression.ts, keyword.control.css#83122d—
support.type, support.constant, support.type.builtin.ts, support.type.builtin.tsx, support.type.primitive.ts, entity.name.type, entity.name.scope-resolution, entity.name.class, entity.name.type.class.ts, entity.name.type.class.tsx, entity.name.type.class.js, entity.name.type.class.jsx, entity.name.type.interface.ts, entity.name.type.interface.tsx, storage.modifier.access.java, keyword.operator.access.java, storage.modifier.static.java, storage.type.void.java, storage.type.java, constant.language.yaml, constant.language.json, constant.language.java, storage.type.primitive.java, support.type.primitive.js, support.type.primitive.ts, storage.type.js, storage.type.ts, support.constant.css, support.constant.css, support.constant.property-value.css#3d7d56—
punctuation, punctuation.definition, punctuation.definition.block.yaml, punctuation.separator.yaml, punctuation.definition.template-expression.begin.yaml, punctuation.definition.template-expression.end.yaml, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.definition.java, punctuation.separator.java, punctuation.terminator.java, punctuation.bracket.angle.java, punctuation.bracket.curly.java, punctuation.bracket.round.java, meta.annotation.java, punctuation.definition.annotation.java, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.string.begin.ts, punctuation.definition.string.end.ts, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.separator.comma.js, punctuation.separator.comma.ts, punctuation.terminator.js, punctuation.terminator.ts, punctuation.separator.css, punctuation.terminator.css#8d3045—
variable.language, variable.other, entity.name.function, entity.name.tag.yaml, support.type.property-name.json, variable.other.java, entity.name.function.java, variable.other.js, variable.other.ts, entity.name.function.js, entity.name.function.ts, variable.language.this.js, variable.language.this.ts, entity.name.tag.css, support.type.property-name.css#3d4a4e—
entity.name.namespace, entity.name.type.module.ts, entity.name.type.module.tsx, entity.name.type.module.js, entity.name.type.module.jsx, storage.modifier.java, entity.name.namespace.js, entity.name.namespace.ts, support.type.property-name.css#175072—
variable.parameter, variable.parameter.js, variable.parameter.ts#5f4b2e—
meta.decorator.ts, meta.decorator.tsx, meta.decorator.js, meta.decorator.jsx, punctuation.decorator.ts, punctuation.decorator.tsx#83122d—
variable.other.yaml, variable.other.template.js, variable.other.template.ts#8d3045—
invalid, invalid.illegal.js, invalid.illegal.ts, invalid.illegal.css#DC322Fstrikethrough
markup.bold—bold
markup.italic—italic
markup.strikethrough—strikethrough
Pirate Map Light Theme (Solarized Light) by Code Liger - VS Code Theme