Goldilocks Theme
Publisher: Jon EllwoodThemes in package: 1
Not too light, not too dark. Just right. A medium-contrast theme for developers who live in the middle.
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#1e2330
- activityBar.border#181d28
- activityBar.foreground#a0b0c8
- activityBar.inactiveForeground#506070
- activityBarBadge.background#f0a84a
- activityBarBadge.foreground#1e2330
- breadcrumb.activeSelectionForeground#d0d8e8
- breadcrumb.background#2e3440
- breadcrumb.focusForeground#b0bace
- breadcrumb.foreground#6a7a90
- breadcrumbPicker.background#252b38
- button.background#4a6a9a
- button.foreground#ddeeff
- button.hoverBackground#5a7aaa
- button.secondaryBackground#3a4458
- button.secondaryForeground#b0bace
- contrastBorder#00000000
- debugIcon.breakpointDisabledForeground#6a5060
- debugIcon.breakpointForeground#e06c75
- debugToolBar.background#1e2330
- diffEditor.insertedLineBackground#5a9e6f12
- diffEditor.insertedTextBackground#5a9e6f18
- diffEditor.removedLineBackground#be585812
- diffEditor.removedTextBackground#be585818
- dropdown.background#1e2330
- dropdown.border#3a4458
- dropdown.foreground#b0bace
- editor.background#2e3440
- editor.findMatchBackground#c87d2060
- editor.findMatchHighlightBackground#c87d2030
- editor.focusedStackFrameHighlightBackground#5a9e6f20
- editor.foreground#d0d8e8
- editor.hoverHighlightBackground#4a5a7a30
- editor.inactiveSelectionBackground#4a5a7a40
- editor.lineHighlightBackground#363e50
- editor.lineHighlightBorder#00000000
- editor.rangeHighlightBackground#4a5a7a20
- editor.selectionBackground#4a5a7a70
- editor.stackFrameHighlightBackground#c9a84c20
- editor.wordHighlightBackground#4a6a9040
- editor.wordHighlightStrongBackground#4a6a9060
- editorBracketMatch.background#5a6a8a40
- editorBracketMatch.border#7a8fb0
- editorCodeLens.foreground#6a7a90
- editorCursor.background#2e3440
- editorCursor.foreground#f0a84a
- editorGutter.addedBackground#5a9e6f
- editorGutter.background#2e3440
- editorGutter.deletedBackground#be5858
- editorGutter.modifiedBackground#c9a84c
- editorHoverWidget.background#252b38
- editorHoverWidget.border#3a4458
- editorIndentGuide.activeBackground1#5a6478
- editorIndentGuide.background1#3e4658
- editorLineNumber.activeForeground#9aa8c0
- editorLineNumber.foreground#5a6478
- editorRuler.foreground#3e4658
- editorSuggestWidget.background#252b38
- editorSuggestWidget.border#3a4458
- editorSuggestWidget.foreground#c0ccd8
- editorSuggestWidget.highlightForeground#f0a84a
- editorSuggestWidget.selectedBackground#3a4460
- editorWhitespace.foreground#404858
- editorWidget.background#252b38
- editorWidget.border#3a4458
- editorWidget.foreground#b0bace
- focusBorder#4a6a9a80
- gitDecoration.addedResourceForeground#5a9e6f
- gitDecoration.conflictingResourceForeground#c0785a
- gitDecoration.deletedResourceForeground#e06c75
- gitDecoration.ignoredResourceForeground#4a5468
- gitDecoration.modifiedResourceForeground#c9a84c
- gitDecoration.stageDeletedResourceForeground#e06c75
- gitDecoration.stageModifiedResourceForeground#c9a84c
- gitDecoration.untrackedResourceForeground#78be8e
- input.background#1e2330
- input.border#3a4458
- input.foreground#c0ccd8
- input.placeholderForeground#4a5878
- inputValidation.errorBackground#5a2a2a
- inputValidation.errorBorder#c05050
- inputValidation.warningBackground#503a1a
- inputValidation.warningBorder#b08040
- list.activeSelectionBackground#3a4460
- list.activeSelectionForeground#e0e8f8
- list.errorForeground#e07070
- list.focusBackground#3a4460
- list.focusForeground#e0e8f8
- list.highlightForeground#f0a84a
- list.hoverBackground#303848
- list.hoverForeground#d0d8e8
- list.inactiveSelectionBackground#323a50
- list.inactiveSelectionForeground#c0c8d8
- list.warningForeground#c9a84c
- minimap.background#272d3a
- minimap.findMatchHighlight#c87d2060
- minimap.selectionHighlight#4a5a7a80
- minimapGutter.addedBackground#5a9e6f
- minimapGutter.deletedBackground#be5858
- minimapGutter.modifiedBackground#c9a84c
- notifications.background#252b38
- notifications.border#1e2330
- notifications.foreground#b0bace
- notificationsErrorIcon.foreground#e06c75
- notificationsInfoIcon.foreground#5e8ac0
- notificationsWarningIcon.foreground#c9a84c
- notificationToast.border#3a4458
- panel.background#252b38
- panel.border#1e2330
- panelTitle.activeBorder#f0a84a
- panelTitle.activeForeground#d0d8e8
- panelTitle.inactiveForeground#5a6a80
- peekView.border#4a6a9a
- peekViewEditor.background#222838
- peekViewEditor.matchHighlightBackground#c87d2040
- peekViewResult.background#1e2330
- peekViewResult.fileForeground#a0b0c0
- peekViewResult.lineForeground#7a8a9a
- peekViewResult.matchHighlightBackground#c87d2040
- peekViewResult.selectionBackground#3a4a68
- peekViewResult.selectionForeground#d0d8e8
- peekViewTitle.background#1e2330
- peekViewTitleDescription.foreground#6a7a90
- peekViewTitleLabel.foreground#c0ccd8
- scrollbar.shadow#00000030
- scrollbarSlider.activeBackground#6a78a0c0
- scrollbarSlider.background#4a5878a0
- scrollbarSlider.hoverBackground#5a6888b0
- settings.checkboxBackground#1e2330
- settings.dropdownBackground#1e2330
- settings.headerForeground#b0bace
- settings.modifiedItemIndicator#f0a84a
- settings.numberInputBackground#1e2330
- settings.textInputBackground#1e2330
- sideBar.background#252b38
- sideBar.border#1e2330
- sideBar.foreground#b0bace
- sideBarSectionHeader.background#1e2330
- sideBarSectionHeader.foreground#8a9ab0
- sideBarTitle.foreground#7a8aa0
- statusBar.background#1e2330
- statusBar.border#181d28
- statusBar.debuggingBackground#7a4a8a
- statusBar.debuggingForeground#e8d8f8
- statusBar.foreground#8a9ab0
- statusBar.noFolderBackground#252b38
- statusBarItem.hoverBackground#2e3850
- statusBarItem.remoteBackground#3a6a9a
- statusBarItem.remoteForeground#ddeeff
- tab.activeBackground#2e3440
- tab.activeBorderTop#f0a84a
- tab.activeForeground#e0e8f8
- tab.border#1e2330
- tab.hoverBackground#2a3040
- tab.hoverForeground#c0c8d8
- tab.inactiveBackground#252b38
- tab.inactiveForeground#6a7a90
- tab.unfocusedActiveBackground#2a3040
- tab.unfocusedActiveForeground#b0bace
- terminal.ansiBlack#2e3440
- terminal.ansiBlue#5e8ac0
- terminal.ansiBrightBlack#4a5468
- terminal.ansiBrightBlue#7aaad8
- terminal.ansiBrightCyan#68b8c8
- terminal.ansiBrightGreen#78be8e
- terminal.ansiBrightMagenta#b898cc
- terminal.ansiBrightRed#f08090
- terminal.ansiBrightWhite#e8f0f8
- terminal.ansiBrightYellow#dfc070
- terminal.ansiCyan#4e9aaa
- terminal.ansiGreen#5a9e6f
- terminal.ansiMagenta#9a7ab0
- terminal.ansiRed#e06c75
- terminal.ansiWhite#c8d4e0
- terminal.ansiYellow#c9a84c
- terminal.background#252b38
- terminal.foreground#c8d4e0
- terminal.selectionBackground#4a5a7a60
- terminalCursor.foreground#f0a84a
- titleBar.activeBackground#1e2330
- titleBar.activeForeground#b0bace
- titleBar.border#181d28
- titleBar.inactiveBackground#1a1f2a
- titleBar.inactiveForeground#5a6a80
- widget.border#3a4458
- widget.shadow#0e121c80
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #5a7070 | italic |
| comment.block.documentation, comment.line.double-slash.documentation | #527a78 | italic |
| string, string.quoted, string.template | #8ab870 | — |
| constant.character.escape, string.regexp | #78c8a0 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #c8a060 | — |
| constant.numeric, constant.numeric.decimal, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal | #c09868 | — |
| constant.language, constant.other | #d08858 | — |
| constant.language.boolean | #d08858 | bold |
| constant.language.null, constant.language.undefined, constant.language.nan | #a07860 | italic |
| keyword, keyword.control, keyword.other, storage.modifier | #9080c0 | bold |
| keyword.control.flow, keyword.control.if, keyword.control.else, keyword.control.for, keyword.control.while, keyword.control.return, keyword.control.loop, keyword.control.switch, keyword.control.case, keyword.control.break, keyword.control.continue, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.of, keyword.control.in | #a078d0 | bold |
| keyword.operator.new, keyword.operator.delete, keyword.operator.instanceof, keyword.operator.typeof, keyword.operator.void | #b888e0 | — |
| storage.type | #7898d8 | bold |
| storage.type.function, storage.type.class, storage.type.arrow | #7090cc | bold |
| entity.name.function, meta.function-call entity.name.function | #70b8d0 | — |
| meta.function-call.generic, support.function | #68b0c8 | — |
| meta.definition.method entity.name.function, entity.name.function.constructor | #80c8e0 | bold |
| variable, variable.other, variable.other.readwrite, variable.other.object | #c8d4e0 | — |
| variable.language.this, variable.language.self, variable.language.super | #b898cc | italic |
| variable.parameter | #b8c8d8 | italic |
| variable.other.php, variable.other.global.php, variable.other.global.safer.php, variable.other.normal.php, punctuation.definition.variable.php | #c8d4e0 | — |
| entity.name.class, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, entity.other.inherited-class | #d8c068 | — |
| entity.name.type, support.type, meta.type.annotation, meta.return.type | #c8b858 | — |
| support.type.primitive, keyword.type, storage.type.numeric, storage.type.string, storage.type.boolean, storage.type.void | #b8a848 | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.ternary | #a0b0c8 | — |
| keyword.operator.arrow, storage.type.function.arrow | #a8b8d0 | — |
| punctuation, meta.brace, punctuation.separator, punctuation.terminator, punctuation.definition.block, punctuation.section.block | #7a8898 | — |
| punctuation.definition.parameters, punctuation.definition.arguments, meta.brace.round, meta.brace.square | #8a98a8 | — |
| variable.other.property, variable.other.object.property, support.type.property-name, meta.object-literal.key | #b0c0d8 | — |
| variable.other.member, variable.other.readwrite.member | #b0c0d8 | — |
| entity.name.tag, meta.tag | #7090c0 | — |
| entity.other.attribute-name, meta.tag.attributes | #90b8d8 | — |
| string.quoted.double.html, string.quoted.single.html, meta.attribute-with-value.html | #8ab870 | — |
| meta.tag.sgml, entity.name.tag.doctype | #506080 | italic |
| constant.character.entity.html, punctuation.definition.entity.html | #78c8a0 | — |
| punctuation.definition.tag | #506880 | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #8ab8d0 | — |
| support.type.property-name.css, meta.property-name.css | #90b0c8 | — |
| meta.property-value.css, support.constant.property-value.css, constant.other.color.rgb-value.css | #a8c898 | — |
| keyword.other.unit.css, constant.numeric.css | #c09868 | — |
| keyword.control.at-rule, keyword.control.at-rule.media, keyword.control.at-rule.keyframes | #a078d0 | bold |
| constant.other.color.rgb-value, support.constant.color | #b8a848 | — |
| keyword.other.important.css | #e06c75 | bold |
| keyword.control.import.js, keyword.control.export.js, keyword.control.from.js, keyword.control.import.ts, keyword.control.export.ts, keyword.control.from.ts | #a078d0 | bold |
| meta.decorator, punctuation.decorator | #c8a060 | italic |
| keyword.other.type.ts, keyword.other.interface.ts | #9080c0 | bold |
| support.type.object.console.js, support.type.object.module.js, variable.language.arguments.js | #68b0c8 | — |
| entity.name.tag.html.vue | #78c0a0 | bold |
| entity.other.attribute-name.html.vue, keyword.control.conditional.vue, entity.other.attribute-name.pseudo-class.vue | #c8a060 | — |
| punctuation.section.embedded.begin.mustache, punctuation.section.embedded.end.mustache | #d08858 | bold |
| punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php | #b888e0 | bold |
| support.function.php, support.function.string.php | #70b8d0 | — |
| storage.type.namespace.php, keyword.other.namespace.php, keyword.other.use.php | #9080c0 | bold |
| keyword.operator.class.php, punctuation.accessor.php | #7a8898 | — |
| keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.database-query.sql, storage.modifier.sql, keyword.other.sql | #9080c0 | bold |
| support.function.aggregate.sql, entity.name.function.sql, support.function.sql | #70b8d0 | — |
| entity.name.table.sql, variable.other.table.sql, variable.other.column.sql, meta.toc-list.full-identifier.sql | #c8d4e0 | — |
| variable.language.star.sql | #d08858 | — |
| support.type.property-name.json, meta.structure.dictionary.json meta.structure.dictionary.key.json string.quoted.double.json | #90b8d8 | — |
| meta.structure.dictionary.value.json string.quoted.double.json | #8ab870 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #d8c068 | bold |
| markup.bold | #e0d080 | bold |
| markup.italic | #d0c8e0 | italic |
| markup.inline.raw | #8ab870 | — |
| markup.underline.link | #68b0c8 | underline |
| punctuation.definition.list.begin.markdown | #f0a84a | — |
| invalid, invalid.illegal, invalid.deprecated | #e06c75 | underline |
| entity.name.namespace, entity.name.module, entity.name.package | #d8c068 | — |
| support.variable, support.other.variable | #90b8d8 | — |