Ocean Breeze Light Theme
Publisher: CreativworkThemes in package: 1
A beautiful light theme with ocean-inspired colors featuring teal, warm orange, and soft purple accents
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.activeBackground#0fa3b120
- activityBar.activeBorder#0fa3b1
- activityBar.background#f9f7f3
- activityBar.border#0fa3b1
- activityBar.dropBorder#0fa3b1
- activityBar.foreground#0fa3b1
- activityBar.inactiveForeground#170f11a5
- activityBarBadge.background#0fa3b1
- activityBarBadge.foreground#f9f7f3
- badge.background#0fa3b1
- badge.foreground#f9f7f3
- breadcrumb.activeSelectionForeground#4e4e4e
- breadcrumb.background#f9f7f3
- breadcrumb.focusForeground#4e4e4e
- breadcrumb.foreground#616161cc
- button.background#0fa3b1
- button.foreground#ffffff
- button.hoverBackground#0b7983
- button.secondaryBackground#d6ebff
- button.secondaryForeground#170f11
- button.secondaryHoverBackground#b0daff
- checkbox.background#ffffff
- checkbox.border#0fa3b1
- checkbox.foreground#616161
- commandCenter.activeBackground#ffffff
- commandCenter.activeForeground#170f11
- commandCenter.background#f9f7f3
- commandCenter.border#0fa3b1
- commandCenter.foreground#616161
- commandCenter.inactiveForeground#616161a5
- debugExceptionWidget.background#f3f3f3
- debugExceptionWidget.border#d5d5d5
- debugToolBar.background#f3f3f3
- debugToolBar.border#d5d5d5
- descriptionForeground#616161
- diffEditor.border#d7d7d7
- diffEditor.insertedLineBackground#9bb95520
- diffEditor.insertedTextBackground#9bb95533
- diffEditor.removedLineBackground#ff000020
- diffEditor.removedTextBackground#ff000033
- dropdown.background#ffffff
- dropdown.border#0fa3b1
- dropdown.foreground#616161
- dropdown.listBackground#f9f7f3
- editor.background#ffffff
- editor.findMatchBackground#ffe8a5
- editor.findMatchBorder#f7a072
- editor.findMatchHighlightBackground#ffe8a580
- editor.findMatchHighlightBorder#f7a07280
- editor.findRangeHighlightBackground#0fa3b120
- editor.findRangeHighlightBorder#0fa3b100
- editor.foldBackground#d6ebff4d
- editor.foreground#170f11
- editor.hoverHighlightBackground#0fa3b130
- editor.inactiveSelectionBackground#d6ebff80
- editor.lineHighlightBackground#f7a07220
- editor.lineHighlightBorder#f7a07200
- editor.linkedEditingBackground#0fa3b120
- editor.rangeHighlightBackground#f9f7f380
- editor.rangeHighlightBorder#f9f7f3
- editor.selectionBackground#d6ebff
- editor.selectionHighlightBackground#b0daff80
- editor.selectionHighlightBorder#0197f6
- editor.wordHighlightBackground#0fa3b130
- editor.wordHighlightBorder#0fa3b150
- editor.wordHighlightStrongBackground#0fa3b150
- editor.wordHighlightStrongBorder#0fa3b1
- editor.wordHighlightTextBackground#0fa3b120
- editorBracketMatch.background#ffe8a5
- editorBracketMatch.border#f7a072
- editorCodeLens.foreground#999999
- editorCursor.background#f9f7f3
- editorCursor.foreground#0fa3b1
- editorError.background#B73A3400
- editorError.border#ffffff00
- editorError.foreground#ca4b51
- editorGroup.border#e7e7e7
- editorGroup.emptyBackground#ffffff
- editorGroupHeader.tabsBackground#f3f3f3
- editorGutter.addedBackground#81b88b
- editorGutter.background#ffffff
- editorGutter.commentRangeForeground#424242
- editorGutter.deletedBackground#ca4b51
- editorGutter.foldingControlForeground#424242
- editorGutter.modifiedBackground#66afe0
- editorHint.border#0fa3b100
- editorHint.foreground#0fa3b1
- editorHoverWidget.background#f3f3f3
- editorHoverWidget.border#c8c8c8
- editorHoverWidget.foreground#616161
- editorHoverWidget.statusBarBackground#e7e7e7
- editorIndentGuide.activeBackground1#f7a072b1
- editorIndentGuide.background1#f7a07248
- editorInfo.background#4490BF00
- editorInfo.border#4490BF00
- editorInfo.foreground#0197f6
- editorLineNumber.activeForeground#0fa3b1
- editorLineNumber.foreground#0fa3b1a5
- editorLink.activeForeground#0197f6
- editorMarkerNavigation.background#ffffff
- editorMarkerNavigationError.background#ca4b51
- editorMarkerNavigationInfo.background#0197f6
- editorMarkerNavigationWarning.background#e9a700
- editorOverviewRuler.addedForeground#81b88b
- editorOverviewRuler.background#0fa3b100
- editorOverviewRuler.border#0fa3b100
- editorOverviewRuler.deletedForeground#ca4b51
- editorOverviewRuler.errorForeground#ca4b51
- editorOverviewRuler.findMatchForeground#f7a07280
- editorOverviewRuler.infoForeground#0197f6
- editorOverviewRuler.modifiedForeground#66afe0
- editorOverviewRuler.rangeHighlightForeground#0fa3b180
- editorOverviewRuler.selectionHighlightForeground#0197f680
- editorOverviewRuler.warningForeground#e9a700
- editorOverviewRuler.wordHighlightForeground#0fa3b180
- editorOverviewRuler.wordHighlightStrongForeground#0fa3b180
- editorRuler.foreground#d3d3d3
- editorSuggestWidget.background#f9f7f3
- editorSuggestWidget.border#d6ebff
- editorSuggestWidget.foreground#170f11
- editorSuggestWidget.highlightForeground#0fa3b1
- editorSuggestWidget.selectedBackground#d6ebff
- editorSuggestWidget.selectedForeground#170f11
- editorWarning.background#A9904000
- editorWarning.border#ffffff00
- editorWarning.foreground#e9a700
- editorWhitespace.foreground#ffe8a5
- editorWidget.background#f3f3f3
- editorWidget.border#c8c8c8
- editorWidget.foreground#616161
- editorWidget.resizeBorder#0fa3b1
- errorForeground#ca4b51
- extensionBadge.remoteBackground#0fa3b1
- extensionBadge.remoteForeground#ffffff
- extensionButton.prominentBackground#0fa3b1
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#0b7983
- focusBorder#0197f6
- foreground#616161
- gitDecoration.addedResourceForeground#587c0c
- gitDecoration.conflictingResourceForeground#6c6cc4
- gitDecoration.deletedResourceForeground#ad0707
- gitDecoration.ignoredResourceForeground#8e8e90
- gitDecoration.modifiedResourceForeground#895503
- gitDecoration.stageDeletedResourceForeground#ad0707
- gitDecoration.stageModifiedResourceForeground#895503
- gitDecoration.submoduleResourceForeground#1258a7
- gitDecoration.untrackedResourceForeground#007100
- icon.foreground#616161
- input.background#ffffff
- input.border#0fa3b1
- input.foreground#616161
- input.placeholderForeground#767676
- inputOption.activeBackground#0fa3b180
- inputOption.activeBorder#0fa3b100
- inputOption.activeForeground#170f11
- inputValidation.errorBackground#ca4b5120
- inputValidation.errorBorder#ca4b51
- inputValidation.warningBackground#e9a70020
- inputValidation.warningBorder#e9a700
- keybindingLabel.background#dddddd
- keybindingLabel.border#cccccc
- keybindingLabel.bottomBorder#bbbbbb
- keybindingLabel.foreground#555555
- keybindingTable.headerBackground#f3f3f3
- keybindingTable.rowsBackground#ffffff
- list.activeSelectionBackground#0fa3b1
- list.activeSelectionForeground#ffffff
- list.dropBackground#d6ebff
- list.focusBackground#d6ebff
- list.focusForeground#616161
- list.highlightForeground#0fa3b1
- list.hoverBackground#e8e8e8
- list.hoverForeground#616161
- list.inactiveSelectionBackground#e4e6f1
- list.inactiveSelectionForeground#616161
- listFilterWidget.background#eddea4
- listFilterWidget.noMatchesOutline#f7a072
- listFilterWidget.outline#00000000
- menu.background#f9f7f3
- menu.border#00000085
- menu.foreground#616161
- menu.selectionBackground#0fa3b1
- menu.selectionBorder#00000000
- menu.selectionForeground#ffffff
- menu.separatorBackground#888888
- menubar.selectionBackground#f9f7f3
- menubar.selectionBorder#f9f7f3
- menubar.selectionForeground#333333
- merge.border#0fa3b1
- merge.commonContentBackground#E5E5E580
- merge.commonHeaderBackground#BFBFBF80
- merge.currentContentBackground#DBF4EF80
- merge.currentHeaderBackground#A4E3D680
- merge.incomingContentBackground#DBECFF80
- merge.incomingHeaderBackground#A6CFFF80
- minimap.background#ffffff
- minimap.errorHighlight#ca4b51
- minimap.findMatchHighlight#ffe8a580
- minimap.selectionHighlight#d6ebff80
- minimap.warningHighlight#e9a700
- minimapGutter.addedBackground#81b88b
- minimapGutter.deletedBackground#ca4b51
- minimapGutter.modifiedBackground#66afe0
- minimapSlider.activeBackground#0fa3b160
- minimapSlider.background#0fa3b120
- minimapSlider.hoverBackground#0fa3b140
- notificationCenter.border#d5d5d5
- notificationCenterHeader.background#e7e7e7
- notificationCenterHeader.foreground#616161
- notifications.background#f3f3f3
- notifications.border#e7e7e7
- notifications.foreground#616161
- notificationsErrorIcon.foreground#ca4b51
- notificationsInfoIcon.foreground#0197f6
- notificationsWarningIcon.foreground#e9a700
- notificationToast.border#d5d5d5
- panel.background#f9f7f3
- panel.border#0fa3b1
- panel.dropBorder#0fa3b1
- panelSection.border#0fa3b1
- panelSection.dropBackground#d6ebff40
- panelSectionHeader.background#f9f7f3
- panelSectionHeader.border#0fa3b1
- panelSectionHeader.foreground#616161
- panelTitle.activeBorder#0fa3b1
- panelTitle.activeForeground#424242
- panelTitle.inactiveForeground#424242bf
- peekView.border#0197f6
- peekViewEditor.background#f2f8fc
- peekViewEditor.matchHighlightBackground#ffe8a5de
- peekViewEditor.matchHighlightBorder#f7a072
- peekViewEditorGutter.background#f2f8fc
- peekViewResult.background#f3f3f3
- peekViewResult.fileForeground#1e1e1e
- peekViewResult.lineForeground#646465
- peekViewResult.matchHighlightBackground#f7a0724d
- peekViewResult.selectionBackground#0fa3b133
- peekViewResult.selectionForeground#6c6c6c
- peekViewTitle.background#ffffff
- peekViewTitleDescription.foreground#616161e6
- peekViewTitleLabel.foreground#333333
- pickerGroup.border#cccedb
- pickerGroup.foreground#0fa3b1
- progressBar.background#0fa3b1
- quickInput.background#f3f3f3
- quickInput.foreground#616161
- quickInputTitle.background#ffffff00
- scrollbar.shadow#dddddd
- scrollbarSlider.activeBackground#0fa3b1
- scrollbarSlider.background#0fa3b1a5
- scrollbarSlider.hoverBackground#0fa3b1
- searchEditor.findMatchBackground#ffe8a5
- searchEditor.findMatchBorder#f7a072
- searchEditor.textInputBorder#0fa3b1
- selection.background#d6ebff
- settings.checkboxBackground#ffffff
- settings.checkboxBorder#0fa3b1
- settings.checkboxForeground#616161
- settings.dropdownBackground#ffffff
- settings.dropdownBorder#0fa3b1
- settings.dropdownForeground#616161
- settings.dropdownListBorder#c8c8c8
- settings.focusedRowBackground#ffffff07
- settings.headerForeground#616161
- settings.modifiedItemIndicator#0fa3b1
- settings.numberInputBackground#ffffff
- settings.numberInputBorder#0fa3b1
- settings.numberInputForeground#616161
- settings.rowHoverBackground#e8e8e8
- settings.textInputBackground#ffffff
- settings.textInputBorder#0fa3b1
- settings.textInputForeground#616161
- sideBar.background#f9f7f3
- sideBar.border#0fa3b1
- sideBar.dropBackground#d6ebff40
- sideBar.foreground#616161
- sideBarSectionHeader.background#00000000
- sideBarSectionHeader.border#61616130
- sideBarSectionHeader.foreground#616161
- sideBarTitle.foreground#170f11
- statusBar.background#f9f7f3
- statusBar.border#f7a072
- statusBar.debuggingBackground#f7a072
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#170f11
- statusBar.noFolderBackground#0fa3b1
- statusBar.noFolderForeground#ffffff
- statusBarItem.activeBackground#ffffff25
- statusBarItem.hoverBackground#f7a072a5
- statusBarItem.remoteBackground#0fa3b1
- statusBarItem.remoteForeground#ffffff
- symbolIcon.arrayForeground#0fa3b1
- symbolIcon.booleanForeground#0197f6
- symbolIcon.classForeground#f7a072
- symbolIcon.colorForeground#0fa3b1
- symbolIcon.constantForeground#0197f6
- symbolIcon.constructorForeground#ca7bf7
- symbolIcon.enumeratorForeground#0fa3b1
- symbolIcon.enumeratorMemberForeground#0197f6
- symbolIcon.eventForeground#ca7bf7
- symbolIcon.fieldForeground#f7a072
- symbolIcon.fileForeground#616161
- symbolIcon.folderForeground#f7a072
- symbolIcon.functionForeground#ca7bf7
- symbolIcon.interfaceForeground#0fa3b1
- symbolIcon.keyForeground#f7a072
- symbolIcon.keywordForeground#0fa3b1
- symbolIcon.methodForeground#ca7bf7
- symbolIcon.moduleForeground#f7a072
- symbolIcon.namespaceForeground#ca7bf7
- symbolIcon.nullForeground#0197f6
- symbolIcon.numberForeground#0197f6
- symbolIcon.objectForeground#f7a072
- symbolIcon.operatorForeground#0fa3b1
- symbolIcon.packageForeground#f7a072
- symbolIcon.propertyForeground#f7a072
- symbolIcon.referenceForeground#0197f6
- symbolIcon.snippetForeground#0fa3b1
- symbolIcon.stringForeground#0fa3b1
- symbolIcon.structForeground#f7a072
- symbolIcon.textForeground#616161
- symbolIcon.typeParameterForeground#f7a072
- symbolIcon.unitForeground#0197f6
- symbolIcon.variableForeground#f7a072
- tab.activeBackground#ffffff
- tab.activeBorder#00000000
- tab.activeBorderTop#0fa3b1
- tab.activeForeground#333333
- tab.border#f3f3f3
- tab.inactiveBackground#ececec
- tab.inactiveForeground#333333b3
- tab.unfocusedActiveBackground#ffffff
- tab.unfocusedActiveBorder#00000000
- tab.unfocusedActiveBorderTop#0fa3b180
- tab.unfocusedActiveForeground#333333
- tab.unfocusedInactiveBackground#ececec
- tab.unfocusedInactiveForeground#333333b3
- terminal.ansiBlack#000000
- terminal.ansiBlue#0451a5
- terminal.ansiBrightBlack#666666
- terminal.ansiBrightBlue#0451a5
- terminal.ansiBrightCyan#0598bc
- terminal.ansiBrightGreen#14ce14
- terminal.ansiBrightMagenta#bc05bc
- terminal.ansiBrightRed#cd3131
- terminal.ansiBrightWhite#a5a5a5
- terminal.ansiBrightYellow#b5ba00
- terminal.ansiCyan#0598bc
- terminal.ansiGreen#00bc00
- terminal.ansiMagenta#bc05bc
- terminal.ansiRed#cd3131
- terminal.ansiWhite#555555
- terminal.ansiYellow#949800
- terminal.background#f9f7f3
- terminal.border#0fa3b1
- terminal.foreground#3b3b3b
- terminal.selectionBackground#d6ebff
- terminalCursor.background#f9f7f3
- terminalCursor.foreground#0fa3b1
- textLink.activeForeground#0fa3b1
- textLink.foreground#0197f6
- titleBar.activeBackground#f9f7f3
- titleBar.activeForeground#333333
- titleBar.border#00000000
- titleBar.inactiveBackground#f9f7f3
- titleBar.inactiveForeground#33333399
- tree.indentGuidesStroke#a9a9a9
- walkThrough.embeddedEditorBackground#00000050
- welcomePage.background#ffffff
- welcomePage.tileBackground#f9f7f3
- welcomePage.tileBorder#0fa3b1
- welcomePage.tileHoverBackground#f3f3f3
- widget.shadow#00000029
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #170f11a5 | italic |
| comment.block.documentation, string.quoted.docstring | #0fa3b1 | italic |
| keyword, keyword.control, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.channel | #0fa3b1 | — |
| storage, storage.type, support.type, entity.name.type | #f7a072 | — |
| entity.name.function, meta.function-call, support.function, keyword.other.special-method | #ca7bf7 | — |
| entity.name.class, entity.name.type.class, support.class, entity.other.inherited-class | #f7a072 | — |
| variable, variable.other.readwrite, variable.parameter, meta.object-literal.key, support.variable.property | #f7a072 | — |
| variable.language, variable.parameter.function.language.special | #f7a072 | italic |
| constant, constant.numeric, constant.language, support.constant | #0197f6 | — |
| string, string.quoted | #0fa3b1 | — |
| punctuation.definition.string.begin, punctuation.definition.string.end | #0fa3b1 | — |
| string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp | #0fa3b1 | — |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison | #0fa3b1 | — |
| punctuation.separator, punctuation.terminator, punctuation.definition | #170f11 | — |
| keyword.operator.expression.import, keyword.operator.expression.export, keyword.control.import, keyword.control.export | #ca7bf7 | — |
| meta.decorator, meta.decorator.ts, meta.decorator.tsx, punctuation.decorator | #ca7bf7 | — |
| entity.name.tag.jsx, entity.name.tag.tsx, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx | #f7a072 | — |
| support.variable.magic.python | #f7a072 | — |
| meta.function.decorator.python, support.token.decorator.python | #ca7bf7 | — |
| storage.modifier.lifetime.rust, entity.name.lifetime.rust | #f7a072 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown | #f7a072 | bold |
| markup.bold, punctuation.definition.bold.markdown | #0197f6 | bold |
| markup.italic, punctuation.definition.italic | #0fa3b1 | italic |
| markup.inline.raw.markdown, markup.fenced_code.block.markdown | #0fa3b1 | — |
| markup.underline.link.markdown, string.other.link.title.markdown | #ca7bf7 | — |
| entity.name.tag, punctuation.definition.tag | #f7a072 | — |
| entity.other.attribute-name | #0197f6 | — |
| entity.other.attribute-name.id | #ca7bf7 | — |
| support.type.property-name.css, support.type.property-name.scss | #0fa3b1 | — |
| support.constant.property-value.css, support.constant.property-value.scss | #0197f6 | — |
| meta.selector.css, entity.other.attribute-name.class.css | #f7a072 | — |
| support.type.property-name.json, string.quoted.json | #f7a072 | — |
| string.quoted.json, constant.language.json | #0fa3b1 | — |
| invalid, invalid.illegal | #ffffff | — |
| invalid.deprecated | #ffffff | strikethrough |