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#002b36
  • activityBar.foreground#839496
  • breadcrumb.activeSelectionForeground#268bd2
  • breadcrumb.background#002b36
  • breadcrumb.focusForeground#93A1A1
  • breadcrumb.foreground#586E75
  • breadcrumbPicker.background#002b36
  • button.background#268BD2
  • button.foreground#002b36
  • button.hoverBackground#268bd2b6
  • commandCenter.activeBackground#002b36
  • commandCenter.background#002b36
  • commandCenter.foreground#839496
  • debugToolBar.background#002b36
  • diffEditor.insertedTextBackground#85990033
  • diffEditor.removedTextBackground#dc322f33
  • dropdown.background#002b36
  • dropdown.border#586e75
  • dropdown.foreground#93a1a1
  • editor.background#002B36
  • editor.foreground#839496
  • editor.lineHighlightBackground#073642
  • editor.lineHighlightBorder#073642
  • editor.selectionBackground#268bd23a
  • editor.wordHighlightBackground#268BD233
  • editor.wordHighlightStrongBackground#268BD233
  • editorBracketHighlight.foreground1#2aa198
  • editorBracketHighlight.foreground2#268bd2
  • editorBracketHighlight.foreground3#6c71c4
  • editorBracketHighlight.foreground4#d33682
  • editorBracketHighlight.foreground5#dc322f
  • editorBracketHighlight.foreground6#cb4b16
  • editorCursor.background#FDF6E3
  • editorCursor.foreground#D3222F
  • editorGroupHeader.border#073642
  • editorGroupHeader.tabsBackground#002b36
  • editorHoverWidget.background#002B36
  • editorHoverWidget.border#073642
  • editorLineNumber.activeForeground#839496
  • editorLineNumber.foreground#586e75
  • editorLink.activeForeground#268bd2
  • editorStickyScroll.border#073642
  • editorStickyScrollHover.background#002B36
  • editorSuggestWidget.background#002b36
  • editorSuggestWidget.border#073642
  • editorSuggestWidget.selectedBackground#073642
  • editorWidget.background#002b36
  • editorWidget.border#073642
  • editorWidget.foreground#93a1a1
  • focusBorder#586e75
  • gitDecoration.addedResourceForeground#859900
  • gitDecoration.conflictingResourceForeground#d33682
  • gitDecoration.deletedResourceForeground#dc322f
  • gitDecoration.ignoredResourceForeground#586E75
  • gitDecoration.modifiedResourceForeground#b58900
  • gitDecoration.untrackedResourceForeground#2aa198
  • input.background#002b36
  • input.border#586e75
  • input.foreground#93a1a1
  • input.placeholderForeground#586e75
  • inputOption.activeBackground#073642
  • inputOption.activeBorder#268BD2
  • inputOption.activeForeground#268BD2
  • list.activeSelectionBackground#073642
  • list.activeSelectionForeground#839496
  • list.focusOutline#073642
  • list.hoverBackground#073642
  • list.hoverForeground#839496
  • list.inactiveSelectionBackground#073642
  • list.inactiveSelectionForeground#839496
  • menu.background#002b36
  • menu.selectionBackground#073642
  • notifications.background#073642
  • notifications.foreground#93a1a1
  • panel.background#002b36
  • panel.border#073642
  • panelTitle.activeBorder#002b36
  • panelTitle.activeForeground#93A1A1
  • panelTitle.inactiveForeground#586e75
  • peekView.border#073642
  • peekViewEditor.background#002b36
  • peekViewResult.background#002b36
  • peekViewResult.fileForeground#93a1a1
  • peekViewTitle.background#002b36
  • peekViewTitleLabel.foreground#b58900
  • quickInput.background#002b36
  • quickInput.foreground#839496
  • quickInputTitle.background#073642
  • scrollbar.background#002b36
  • scrollbar.shadow#002b36
  • scrollbarSlider.activeBackground#073642
  • scrollbarSlider.background#073642
  • scrollbarSlider.hoverBackground#073642
  • selection.background#268BD233
  • sideBar.background#002b36
  • sideBar.foreground#839496
  • sideBarSectionHeader.background#073642
  • sideBarSectionHeader.foreground#839496
  • sideBarTitle.foreground#839496
  • statusBar.background#002B36
  • statusBar.debuggingBackground#002B36
  • statusBar.debuggingForeground#839496
  • statusBar.foreground#839496
  • statusBar.noFolderBackground#002B36
  • statusBarItem.hoverBackground#002B36
  • statusBarItem.hoverForeground#EEE8D5
  • tab.activeBackground#002b36
  • tab.activeForeground#93A1A1
  • tab.border#002b36
  • tab.inactiveBackground#073642
  • tab.inactiveForeground#586e75
  • terminal.ansiBlack#002B36
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002B36
  • terminal.ansiBrightBlue#268BD2
  • terminal.ansiBrightCyan#2AA198
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#D33682
  • terminal.ansiBrightRed#DC322F
  • terminal.ansiBrightWhite#839496
  • terminal.ansiBrightYellow#B58900
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#839496
  • terminal.ansiYellow#b58900
  • terminal.background#002B36
  • terminal.foreground#839496
  • terminalCursor.foreground#D3322F
  • textLink.activeForeground#4B83CD
  • textLink.foreground#268BD2
  • titleBar.activeBackground#002b36
  • titleBar.activeForeground#839496

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.italic—italic
markup.underline—underline
markup.italic#859900italic
storage.modifier, keyword.control, constant.numeric, constant.character, constant.other, constant.other.symbol, storage.type.class.python, storage.type.function.python, meta.method.return-type.java, storage.modifier.java, keyword.other.fn.rust, keyword.other.crate.rust, keyword.operator.borrow.and.rust, storage.type.namespace.cs, storage.type.class.cs, keyword.other.typedef.c, meta.enum.definition.cpp, storage.type.template.cpp, storage.type.class.cpp, storage.type.modifier.access, storage.type.enum.enum-key.class.cpp, keyword.other.using.directive.cpp, keyword.declaration.dart, keyword.type.go, keyword.interface.go, keyword.struct.go, keyword.function.go, keyword.local.lua, variable.other.constant.ruby, punctuation.definition.string.heredoc.delimiter.shell#B58900—
entity.name.tag, constant.language, support.constant, variable.language, keyword.operator, keyword.type, storage.type, support.type, entity.name.tag.html, entity.name.tag.style, entity.name.tag.script, keyword.control.import.python, keyword.control.from.python, support.function.magic.python, support.variable.magic.python, variable.parameter.function.language.special.self.python, storage.type.java, keyword.other.package.java, keyword.other.import.java, storage.type.local.java, storage.type.primitive.java, storage.type.object.array.java, storage.type.function.arrow.ts, keyword.other.directive.using.cs, entity.name.type.rust, keyword.other.rust, keyword.control.rust, entity.name.type.cs, keyword.control.directive.include.c, keyword.control.directive.include.cpp, entity.name.type.cpp, entity.name.type.template.cpp, support.function.construct.php, keyword.other.namespace.php, support.function.constructor.php, support.class.dart, keyword.other.import.dart, entity.name.type.go, keyword.package.go, keyword.control.import.go, support.function.lua, support.function.library.lua, keyword.other.special-method.ruby, support.function.kernel.ruby, entity.name.function.macro.rules.rust, entity.name.type.numeric.rust, entity.name.type.primitive.rust, entity.name.type.result.rust, keyword.other.sql, keyword.other.alias.sql, keyword.other.LUW.sql, keyword.other.DML.II.sql, keyword.other.DDL.create.II.sql, entity.name.type.ts, punctuation.definition.list.begin.markdown, markup.inline.raw, support.function.builtin.shell#859900—
entity.name.type.class, entity.name.type.interface, entity.other.inherited-class, meta.enum, meta.definition.function, entity.name.function.python, meta.method.identifier.java, entity.name.type.record.java, keyword.control.new.java, entity.name.tag.template.html.vue, meta.function.definition.rust, entity.name.type.struct.rust, entity.name.type.enum.rust, entity.name.function.macro.rust, entity.name.type.trait.rust, meta.function.definition.parameters.c, entity.name.type.class.cpp, entity.name.function.definition.cpp, entity.name.type.struct.cpp, entity.name.function.definition.special.constructor.cpp, entity.name.type.enum.cpp, meta.function.php, support.function.construct.output.php, entity.name.type.enum.cs, entity.name.function.go, meta.definition.method.js, entity.name.function.lua, meta.function.method.with-arguments.ruby, keyword.other.create.sql, entity.name.type.alias.ts#D33682—
markup.heading#D33682bold
string.regexp, meta.function-call, meta.method-call, entity.other.attribute-name.html, meta.method-call.java, punctuation.definition.annotation.java, storage.type.annotation.java, entity.name.type.annotation.java, variable.annotation.java, meta.function.call.rust, source.ts.embedded.html.vue, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css, entity.name.function.cs, entity.other.attribute-name.localname.xml, entity.name.function.call.cpp, entity.name.function.dart, entity.name.function.support.go, entity.name.function.support.builtin.go, support.function.any-method.lua, punctuation.definition.decorator.python, meta.function.decorator.python, entity.name.function.call.shell, entity.name.function.shell, meta.link#268BD2—
variable.parameter, support.variable, variable.object.property, variable.other.property, variable.other.object.property, entity.name.type.namespace, meta.attribute.python, storage.modifier.package.java, variable.parameter.java, meta.object-literal.key.ts, support.type.property-name.css, entity.name.namespace.rust, entity.name.variable.parameter.cs, meta.function.parameters.php, entity.name.namespace.cpp, entity.name.scope-resolution.cpp, entity.name.variable.property.cs, entity.name.type.package.go, entity.name.type.module.ruby, keyword.other.DML.sql, entity.name.type.module.ts, meta.image.inline.markdown, fenced_code.block.language, markup.quote#6C71C4—
storage.type.generic.java#CB4B16—
string.quoted.single, string.quoted.double, string.quoted.multi.python, string.interpolated.single.dart, meta.separator.markdown, string.template.js, string.template.ts#2AA198—
markup.bold#2AA198bold
markup.traceback, markup.error#DC322F—
comment, punctuation.separator, punctuation.accessor, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.terminator.rule, punctuation.definition.comment, string.quoted.docstring.multi.python, constant.character.escape, punctuation.terminator.java, punctuation.section.function.begin.python, punctuation.terminator.statement.cs, punctuation.semi.rust, punctuation.definition.attribute.rust, punctuation.comma.rust, keyword.operator.key-value.rust, punctuation.brackets.angle.rust, keyword.operator.namespace.rust, keyword.operator.arrow.skinny.rust, keyword.operator.access.dot.rust, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, markup.underline.link, punctuation.definition.metadata.markdown, punctuation.definition.markdown, punctuation.definition.strikethrough.markdown, markup.strikethrough.markdown#586E75—
storage.modifier.import.java, meta.preprocessor.include.c, string.quoted.double.include.c, string.quoted.double.include.cpp, variable.other.rust, string.unquoted.argument.shell#839496—
Solarized Flat Theme by Elling - VS Code Theme