Solarized Neue & Yuki
Publisher: Phillip SauerbeckThemes in package: 4
Customized solarized 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#F0F0F0
- activityBar.border#F0F0F0
- activityBar.foreground#403f53
- activityBarBadge.background#403f53
- activityBarBadge.foreground#F0F0F0
- badge.background#8382E6
- badge.foreground#F0F0F0
- button.background#8382E6
- button.foreground#F0F0F0
- debugExceptionWidget.background#F0F0F0
- debugExceptionWidget.border#d9d9d9
- debugToolBar.background#F0F0F0
- descriptionForeground#403f53
- dropdown.background#F0F0F0
- dropdown.border#d9d9d9
- dropdown.foreground#403f53
- editor.background#E5E5EB
- editor.findMatchBackground#93A1A16c
- editor.findMatchHighlightBackground#D5F151
- editor.findRangeHighlightBackground#E0E7EA
- editor.foreground#403f53
- editor.hoverHighlightBackground#d3e8f8
- editor.lineHighlightBackground#D4D6E4
- editor.rangeHighlightBackground#E8E8EB
- editor.selectionBackground#E0E0E0
- editor.selectionHighlightBackground#d3e8f8
- editor.wordHighlightBackground#d3e8f8
- editor.wordHighlightStrongBackground#A3CFEE
- editorBracketMatch.background#d3e8f8
- editorBracketMatch.border#8382E6
- editorCodeLens.foreground#403f53
- editorCursor.foreground#90A7B2
- editorError.border#FBFBFB
- editorError.foreground#E64D49
- editorGroup.border#E1E1EB
- editorGroupHeader.noTabsBackground#E1E1EB
- editorGroupHeader.tabsBackground#E1E1EB
- editorGroupHeader.tabsBorder#D7D7EB
- editorGutter.addedBackground#49d0c5
- editorGutter.deletedBackground#f76e6e
- editorGutter.modifiedBackground#6fbef6
- editorHoverWidget.background#F0F0F0
- editorHoverWidget.border#d9d9d9
- editorIndentGuide.activeBackground#888888
- editorIndentGuide.background#d9d9d9
- editorLineNumber.activeForeground#403f53
- editorLineNumber.foreground#90A7B2
- editorMarkerNavigation.background#D0D0D0
- editorMarkerNavigationError.background#f76e6e
- editorMarkerNavigationWarning.background#daaa01
- editorOverviewRuler.errorForeground#E64D49
- editorOverviewRuler.warningForeground#daaa01
- editorRuler.foreground#d9d9d9
- editorSuggestWidget.background#F0F0F0
- editorSuggestWidget.border#d9d9d9
- editorSuggestWidget.foreground#403f53
- editorSuggestWidget.highlightForeground#403f53
- editorSuggestWidget.selectedBackground#d3e8f8
- editorWarning.border#daaa01
- editorWarning.foreground#daaa01
- editorWhitespace.foreground#d9d9d9
- editorWidget.background#F0F0F0
- editorWidget.border#d9d9d9
- errorForeground#403f53
- extensionButton.prominentBackground#8382E6
- extensionButton.prominentForeground#F0F0F0
- focusBorder#93A1A1
- foreground#403f53
- input.background#ECECF2
- input.border#d9d9d9
- input.foreground#403f53
- input.placeholderForeground#93A1A1
- inputOption.activeBorder#8382E6
- inputValidation.errorBackground#f76e6e
- inputValidation.errorBorder#de3d3b
- inputValidation.infoBackground#F0F0F0
- inputValidation.infoBorder#D0D0D0
- inputValidation.warningBackground#daaa01
- inputValidation.warningBorder#E0AF02
- list.activeSelectionBackground#0B0DAD18
- list.activeSelectionForeground#403f53
- list.errorForeground#E64D49
- list.focusForeground#403f53
- list.highlightForeground#403f53
- list.hoverForeground#403f53
- list.inactiveSelectionBackground#0B0DAD18
- list.inactiveSelectionForeground#403f53
- list.warningForeground#daaa01
- notificationCenter.border#CCCCCC
- notificationCenterHeader.background#F0F0F0
- notificationCenterHeader.foreground#403f53
- notificationLink.foreground#2466D2
- notifications.background#F0F0F0
- notifications.border#CCCCCC
- notifications.foreground#403f53
- notificationToast.border#CCCCCC
- panel.background#F0F0F0
- panel.border#d9d9d9
- peekView.border#d9d9d9
- peekViewEditor.background#F6F6F6
- peekViewEditor.matchHighlightBackground#49d0c5
- peekViewEditorGutter.background#F6F6F6
- peekViewResult.background#F0F0F0
- peekViewResult.fileForeground#403f53
- peekViewResult.lineForeground#403f53
- peekViewResult.matchHighlightBackground#49d0c5
- peekViewResult.selectionBackground#0B0DAD18
- peekViewResult.selectionForeground#2AA198
- peekViewTitle.background#F0F0F0
- peekViewTitleDescription.foreground#403f53
- peekViewTitleLabel.foreground#403f53
- pickerGroup.border#d9d9d9
- pickerGroup.foreground#403f53
- progressBar.background#8382E6
- scrollbar.shadow#CCCCCC
- selection.background#B1B0E6
- sideBar.background#E1E1EB
- sideBar.border#D7D7EB
- sideBar.foreground#403f53
- sideBarTitle.foreground#403f53
- statusBar.background#E1E1EB
- statusBar.border#D7D7EB
- statusBar.debuggingBackground#F0F0F0
- statusBar.debuggingForeground#403f53
- statusBar.foreground#403f53
- statusBar.noFolderBackground#F0F0F0
- statusBar.noFolderForeground#403f53
- tab.activeBackground#F6F6FC
- tab.activeForeground#403f53
- tab.activeModifiedBorder#8382E6
- tab.border#E1E1EB
- tab.inactiveBackground#E1E1EB
- tab.inactiveForeground#403f53
- tab.inactiveModifiedBorder#93A1A1
- tab.unfocusedActiveModifiedBorder#93A1A1
- tab.unfocusedInactiveModifiedBorder#93A1A1
- terminal.ansiBlack#403f53
- terminal.ansiBlue#288ed7
- terminal.ansiBrightBlack#403f53
- terminal.ansiBrightBlue#288ed7
- terminal.ansiBrightCyan#8382E6
- terminal.ansiBrightGreen#08916a
- terminal.ansiBrightMagenta#d6438a
- terminal.ansiBrightRed#de3d3b
- terminal.ansiBrightWhite#F0F0F0
- terminal.ansiBrightYellow#daaa01
- terminal.ansiCyan#8382E6
- terminal.ansiGreen#08916a
- terminal.ansiMagenta#d6438a
- terminal.ansiRed#de3d3b
- terminal.ansiWhite#F0F0F0
- terminal.ansiYellow#E0AF02
- terminal.background#F6F6F6
- terminal.foreground#403f53
- titleBar.activeBackground#E1E1EB
- widget.shadow#d9d9d9
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| bold, support.class.ruby, variable.other.block.ruby, variable.other.ruby, variable, entity.name.type.class.ruby, entity.other.attribute-name.id, entity.name.tag.id.haml, meta.definition.function.ts entity.name.function.ts | — | bold |
| italic, variable.other.property.js, storage.type.js, quote, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css, markup.italic.markdown, entity.name.function, meta.tag.sgml.doctype.html, entity.name.tag.less, keyword.operator.relational, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, meta.delimiter.period, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, keyword.control, keyword.other.unit.scss, keyword.other.unit.sass, markup.inserted.diff, entity.other.attribute-name, entity.name.function, markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, italic | — | italic |
| darkGray, quote, meta.property-value.scss, markup.quote.markdown, string.template punctuation.definition.string, variable.parameter.function.coffee, meta.js punctuation.definition.js, terminator.js, variable.other.readwrite.cs, meta.preprocessor.macro.cpp, variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other, support.class.js, variable.js, variable.other.js, string.other.link.title.markdown, string.other.link.description.markdown, meta.function-call.php punctuation, punctuation.python, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts, meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, variable.parameter, meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx, meta.brace, punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array | #403f53 | — |
| cloudy-blue, entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, meta.function punctuation.separator.comma | #5f7e97 | — |
| cyan, variable.other.jsdoc, variable.other.phpdoc, variable.assignment.coffee | #2EA9FF | — |
| comment | #BBBBBF | italic |
| text-color-dark, keyword.operator.assignment, variable.scss, keyword.operator.assignment.js | #403f53 | — |
| light-gray, comment.line.double-slash, punctuation.definition.tag.haml | #BBBBBF | — |
| lime, keyword.other.important.scss | #859900 | — |
| teal, variable, variable.other.block.ruby, variable.other.ruby, meta.block.parameters.ruby, meta.var-single-variable.expr.js, meta.var.expr.js, string.quoted, meta.structure.dictionary.value.json string.quoted.double, support.type.property-name.css, meta.function-call.python, meta.function-call.generic.python, entity.name.tag.scss, entity.name.tag.sass, punctuation.definition.metadata.markdown, support.constant.meta.property-value, keyword.operator, variable.parameter.function, support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag, meta.property-name, keyword.control.operator, variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.property, support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control, variable.language, support.variable.property, raw, variable.assignment.coffee, entity.name.type.namespace.cs, entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, constant.keyword.clojure, source.go meta.function-call.go, entity.name.function.preprocessor.cpp, entity.scope.name.cpp, support.function.powershell, variable.other.object.js, keyword.other.unit.css, markup.inline.raw.markdown | #2AA198 | — |
| teal-soft | #2AA198aa | — |
| brick-orange, punctuation.definition.constant.ruby, punctuation.definition.parameters, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.list, punctuation.separator.arguments, entity.other.attribute-name.pseudo-class.css, punctuation.section.embedded, string.template meta.template.expression, constant.language.boolean, constant.language.null, source.go constant.language.go, source.go constant.other.placeholder.go, storage.type.language.primitive.cpp, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, constant.language.python | #CB4B16 | — |
| 777777, entity.name.tag.haml, support.type.property-name.json, string.quoted.double.json punctuation.definition.string.json, support.function.misc.scss, variable.other.object.property, variable.parameter, meta.class entity.name.type.class.js, entity.name.type.js, entity.name.type.module.js, variable.other.php, variable.other.property.php, support.class.php, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, entity.name.type.ts, entity.name.type.tsx, entity.name.tag.yaml, meta.class entity.name.type.class.tsx, entity.name.type.tsx, entity.name.type.module.tsx, entity.name.class, meta.class entity.name.type.class, meta.namespace-block.cpp | #777777 | — |
| purple, variable.other.readwrite.js, support.class.ruby, variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx, variable.other.property.js, variable.scss, constant.language.symbol.hashkey.ruby, punctuation.definition.constant.hashkey.ruby, entity.name.type.class.ruby, entity.name.tag.id.haml, punctuation.definition.constant, punctuation.definition.constant.ruby, constant.language.symbol.ruby, support.function, punctuation.separator.method.ruby, meta.property-list entity.name.tag.reference, variable.parameter.function.js, constant.other.color.rgb-value punctuation.definition.constant, keyword.other.unit, meta.attribute-selector.less entity.other.attribute-name.attribute, source.python variable.language.special, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, support.class.component.js, support.class.component.tsx, constant.character.numeric, constant.character.escape, constant.other.color, entity.other.attribute-name.id, meta.attribute-selector.css entity.other.attribute-name.attribute | #5253C4 | — |
| purple-soft, storage.type.js, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css | #5253C4aa | — |
| gold, keyword.operator.logical.ruby, keyword.control.def.ruby, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.ruby, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, variable.other.constant | #D39600 | — |
| gold-soft | #D3960077 | — |
| pink, constant.language, constant.numeric, support.class, markup.underline.link.markdown, markup.underline.link.image.markdown, markup.deleted.diff, variable.interpolation, invalid, meta.at-rule.include.scss, invalid.illegal | #D33682 | — |
| red, support.constant.property-value.css, punctuation.definition.string, punctuation.definition.string.begin.markdown, source.elixir punctuation.definition.string, punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string | #DC322F | — |
| blue, source.ruby, variable.other.readwrite.instance, string.regexp, string.regexp keyword.other, variable.parameter.function.python, meta.function-call.arguments.python, entity.name.function.decorator.python, variable.parameter.url.scss, variable.parameter.url.sass, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, support.class.node.ts, support.class.node.tsx, meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.tag.js meta.jsx.children.tsx, meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx, markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, entity.name.tag.custom, variable.function, meta.function-call, entity.name.type.class.cs, storage.type.cs, keyword.other.unit.css, source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir entity.name.function, source.elixir constant.other.symbol.elixir, source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir constant.other.keywords.elixir, variable.other.readwrite.powershell, entity.other.attribute-name.id.html, meta.method.declaration storage.type.js, support.constant.json, markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, markup.bold.markdown, beginning.punctuation.definition.list.markdown, markup.inline.raw.string.markdown, variable.other.global.php, variable.other.global.php punctuation.definition.variable, support.constant, support.variable.dom, support.type, entity.name.function, entity.name.class, entity.name.tag.class.haml, entity.other.inherited-class, entity.other.attribute-name, markup.inserted.diff, string, support.constant.math, constant.character, constant.other, keyword.operator.relational, keyword.other.unit.scss, keyword.other.unit.sass, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, storage, storage.type, markup.italic.markdown, keyword.control, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, punctuation.accessor, keyword, source.elixir .punctuation.binary.elixir, keyword.operator.logical, entity.name.function, punctuation.definition.tag, meta.tag, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.switch.js, keyword.control.switch.ts, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, punctuation.definition.tag.html, meta.tag.sgml.doctype.html, meta.delimiter.period | #2466D2 | — |
| blue-soft, keyword.control.def.ruby | #2466D2aa | — |
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#1a1a1a
- activityBar.border#00000060
- activityBar.foreground#EEFFFF
- activityBarBadge.background#80CBC4
- activityBarBadge.foreground#000000
- badge.background#00000030
- badge.foreground#4A4A4A
- button.background#61616150
- debugToolBar.background#212121
- diffEditor.insertedTextBackground#C3E88D15
- diffEditor.removedTextBackground#FF537020
- dropdown.background#212121
- dropdown.border#FFFFFF10
- editor.background#041E27
- editor.foreground#839496
- editor.lineHighlightBackground#0A2933
- editor.selectionBackground#0A2933
- editor.selectionHighlightBackground#B5890020
- editorBracketMatch.background#212121
- editorBracketMatch.border#B5890050
- editorCursor.foreground#b58900
- editorError.foreground#DC322Faa
- editorGroup.border#00000030
- editorGroupHeader.tabsBackground#212121
- editorGutter.addedBackground#C3E88D60
- editorGutter.deletedBackground#FF537060
- editorGutter.modifiedBackground#82AAFF60
- editorHoverWidget.background#212121
- editorHoverWidget.border#FFFFFF10
- editorIndentGuide.background#42424270
- editorLineNumber.activeForeground#848484
- editorLineNumber.foreground#84848444
- editorLink.activeForeground#EEFFFF
- editorMarkerNavigation.background#EEFFFF05
- editorOverviewRuler.border#212121
- editorRuler.foreground#42424270
- editorSuggestWidget.background#212121
- editorSuggestWidget.border#FFFFFF10
- editorSuggestWidget.foreground#EEFFFF
- editorSuggestWidget.highlightForeground#80CBC4
- editorSuggestWidget.selectedBackground#00000050
- editorWarning.foreground#B58900aa
- editorWhitespace.foreground#EEFFFF40
- editorWidget.background#1a1a1a
- extensionButton.prominentBackground#C3E88D90
- extensionButton.prominentHoverBackground#C3E88D
- focusBorder#FFFFFF00
- gitDecoration.conflictingResourceForeground#B58900
- gitDecoration.deletedResourceForeground#DC322F
- gitDecoration.ignoredResourceForeground#84848490
- gitDecoration.modifiedResourceForeground#6C71C4
- gitDecoration.untrackedResourceForeground#C3E88D90
- input.background#FFFFFF05
- input.border#FFFFFF10
- input.foreground#EEFFFF
- input.placeholderForeground#EEFFFF60
- inputValidation.errorBorder#FF537050
- inputValidation.infoBorder#82AAFF50
- inputValidation.warningBorder#FFCB6B50
- list.activeSelectionBackground#2EAFA277
- list.activeSelectionForeground#FFFFFF
- list.focusBackground#2EAFA277
- list.focusForeground#FFFFFF
- list.highlightForeground#2EAFA2
- list.hoverBackground#00000040
- list.hoverForeground#FFFFFF
- list.inactiveSelectionBackground#00000030
- list.inactiveSelectionForeground#2EAFA2
- notificationLink.foreground#80CBC4
- notifications.background#212121
- notifications.foreground#EEFFFF
- panel.background#1a1a1a
- panel.border#00000060
- panelTitle.activeForeground#EEFFFF
- peekView.border#00000030
- peekViewEditor.background#EEFFFF05
- peekViewEditor.matchHighlightBackground#61616150
- peekViewEditorGutter.background#EEFFFF05
- peekViewResult.background#EEFFFF05
- peekViewResult.matchHighlightBackground#61616150
- peekViewResult.selectionBackground#84848470
- peekViewTitle.background#EEFFFF05
- peekViewTitleDescription.foreground#EEFFFF60
- pickerGroup.foreground#80CBC4
- progressBar.background#80CBC4
- scrollbar.shadow#21212100
- scrollbarSlider.activeBackground#00000050
- scrollbarSlider.background#00000070
- scrollbarSlider.hoverBackground#00000030
- selection.background#F35717dd
- sideBar.background#1E232A
- sideBar.border#00000060
- sideBar.foreground#767C89
- sideBarSectionHeader.background#1C2026
- sideBarTitle.foreground#EEFFFF
- statusBar.background#1a1a1a
- statusBar.border#00000060
- statusBar.debuggingBackground#C792EA
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#616161
- statusBar.noFolderBackground#212121
- tab.activeBackground#2b303b
- tab.activeForeground#ddefe6
- tab.border#212121
- tab.inactiveBackground#212121
- tab.inactiveForeground#848484
- tab.unfocusedActiveBorder#4A4A4A
- tab.unfocusedActiveForeground#EEFFFF
- terminal.ansiBlack#93A1A1
- terminal.ansiBlue#288ed7
- terminal.ansiBrightBlack#93A1A1
- terminal.ansiBrightBlue#288ed7
- terminal.ansiBrightCyan#2AA298
- terminal.ansiBrightGreen#08916a
- terminal.ansiBrightMagenta#d6438a
- terminal.ansiBrightRed#de3d3b
- terminal.ansiBrightWhite#212121
- terminal.ansiBrightYellow#daaa01
- terminal.ansiCyan#2AA298
- terminal.ansiGreen#08916a
- terminal.ansiMagenta#d6438a
- terminal.ansiRed#de3d3b
- terminal.ansiWhite#212121
- terminal.ansiYellow#E0AF02
- terminal.background#2B303B
- terminal.foreground#93A1A1
- textLink.activeForeground#EEFFFF
- textLink.foreground#80CBC4
- titleBar.activeBackground#1a1a1a
- titleBar.activeForeground#4A4A4A
- titleBar.border#00000060
- titleBar.inactiveBackground#1a1a1a
- titleBar.inactiveForeground#4A4A4A
- widget.shadow#00000030
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| bold, variable.other.readwrite.instance, variable.other.readwrite.js, variable.parameter, variable.other.ruby, entity.other.attribute-name.id, entity.name.tag.id.haml, entity.other.attribute-name.id.html, variable.other.block.ruby | — | bold |
| italic, entity.name.function, support.function.core.ruby, variable.other.property.js, storage.type.js, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css, italic | — | italic |
| darkGray, quote, meta.property-value.scss, markup.quote.markdown, string.template punctuation.definition.string, variable.parameter.function.coffee, meta.js punctuation.definition.js, terminator.js, variable.other.readwrite.cs, meta.preprocessor.macro.cpp, variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other, support.class.js, variable.js, variable.other.js, string.other.link.title.markdown, string.other.link.description.markdown, meta.function-call.php punctuation, punctuation.python, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts, meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx, meta.brace, punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array | #93A1A1 | — |
| cloudy-blue, entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, meta.function punctuation.separator.comma | #5f7e97 | — |
| cyan, variable.other.jsdoc, variable.other.phpdoc, variable.assignment.coffee | #2EA9FF | — |
| comment | #586E75 | italic |
| text-color-dark, punctuation.section.function.ruby | #93A1A1 | — |
| light-gray, comment.line.double-slash | #586E75 | — |
| lime, keyword.control, keyword.control.at-rule.include.scss, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, variable.other.block.ruby, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, keyword.operator.assignment, keyword.operator.comparison, keyword.control.module.ruby, keyword.control.class.ruby, keyword.operator.relational, string.regexp, string.regexp keyword.other, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.operator, keyword.operator.logical.ruby, meta.block.parameters.ruby, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.ruby, keyword.other.important.scss | #859900 | — |
| blue, punctuation.accessor, entity.name.function, entity.name.tag.yaml, punctuation.separator.method.ruby, entity.name.tag.html, support.function.core.ruby, punctuation.definition.tag.html, entity.name.tag.class.haml, entity.name.tag.id.haml, entity.other.attribute-name.id.html, entity.other.attribute-name, variable.other.ruby, entity.name.function.ruby, variable.parameter, variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx, variable.other.property.js, storage, storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js, meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx, storage.type.cs, meta.method.declaration storage.type.js, variable, meta.var-single-variable.expr.js, meta.var.expr.js, meta.function-call.python, meta.function-call.generic.python, entity.name.tag.scss, entity.name.tag.sass, punctuation.definition.metadata.markdown, support.constant.meta.property-value, variable.parameter.function, support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag, meta.property-name, keyword.control.operator, variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.property, support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, variable.language, support.variable.property, raw, variable.assignment.coffee, entity.name.type.namespace.cs, entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, constant.keyword.clojure, source.go meta.function-call.go, entity.name.function.preprocessor.cpp, entity.scope.name.cpp, support.function.powershell, variable.other.object.js, keyword.other.unit.css, markup.inline.raw.markdown | #268BD2 | — |
| blue-soft, punctuation.definition.parameters, entity.name.tag.haml, keyword.control.def.ruby, storage.type.js, meta.tag, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype | #268BD2aa | — |
| teal, string.quoted, meta.structure.dictionary.value.json string.quoted.double, support.constant.property-value.css | #269186 | — |
| brick-orange, support.class, support.class.ruby, entity.name.type.ts, entity.name.type.tsx, entity.name.type.js, entity.name.type.module.js, entity.name.type.tsx, entity.name.type.module.tsx, entity.name.class, constant.character.escape, variable.language.this.js, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.list, punctuation.separator.arguments, entity.other.attribute-name.pseudo-class.css, punctuation.section.embedded, string.template meta.template.expression, constant.language.boolean, constant.language.null, source.go constant.language.go, source.go constant.other.placeholder.go, storage.type.language.primitive.cpp, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, constant.language.python | #CB4B16 | — |
| 777777, variable.parameter, support.type.property-name.json, string.quoted.double.json punctuation.definition.string.json, support.function.misc.scss, meta.class entity.name.type.class.js, variable.other.php, variable.other.property.php, support.class.php, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, meta.class entity.name.type.class.tsx, meta.class entity.name.type.class, meta.namespace-block.cpp | #777777 | — |
| purple, variable.other.readwrite.instance, constant.numeric, constant.character.numeric, variable.scss, entity.name.type.class.ruby, punctuation.definition.constant, meta.property-list entity.name.tag.reference, variable.parameter.function.js, constant.other.color.rgb-value punctuation.definition.constant, keyword.other.unit, meta.attribute-selector.less entity.other.attribute-name.attribute, source.python variable.language.special, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, support.class.component.js, support.class.component.tsx, constant.other.color, meta.attribute-selector.css entity.other.attribute-name.attribute | #6C71C4 | — |
| purple-soft, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css | #6C71C4aa | — |
| gold, support.type.property-name.css, constant.language.symbol.hashkey.ruby, punctuation.definition.constant.hashkey.ruby, punctuation.definition.constant.ruby, constant.language.symbol.ruby, support.function, variable.other.constant | #B38700 | — |
| gold-soft, punctuation.separator.key-value, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby, punctuation.separator.object.ruby | #B38700aa | — |
| pink, constant.language, markup.underline.link.markdown, markup.underline.link.image.markdown, markup.deleted.diff, variable.interpolation, invalid, meta.at-rule.include.scss, invalid.illegal | #D33682 | — |
| red, punctuation.definition.string, punctuation.definition.string.begin.markdown, source.elixir punctuation.definition.string, punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string | #DC322F | — |
| gold, source.ruby, variable.parameter.function.python, meta.function-call.arguments.python, entity.name.function.decorator.python, variable.parameter.url.scss, variable.parameter.url.sass, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, support.class.node.ts, support.class.node.tsx, meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.tag.js meta.jsx.children.tsx, markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, entity.name.tag.custom, variable.function, meta.function-call, entity.name.type.class.cs, keyword.other.unit.css, source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir entity.name.function, source.elixir constant.other.symbol.elixir, source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir constant.other.keywords.elixir, variable.other.readwrite.powershell, support.constant.json, markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, markup.bold.markdown, beginning.punctuation.definition.list.markdown, markup.inline.raw.string.markdown, variable.other.global.php, variable.other.global.php punctuation.definition.variable, support.constant, support.variable.dom, support.type, entity.name.class, entity.other.inherited-class, markup.inserted.diff, string, support.constant.math, constant.character, constant.other, keyword.other.unit.scss, keyword.other.unit.sass, markup.italic.markdown, meta.var.expr, keyword, source.elixir .punctuation.binary.elixir, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.switch.js, keyword.control.switch.ts, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, meta.tag.sgml.doctype.html, meta.delimiter.period | #B58900 | — |
| gold-soft | #B58900aa | — |
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#071A26
- activityBar.border#00000060
- activityBar.foreground#EEFFFF
- activityBarBadge.background#80CBC4
- activityBarBadge.foreground#000000
- badge.background#00000030
- badge.foreground#4A4A4A
- button.background#61616150
- debugToolBar.background#212121
- diffEditor.insertedTextBackground#C3E88D15
- diffEditor.removedTextBackground#FF537020
- dropdown.background#212121
- dropdown.border#FFFFFF10
- editor.background#0B293E
- editor.foreground#A2B7B9
- editor.lineHighlightBackground#00000030
- editor.selectionBackground#0A2933
- editor.selectionHighlightBackground#B5890020
- editorBracketMatch.background#212121
- editorBracketMatch.border#B5890050
- editorCursor.foreground#b58900
- editorError.foreground#DC322Faa
- editorGroup.border#00000030
- editorGroupHeader.tabsBackground#0B283B
- editorGutter.addedBackground#C3E88D60
- editorGutter.deletedBackground#FF537060
- editorGutter.modifiedBackground#82AAFF60
- editorHoverWidget.background#212121
- editorHoverWidget.border#FFFFFF10
- editorIndentGuide.background#42424270
- editorLineNumber.activeForeground#848484
- editorLineNumber.foreground#84848444
- editorLink.activeForeground#EEFFFF
- editorMarkerNavigation.background#EEFFFF05
- editorOverviewRuler.border#212121
- editorRuler.foreground#42424270
- editorSuggestWidget.background#212121
- editorSuggestWidget.border#FFFFFF10
- editorSuggestWidget.foreground#EEFFFF
- editorSuggestWidget.highlightForeground#80CBC4
- editorSuggestWidget.selectedBackground#00000050
- editorWarning.foreground#B58900aa
- editorWhitespace.foreground#EEFFFF40
- editorWidget.background#1a1a1a
- extensionButton.prominentBackground#C3E88D90
- extensionButton.prominentHoverBackground#C3E88D
- focusBorder#FFFFFF00
- gitDecoration.conflictingResourceForeground#B58900
- gitDecoration.deletedResourceForeground#DC322F
- gitDecoration.ignoredResourceForeground#84848490
- gitDecoration.modifiedResourceForeground#6C71C4
- gitDecoration.untrackedResourceForeground#C3E88D90
- input.background#FFFFFF05
- input.border#FFFFFF10
- input.foreground#EEFFFF
- input.placeholderForeground#EEFFFF60
- inputValidation.errorBorder#FF537050
- inputValidation.infoBorder#82AAFF50
- inputValidation.warningBorder#FFCB6B50
- list.activeSelectionBackground#2EAFA266
- list.activeSelectionForeground#FFFFFF
- list.focusBackground#2EAFA266
- list.focusForeground#FFFFFF
- list.highlightForeground#FFFFFF
- list.hoverBackground#00000040
- list.hoverForeground#FFFFFF
- list.inactiveSelectionBackground#00000030
- list.inactiveSelectionForeground#2EAFA2
- notificationLink.foreground#80CBC4
- notifications.background#212121
- notifications.foreground#EEFFFF
- panel.background#1a1a1a
- panel.border#00000060
- panelTitle.activeForeground#EEFFFF
- peekView.border#00000030
- peekViewEditor.background#EEFFFF05
- peekViewEditor.matchHighlightBackground#61616150
- peekViewEditorGutter.background#EEFFFF05
- peekViewResult.background#EEFFFF05
- peekViewResult.matchHighlightBackground#61616150
- peekViewResult.selectionBackground#84848470
- peekViewTitle.background#EEFFFF05
- peekViewTitleDescription.foreground#EEFFFF60
- pickerGroup.foreground#80CBC4
- progressBar.background#80CBC4
- scrollbar.shadow#21212100
- scrollbarSlider.activeBackground#00000050
- scrollbarSlider.background#00000070
- scrollbarSlider.hoverBackground#00000030
- selection.background#F35717dd
- sideBar.background#124263
- sideBar.border#00000060
- sideBar.foreground#ffffff93
- sideBarSectionHeader.background#00000030
- sideBarTitle.foreground#EEFFFF
- statusBar.background#071A26
- statusBar.border#00000060
- statusBar.debuggingBackground#C792EA
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#616161
- statusBar.noFolderBackground#212121
- tab.activeBackground#0B293E
- tab.activeForeground#ddefe6
- tab.border#212121
- tab.inactiveBackground#071A26
- tab.inactiveForeground#848484
- tab.unfocusedActiveBorder#071A26
- tab.unfocusedActiveForeground#EEFFFF
- terminal.ansiBlack#93A1A1
- terminal.ansiBlue#288ed7
- terminal.ansiBrightBlack#93A1A1
- terminal.ansiBrightBlue#288ed7
- terminal.ansiBrightCyan#2AA298
- terminal.ansiBrightGreen#08916a
- terminal.ansiBrightMagenta#d6438a
- terminal.ansiBrightRed#de3d3b
- terminal.ansiBrightWhite#212121
- terminal.ansiBrightYellow#daaa01
- terminal.ansiCyan#2AA298
- terminal.ansiGreen#08916a
- terminal.ansiMagenta#d6438a
- terminal.ansiRed#de3d3b
- terminal.ansiWhite#212121
- terminal.ansiYellow#E0AF02
- terminal.background#2B303B
- terminal.foreground#93A1A1
- textLink.activeForeground#EEFFFF
- textLink.foreground#80CBC4
- titleBar.activeBackground#071A26
- titleBar.activeForeground#4A4A4A
- titleBar.border#00000060
- titleBar.inactiveBackground#071A26
- titleBar.inactiveForeground#4A4A4A
- widget.shadow#00000030
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| bold, variable.other.readwrite.instance, variable.other.readwrite.js, variable.parameter, variable.other.ruby, entity.other.attribute-name.id, entity.name.tag.id.haml, entity.other.attribute-name.id.html, variable.other.block.ruby | — | bold |
| italic, entity.name.function, support.function.core.ruby, variable.other.property.js, storage.type.js, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css, italic | — | italic |
| darkGray, quote, meta.property-value.scss, markup.quote.markdown, string.template punctuation.definition.string, variable.parameter.function.coffee, meta.js punctuation.definition.js, terminator.js, variable.other.readwrite.cs, meta.preprocessor.macro.cpp, variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other, support.class.js, variable.js, variable.other.js, string.other.link.title.markdown, string.other.link.description.markdown, meta.function-call.php punctuation, punctuation.python, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts, meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx, meta.brace, punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array | #93A1A1 | — |
| cloudy-blue, entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, meta.function punctuation.separator.comma | #5f7e97 | — |
| cyan, variable.other.jsdoc, variable.other.phpdoc, variable.assignment.coffee | #2EA9FF | — |
| comment | #96B2C5bb | italic |
| text-color-dark, punctuation.section.function.ruby | #93A1A1 | — |
| light-gray, comment.line.double-slash | #586E75 | — |
| lime, keyword.control, keyword.control.at-rule.include.scss, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, variable.other.block.ruby, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, keyword.operator.assignment, keyword.operator.comparison, keyword.control.module.ruby, keyword.control.class.ruby, keyword.operator.relational, string.regexp, string.regexp keyword.other, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.operator, keyword.operator.logical.ruby, meta.block.parameters.ruby, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.ruby, keyword.other.important.scss | #99B000 | — |
| blue, punctuation.accessor, entity.name.function, entity.name.tag.yaml, punctuation.separator.method.ruby, entity.name.tag.html, support.function.core.ruby, punctuation.definition.tag.html, entity.name.tag.class.haml, entity.name.tag.id.haml, entity.other.attribute-name.id.html, entity.other.attribute-name, variable.other.ruby, entity.name.function.ruby, variable.parameter, variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx, variable.other.property.js, storage, storage.type, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, meta.class meta.method.declaration meta.var.expr storage.type.js, meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx, storage.type.cs, meta.method.declaration storage.type.js, variable, meta.var-single-variable.expr.js, meta.var.expr.js, meta.function-call.python, meta.function-call.generic.python, entity.name.tag.scss, entity.name.tag.sass, punctuation.definition.metadata.markdown, support.constant.meta.property-value, variable.parameter.function, support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag, meta.property-name, keyword.control.operator, variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.property, support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, variable.language, support.variable.property, raw, variable.assignment.coffee, entity.name.type.namespace.cs, entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, constant.keyword.clojure, source.go meta.function-call.go, entity.name.function.preprocessor.cpp, entity.scope.name.cpp, support.function.powershell, variable.other.object.js, keyword.other.unit.css, markup.inline.raw.markdown | #2997E4 | — |
| blue-soft, punctuation.definition.parameters, entity.name.tag.haml, keyword.control.def.ruby, storage.type.js, meta.tag, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype | #2997E4aa | — |
| teal, string.quoted, meta.structure.dictionary.value.json string.quoted.double, support.constant.property-value.css | #2EAFA2 | — |
| brick-orange, support.class, support.class.ruby, entity.name.type.ts, entity.name.type.tsx, entity.name.type.js, entity.name.type.module.js, entity.name.type.tsx, entity.name.type.module.tsx, entity.name.class, constant.character.escape, variable.language.this.js, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.list, punctuation.separator.arguments, entity.other.attribute-name.pseudo-class.css, punctuation.section.embedded, string.template meta.template.expression, constant.language.boolean, constant.language.null, source.go constant.language.go, source.go constant.other.placeholder.go, storage.type.language.primitive.cpp, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, constant.language.python | #F35717 | — |
| 777777, variable.parameter, support.type.property-name.json, string.quoted.double.json punctuation.definition.string.json, support.function.misc.scss, meta.class entity.name.type.class.js, variable.other.php, variable.other.property.php, support.class.php, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, meta.class entity.name.type.class.tsx, meta.class entity.name.type.class, meta.namespace-block.cpp | #999999 | — |
| purple, variable.other.readwrite.instance, constant.numeric, constant.character.numeric, variable.scss, entity.name.type.class.ruby, punctuation.definition.constant, meta.property-list entity.name.tag.reference, variable.parameter.function.js, constant.other.color.rgb-value punctuation.definition.constant, keyword.other.unit, meta.attribute-selector.less entity.other.attribute-name.attribute, source.python variable.language.special, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, support.class.component.js, support.class.component.tsx, constant.other.color, meta.attribute-selector.css entity.other.attribute-name.attribute | #7378CE | — |
| purple-soft, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css | #7378CEaa | — |
| gold, support.type.property-name.css, constant.language.symbol.hashkey.ruby, punctuation.definition.constant.hashkey.ruby, punctuation.definition.constant.ruby, constant.language.symbol.ruby, support.function, variable.other.constant | #D4A000 | — |
| gold-soft, punctuation.separator.key-value, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby, punctuation.separator.object.ruby | #D4A000aa | — |
| pink, constant.language, markup.underline.link.markdown, markup.underline.link.image.markdown, markup.deleted.diff, variable.interpolation, invalid, meta.at-rule.include.scss, invalid.illegal | #E63B8E | — |
| red, punctuation.definition.string, punctuation.definition.string.begin.markdown, source.elixir punctuation.definition.string, punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string | #F53330 | — |
| gold, source.ruby, variable.parameter.function.python, meta.function-call.arguments.python, entity.name.function.decorator.python, variable.parameter.url.scss, variable.parameter.url.sass, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, support.class.node.ts, support.class.node.tsx, meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.tag.js meta.jsx.children.tsx, markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, entity.name.tag.custom, variable.function, meta.function-call, entity.name.type.class.cs, keyword.other.unit.css, source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir entity.name.function, source.elixir constant.other.symbol.elixir, source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir constant.other.keywords.elixir, variable.other.readwrite.powershell, support.constant.json, markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, markup.bold.markdown, beginning.punctuation.definition.list.markdown, markup.inline.raw.string.markdown, variable.other.global.php, variable.other.global.php punctuation.definition.variable, support.constant, support.variable.dom, support.type, entity.name.class, entity.other.inherited-class, markup.inserted.diff, string, support.constant.math, constant.character, constant.other, keyword.other.unit.scss, keyword.other.unit.sass, markup.italic.markdown, meta.var.expr, keyword, source.elixir .punctuation.binary.elixir, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.switch.js, keyword.control.switch.ts, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, meta.tag.sgml.doctype.html, meta.delimiter.period | #D4A000 | — |
| gold-soft | #D4A000aa | — |
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#F0F0F0
- activityBar.border#F0F0F0
- activityBar.foreground#403f53
- activityBarBadge.background#403f53
- activityBarBadge.foreground#F0F0F0
- badge.background#2AA298
- badge.foreground#F0F0F0
- button.background#2AA298
- button.foreground#F0F0F0
- debugExceptionWidget.background#F0F0F0
- debugExceptionWidget.border#d9d9d9
- debugToolBar.background#F0F0F0
- descriptionForeground#403f53
- dropdown.background#F0F0F0
- dropdown.border#d9d9d9
- dropdown.foreground#403f53
- editor.background#fefefe
- editor.findMatchBackground#93A1A16c
- editor.findMatchHighlightBackground#ffcd00
- editor.findRangeHighlightBackground#E0E7EA
- editor.foreground#403f53
- editor.hoverHighlightBackground#d3e8f8
- editor.lineHighlightBackground#F0F0F0
- editor.rangeHighlightBackground#E0E7EA
- editor.selectionBackground#E0E0E0
- editor.selectionHighlightBackground#d3e8f8
- editor.wordHighlightBackground#d3e8f8
- editor.wordHighlightStrongBackground#A3CFEE
- editorBracketMatch.background#d3e8f8
- editorBracketMatch.border#2AA298
- editorCodeLens.foreground#403f53
- editorCursor.foreground#90A7B2
- editorError.border#FBFBFB
- editorError.foreground#E64D49
- editorGroup.border#F0F0F0
- editorGroupHeader.noTabsBackground#F0F0F0
- editorGroupHeader.tabsBackground#F0F0F0
- editorGroupHeader.tabsBorder#F0F0F0
- editorGutter.addedBackground#49d0c5
- editorGutter.deletedBackground#f76e6e
- editorGutter.modifiedBackground#6fbef6
- editorHoverWidget.background#F0F0F0
- editorHoverWidget.border#d9d9d9
- editorIndentGuide.activeBackground#888888
- editorIndentGuide.background#d9d9d9
- editorLineNumber.activeForeground#403f53
- editorLineNumber.foreground#90A7B2
- editorMarkerNavigation.background#D0D0D0
- editorMarkerNavigationError.background#f76e6e
- editorMarkerNavigationWarning.background#daaa01
- editorOverviewRuler.errorForeground#E64D49
- editorOverviewRuler.warningForeground#daaa01
- editorRuler.foreground#d9d9d9
- editorSuggestWidget.background#F0F0F0
- editorSuggestWidget.border#d9d9d9
- editorSuggestWidget.foreground#403f53
- editorSuggestWidget.highlightForeground#403f53
- editorSuggestWidget.selectedBackground#d3e8f8
- editorWarning.border#daaa01
- editorWarning.foreground#daaa01
- editorWhitespace.foreground#d9d9d9
- editorWidget.background#F0F0F0
- editorWidget.border#d9d9d9
- errorForeground#403f53
- extensionButton.prominentBackground#2AA298
- extensionButton.prominentForeground#F0F0F0
- focusBorder#93A1A1
- foreground#403f53
- input.background#F0F0F0
- input.border#d9d9d9
- input.foreground#403f53
- input.placeholderForeground#93A1A1
- inputOption.activeBorder#2AA298
- inputValidation.errorBackground#f76e6e
- inputValidation.errorBorder#de3d3b
- inputValidation.infoBackground#F0F0F0
- inputValidation.infoBorder#D0D0D0
- inputValidation.warningBackground#daaa01
- inputValidation.warningBorder#E0AF02
- list.activeSelectionBackground#0BADA933
- list.activeSelectionForeground#403f53
- list.errorForeground#E64D49
- list.focusBackground#0BADA911
- list.focusForeground#403f53
- list.highlightForeground#403f53
- list.hoverBackground#0BADA911
- list.hoverForeground#403f53
- list.inactiveSelectionBackground#0BADA933
- list.inactiveSelectionForeground#403f53
- list.warningForeground#daaa01
- notificationCenter.border#CCCCCC
- notificationCenterHeader.background#F0F0F0
- notificationCenterHeader.foreground#403f53
- notificationLink.foreground#2466D2
- notifications.background#F0F0F0
- notifications.border#CCCCCC
- notifications.foreground#403f53
- notificationToast.border#CCCCCC
- panel.background#F0F0F0
- panel.border#d9d9d9
- peekView.border#d9d9d9
- peekViewEditor.background#F6F6F6
- peekViewEditor.matchHighlightBackground#49d0c5
- peekViewEditorGutter.background#F6F6F6
- peekViewResult.background#F0F0F0
- peekViewResult.fileForeground#403f53
- peekViewResult.lineForeground#403f53
- peekViewResult.matchHighlightBackground#49d0c5
- peekViewResult.selectionBackground#0BADA933
- peekViewResult.selectionForeground#2AA198
- peekViewTitle.background#F0F0F0
- peekViewTitleDescription.foreground#403f53
- peekViewTitleLabel.foreground#403f53
- pickerGroup.border#d9d9d9
- pickerGroup.foreground#403f53
- progressBar.background#2AA298
- scrollbar.shadow#CCCCCC
- selection.background#FFAA00
- sideBar.background#F0F0F0
- sideBar.border#F0F0F0
- sideBar.foreground#403f53
- sideBarTitle.foreground#403f53
- statusBar.background#F0F0F0
- statusBar.border#F0F0F0
- statusBar.debuggingBackground#F0F0F0
- statusBar.debuggingForeground#403f53
- statusBar.foreground#403f53
- statusBar.noFolderBackground#F0F0F0
- statusBar.noFolderForeground#403f53
- tab.activeBackground#fcfcfc
- tab.activeForeground#403f53
- tab.activeModifiedBorder#2AA298
- tab.border#F0F0F0
- tab.inactiveBackground#F0F0F0
- tab.inactiveForeground#403f53
- tab.inactiveModifiedBorder#93A1A1
- tab.unfocusedActiveModifiedBorder#93A1A1
- tab.unfocusedInactiveModifiedBorder#93A1A1
- terminal.ansiBlack#403f53
- terminal.ansiBlue#288ed7
- terminal.ansiBrightBlack#403f53
- terminal.ansiBrightBlue#288ed7
- terminal.ansiBrightCyan#2AA298
- terminal.ansiBrightGreen#08916a
- terminal.ansiBrightMagenta#d6438a
- terminal.ansiBrightRed#de3d3b
- terminal.ansiBrightWhite#F0F0F0
- terminal.ansiBrightYellow#daaa01
- terminal.ansiCyan#2AA298
- terminal.ansiGreen#08916a
- terminal.ansiMagenta#d6438a
- terminal.ansiRed#de3d3b
- terminal.ansiWhite#F0F0F0
- terminal.ansiYellow#E0AF02
- terminal.background#F6F6F6
- terminal.foreground#403f53
- titleBar.activeBackground#F0F0F0
- widget.shadow#d9d9d9
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| bold, support.class.ruby, variable.other.block.ruby, variable.other.ruby, variable, entity.name.type.class.ruby, entity.other.attribute-name.id, entity.name.tag.id.haml, meta.definition.function.ts entity.name.function.ts | — | bold |
| italic, variable.other.property.js, storage.type.js, quote, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css, markup.italic.markdown, entity.name.function, meta.tag.sgml.doctype.html, entity.name.tag.less, keyword.operator.relational, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, meta.delimiter.period, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, keyword.control, keyword.other.unit.scss, keyword.other.unit.sass, markup.inserted.diff, entity.other.attribute-name, entity.name.function, markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, markup.deleted.diff, italic | — | italic |
| darkGray, quote, meta.property-value.scss, markup.quote.markdown, string.template punctuation.definition.string, variable.parameter.function.coffee, meta.js punctuation.definition.js, terminator.js, variable.other.readwrite.cs, meta.preprocessor.macro.cpp, variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other, support.class.js, variable.js, variable.other.js, string.other.link.title.markdown, string.other.link.description.markdown, meta.function-call.php punctuation, punctuation.python, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts, meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, variable.parameter, meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx, meta.brace, punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array | #403f53 | — |
| cloudy-blue, entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc, meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type, meta.function punctuation.separator.comma | #5f7e97 | — |
| cyan, variable.other.jsdoc, variable.other.phpdoc, variable.assignment.coffee | #2EA9FF | — |
| comment | #999999 | italic |
| text-color-dark, keyword.operator.assignment, variable.scss, keyword.operator.assignment.js | #403f53 | — |
| light-gray, comment.line.double-slash, punctuation.definition.tag.haml | #cccccc | — |
| lime, keyword.other.important.scss | #859900 | — |
| teal, variable, variable.other.block.ruby, variable.other.ruby, meta.block.parameters.ruby, meta.var-single-variable.expr.js, meta.var.expr.js, string.quoted, meta.structure.dictionary.value.json string.quoted.double, support.type.property-name.css, meta.function-call.python, meta.function-call.generic.python, entity.name.tag.scss, entity.name.tag.sass, punctuation.definition.metadata.markdown, support.constant.meta.property-value, keyword.operator, variable.parameter.function, support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag, meta.property-name, keyword.control.operator, variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.property, support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control, variable.language, support.variable.property, raw, variable.assignment.coffee, entity.name.type.namespace.cs, entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, constant.keyword.clojure, source.go meta.function-call.go, entity.name.function.preprocessor.cpp, entity.scope.name.cpp, support.function.powershell, variable.other.object.js, keyword.other.unit.css, markup.inline.raw.markdown | #2AA198 | — |
| teal-soft | #2AA198aa | — |
| brick-orange, punctuation.definition.constant.ruby, punctuation.definition.parameters, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.list, punctuation.separator.arguments, entity.other.attribute-name.pseudo-class.css, punctuation.section.embedded, string.template meta.template.expression, constant.language.boolean, constant.language.null, source.go constant.language.go, source.go constant.other.placeholder.go, storage.type.language.primitive.cpp, meta.structure.dictionary.json meta.structure.dictionary.value constant.language, constant.language.python | #CB4B16 | — |
| 777777, entity.name.tag.haml, support.type.property-name.json, string.quoted.double.json punctuation.definition.string.json, support.function.misc.scss, variable.other.object.property, variable.parameter, meta.class entity.name.type.class.js, entity.name.type.js, entity.name.type.module.js, variable.other.php, variable.other.property.php, support.class.php, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, entity.name.type.ts, entity.name.type.tsx, entity.name.tag.yaml, meta.class entity.name.type.class.tsx, entity.name.type.tsx, entity.name.type.module.tsx, entity.name.class, meta.class entity.name.type.class, meta.namespace-block.cpp | #777777 | — |
| purple, variable.other.readwrite.js, support.class.ruby, variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx, variable.other.property.js, variable.scss, constant.language.symbol.hashkey.ruby, punctuation.definition.constant.hashkey.ruby, entity.name.type.class.ruby, entity.name.tag.id.haml, punctuation.definition.constant, punctuation.definition.constant.ruby, constant.language.symbol.ruby, support.function, punctuation.separator.method.ruby, meta.property-list entity.name.tag.reference, variable.parameter.function.js, constant.other.color.rgb-value punctuation.definition.constant, keyword.other.unit, meta.attribute-selector.less entity.other.attribute-name.attribute, source.python variable.language.special, meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute, support.class.component.js, support.class.component.tsx, constant.character.numeric, constant.character.escape, constant.other.color, entity.other.attribute-name.id, meta.attribute-selector.css entity.other.attribute-name.attribute | #5253C4 | — |
| purple-soft, storage.type.js, keyword.other.unit.px.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.percentage.css | #5253C4aa | — |
| gold, keyword.operator.logical.ruby, keyword.control.def.ruby, keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.ruby, entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, variable.other.constant | #D39600 | — |
| gold-soft | #D3960077 | — |
| pink, constant.language, constant.numeric, support.class, markup.underline.link.markdown, markup.underline.link.image.markdown, markup.deleted.diff, variable.interpolation, invalid, meta.at-rule.include.scss, invalid.illegal | #D33682 | — |
| red, support.constant.property-value.css, punctuation.definition.string, punctuation.definition.string.begin.markdown, source.elixir punctuation.definition.string, punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string | #DC322F | — |
| blue, source.ruby, variable.other.readwrite.instance, string.regexp, string.regexp keyword.other, variable.parameter.function.python, meta.function-call.arguments.python, entity.name.function.decorator.python, variable.parameter.url.scss, variable.parameter.url.sass, source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable, support.class.node.ts, support.class.node.tsx, meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx, meta.tag.js meta.jsx.children.tsx, meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx, markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file, entity.name.tag.custom, variable.function, meta.function-call, entity.name.type.class.cs, storage.type.cs, keyword.other.unit.css, source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir, source.elixir entity.name.function, source.elixir constant.other.symbol.elixir, source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir constant.other.keywords.elixir, variable.other.readwrite.powershell, entity.other.attribute-name.id.html, meta.method.declaration storage.type.js, support.constant.json, markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown, markup.bold.markdown, beginning.punctuation.definition.list.markdown, markup.inline.raw.string.markdown, variable.other.global.php, variable.other.global.php punctuation.definition.variable, support.constant, support.variable.dom, support.type, entity.name.function, entity.name.class, entity.name.tag.class.haml, entity.other.inherited-class, entity.other.attribute-name, markup.inserted.diff, string, support.constant.math, constant.character, constant.other, keyword.operator.relational, keyword.other.unit.scss, keyword.other.unit.sass, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, storage, storage.type, markup.italic.markdown, keyword.control, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, punctuation.accessor, keyword, source.elixir .punctuation.binary.elixir, keyword.operator.logical, entity.name.function, punctuation.definition.tag, meta.tag, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html, meta.selector, entity.name.tag.doctype, meta.tag.sgml.doctype, keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.switch.js, keyword.control.switch.ts, source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go, punctuation.definition.tag.html, meta.tag.sgml.doctype.html, meta.delimiter.period | #2466D2 | — |
| blue-soft, keyword.control.def.ruby | #2466D2aa | — |