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.activeBackground#073bac
  • activityBar.activeBorder#112e64
  • activityBar.background#08254dfb
  • activityBar.dropBorder#30e93f
  • activityBar.foreground#f7faf8fb
  • activityBar.inactiveForeground#30e93f
  • activityBarBadge.foreground#fff
  • badge.background#30e93f
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.background#04141b85
  • breadcrumb.focusForeground#079e1b
  • breadcrumb.foreground#079e1b
  • breadcrumbPicker.background#36352b
  • button.background#30e93f
  • button.foreground#ffffff
  • button.hoverBackground#04141b85
  • checkbox.background#165ef0
  • checkbox.border#0076fd
  • checkbox.foreground#0e0000
  • debugToolBar.background#2b3036
  • dropdown.background#04141b85
  • dropdown.border#30e93f
  • dropdown.foreground#f8f8f8
  • dropdown.listBackground#30e93f
  • editor.background#282c34
  • editor.foldBackground#12ee6e
  • editor.foreground#30e93f
  • editor.lineHighlightBackground#1126411e
  • editorBracketMatch.background#104d9c
  • editorBracketMatch.border#1fc019
  • editorCursor.foreground#079e1b
  • editorError.foreground#f36464
  • editorGroup.border#1b1f23
  • editorGroupHeader.tabsBackground#30e93f
  • editorLineNumber.activeForeground#1ee66b
  • editorLineNumber.foreground#079e1b
  • editorWidget.background#63d81f
  • input.background#30e93f
  • input.border#30e93f
  • input.foreground#f8f9fa
  • list.activeSelectionBackground#079e1b
  • list.activeSelectionForeground#f5f3f2
  • list.focusBackground#f7fafcfd
  • list.hoverBackground#44f13e
  • list.hoverForeground#fdffff
  • list.inactiveFocusBackground#1476e6
  • list.inactiveSelectionBackground#079e1b
  • list.inactiveSelectionForeground#f1f1f1
  • menu.background#08254d
  • menu.border#079e1b
  • menu.foreground#30e93f
  • menu.selectionBackground#30e93f
  • menu.selectionBorder#fafafa
  • menu.selectionForeground#fffcfc
  • menu.separatorBackground#ec2f2f00
  • menubar.selectionBackground#f3222200
  • menubar.selectionForeground#30e93f
  • notificationCenterHeader.background#24292e
  • notificationCenterHeader.foreground#959da5
  • notifications.background#2f363d
  • notifications.border#1b1f23
  • notifications.foreground#e1e4e8
  • panel.background#079e1b
  • panelInput.border#24292e
  • panelSectionHeader.foreground#e7eb09
  • panelTitle.activeBorder#1ceb2d
  • panelTitle.activeForeground#fdfdfd
  • panelTitle.inactiveForeground#08254dfb
  • peekViewEditor.background#0ecf6ff8
  • peekViewResult.background#1f2428
  • pickerGroup.border#444d56
  • pickerGroup.foreground#e1e4e8
  • quickInput.background#08254dfb
  • quickInput.foreground#30e93f
  • scrollbar.shadow#e6121288
  • scrollbarSlider.activeBackground#fffcfc
  • scrollbarSlider.background#30e93f
  • scrollbarSlider.hoverBackground#30e93f
  • settings.checkboxBackground#30bbf785
  • settings.dropdownBackground#30e93f
  • settings.dropdownBorder#f3f3f3
  • settings.dropdownForeground#030303
  • settings.headerForeground#24292e
  • settings.textInputBackground#f3efef
  • settings.textInputBorder#30e93f
  • settings.textInputForeground#080808
  • sideBar.background#06681bf1
  • sideBar.foreground#fdfffd
  • sideBarSectionHeader.background#04141b85
  • sideBarSectionHeader.foreground#30e93f
  • sideBarTitle.foreground#30e93f
  • statusBar.background#079e1b
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#24292e
  • statusBarItem.hoverBackground#f80707
  • tab.activeBackground#079e1b
  • tab.activeBorder#079e1b
  • tab.activeForeground#24292e
  • tab.hoverBackground#079e1b
  • tab.hoverBorder#000000
  • tab.hoverForeground#000000
  • tab.inactiveBackground#079e1b
  • tab.inactiveForeground#f7f7f7
  • tab.unfocusedActiveBorder#6d0303
  • tab.unfocusedActiveBorderTop#1b1f23
  • tab.unfocusedHoverBackground#24292e
  • terminal.background#30e93f
  • terminal.foreground#f8fcf8fb
  • terminalCursor.foreground#30e93f
  • textBlockQuote.background#24292e
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#c8e1ff
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#f1efef
  • titleBar.activeBackground#08254dfb
  • titleBar.activeForeground#fafffbfb
  • titleBar.inactiveBackground#08254dfb
  • titleBar.inactiveForeground#f9fafc
  • tree.indentGuidesStroke#2f363d
  • welcomePage.background#079e1b
  • welcomePage.buttonBackground#5aa0f0
  • welcomePage.buttonHoverBackground#f5f8f5
  • window.activeBorder#079e1b
  • window.inactiveBorder#079e1b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#676f7d
string, string.template#f7f4f0
constant.numeric#5894e4
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#c678dd
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#abb2bf
constant.language#56b6c2
constant.character, constant.other#56b6c2
variable.language#e06c75
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75
keyword.operator#e06c75
storage#e06c75
storage.type#56b6c2
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#61afef
variable.other, variable.other.property, variable.other.block#abb2bf
entity.other.inherited-class#98c379
storage.modifier.import, storage.modifier.package#61afef
entity.name.function, support.function#98c379
variable.parameter, entity.name.variable.parameter, parameter.variable#d19a66italic
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#98c379
entity.name.tag, entity.name.tag.class.js#e06c75
entity.name.tag.class, entity.name.tag.id#56b6c2
entity.other.attribute-name#98c379
support.constant#56b6c2
support.type, support.variable#56b6c2
support.dictionary.json#56b6c2
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#56b6c2
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379
variable.css, variable.scss, variable.less, variable.sass#56b6c2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#56b6c2
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#56b6c2
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#e06c75
markup.inserted#98c379
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#e5c07b
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676f7d
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#61afef
markup.bold.markdownbold
markup.heading.markdown#e06c75bold
markup.quote.markdown#98c379
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold
DiZTheme v3 dark by DzStyler - VS Code Theme