Qara
Publisher: Hasan HasanliThemes in package: 1
Minimalistic fork of Sublime's Oceanic theme with less colors
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#1c232a
- activityBar.border#1c232a
- activityBar.foreground#D4D4D4
- activityBarBadge.background#EF5350
- activityBarBadge.foreground#1c232a
- badge.background#333D3D
- badge.foreground#D4D4D4
- breadcrumb.activeSelectionForeground#FFFFFF
- breadcrumb.focusForeground#88BBEECC
- breadcrumb.foreground#D4D4D4
- breadcrumbPicker.background#1a2128
- button.background#6699CC60
- button.foreground#ffffff
- button.hoverBackground#6699CCa0
- contrastBorder#1f2429a9
- debugExceptionWidget.background#171C1C
- debugExceptionWidget.border#30373A
- debugToolBar.background#171C1C
- diffEditor.insertedTextBackground#3D4F3B
- diffEditor.insertedTextBorder#FFFFFF4D
- diffEditor.removedTextBackground#5E2629
- diffEditor.removedTextBorder#FFFFFF4D
- dropdown.background#171C1C
- dropdown.border#333D3D
- dropdown.foreground#ffffffcc
- editor.background#1a2128
- editor.findMatchBackground#ffffff44
- editor.findMatchBorder#F9AE58c0
- editor.findMatchHighlightBackground#ffffff00
- editor.findMatchHighlightBorder#5FB4B4c0
- editor.findRangeHighlightBackground#3E4A55
- editor.findRangeHighlightBorder#ffffff00
- editor.foreground#C8CED9
- editor.hoverHighlightBackground#7e57c25a
- editor.inactiveSelectionBackground#4E5A6588
- editor.lineHighlightBackground#0003
- editor.rangeHighlightBackground#222b34
- editor.selectionBackground#4E5A65
- editor.selectionHighlightBackground#1a2128
- editor.selectionHighlightBorder#5FB4B4
- editor.wordHighlightBackground#FFFFFF00
- editor.wordHighlightStrongBackground#FFFFFF00
- editorBracketMatch.background#5f7e974d
- editorCodeLens.foreground#5e82ceb4
- editorCursor.foreground#F9AE58
- editorError.foreground#EF5350
- editorGroup.border#30373A
- editorGroup.dropBackground#4E5A658f
- editorGroup.emptyBackground#1a2128
- editorGroupHeader.noTabsBackground#30373A
- editorGroupHeader.tabsBackground#1f2429
- editorGroupHeader.tabsBorder#30373A
- editorGutter.addedBackground#5fb3b3
- editorGutter.background#1a2128
- editorGutter.deletedBackground#E15A60
- editorGutter.modifiedBackground#88BBEECC
- editorHoverWidget.background#1f2429
- editorHoverWidget.border#30373A
- editorLineNumber.activeForeground#C6CCD6
- editorLineNumber.foreground#8F969F
- editorLink.activeForeground#88BBEECC
- editorMarkerNavigation.background#171C1C
- editorMarkerNavigationError.background#EF5350
- editorMarkerNavigationWarning.background#FFCA28
- editorOverviewRuler.commonContentForeground#A94348
- editorOverviewRuler.currentContentForeground#A94348
- editorOverviewRuler.incomingContentForeground#A94348
- editorRuler.foreground#5e81ce52
- editorSuggestWidget.background#1f2429
- editorSuggestWidget.border#30373A
- editorSuggestWidget.foreground#d6deeb
- editorSuggestWidget.highlightForeground#FFFFFF
- editorSuggestWidget.selectedBackground#5f7e97
- editorWarning.foreground#b39554
- editorWidget.background#1f2429
- editorWidget.border#30373A
- errorForeground#EF5350
- extensionButton.prominentBackground#6699CCcc
- extensionButton.prominentForeground#D4D4D4
- extensionButton.prominentHoverBackground#6699CCcc
- focusBorder#122d42
- foreground#D4D4D4
- gitDecoration.conflictingResourceForeground#ffeb95cc
- gitDecoration.deletedResourceForeground#EF535090
- gitDecoration.ignoredResourceForeground#808080
- gitDecoration.modifiedResourceForeground#a2bffc
- gitDecoration.untrackedResourceForeground#c5e478ff
- input.background#1a2128
- input.border#808080
- input.foreground#D4D4D4
- input.placeholderForeground#808080
- inputOption.activeBorder#808080
- inputValidation.errorBackground#E15A60
- inputValidation.errorBorder#D4D4D4
- inputValidation.infoBackground#1a2128
- inputValidation.infoBorder#88BBEECC
- inputValidation.infoForeground#D4D4D4
- inputValidation.warningBackground#675700F2
- inputValidation.warningBorder#FFCA28
- list.activeSelectionBackground#333D3D
- list.activeSelectionForeground#D4D4D4
- list.dropBackground#333D3D
- list.errorForeground#E15A60
- list.focusBackground#333D3D
- list.focusForeground#D4D4D4
- list.highlightForeground#D4D4D4
- list.hoverBackground#333D3D
- list.hoverForeground#D4D4D4
- list.inactiveSelectionBackground#333D3D
- list.inactiveSelectionForeground#D4D4D4
- list.invalidItemForeground#E15A60
- list.warningForeground#FAC863
- listFilterWidget.background#1a2128
- listFilterWidget.noMatchesOutline#E15A60
- listFilterWidget.outline#333D3D
- merge.border#30373A
- merge.currentHeaderBackground#88BBEECC
- merge.incomingHeaderBackground#4e9b9b
- minimap.background#1c232a
- minimap.errorHighlight#f58ee080
- minimap.findMatchHighlight#817c9c26
- minimap.selectionHighlight#817c9c26
- minimap.warningHighlight#9898a680
- minimapGutter.addedBackground#c58fff
- minimapGutter.deletedBackground#f58ee0
- minimapGutter.modifiedBackground#ffbb88
- minimapSlider.activeBackground#817c9c4d
- minimapSlider.background#817c9c26
- minimapSlider.hoverBackground#817c9c26
- notificationCenter.border#30373A
- notificationLink.foreground#88BBEECC
- notifications.background#1f2429
- notifications.border#30373A
- notifications.foreground#D4D4D4
- notificationToast.border#30373A
- panel.background#1a2128
- panel.border#30373A
- panelTitle.activeBorder#30373A
- panelTitle.activeForeground#D4D4D4
- panelTitle.inactiveForeground#808080
- peekView.border#30373A
- peekViewEditor.background#1f2429
- peekViewEditor.matchHighlightBackground#FFFFFF1F
- peekViewResult.background#1f2429
- peekViewResult.fileForeground#D4D4D4
- peekViewResult.lineForeground#D4D4D4
- peekViewResult.matchHighlightBackground#FFFFFF1F
- peekViewResult.selectionBackground#30373A
- peekViewResult.selectionForeground#D4D4D4
- peekViewTitle.background#1f2429
- peekViewTitleDescription.foreground#808080
- peekViewTitleLabel.foreground#5f7e97
- pickerGroup.border#808080
- pickerGroup.foreground#30373A
- scrollbar.shadow#44444466
- scrollbarSlider.activeBackground#333D3D
- scrollbarSlider.background#FFFFFF0F
- scrollbarSlider.hoverBackground#FFFFFF1F
- selection.background#30373A
- sideBar.background#1a2128
- sideBar.border#1a2128
- sideBar.foreground#D4D4D4
- sideBarSectionHeader.background#1a2128
- sideBarSectionHeader.foreground#D4D4D4
- sideBarTitle.foreground#D4D4D4
- statusBar.background#1a2128
- statusBar.border#30373A
- statusBar.debuggingBackground#1a2128
- statusBar.debuggingForeground#D4D4D4
- statusBar.foreground#808080
- statusBar.noFolderBackground#1a2128
- statusBar.noFolderForeground#808080
- statusBarItem.activeBackground#1a2128
- statusBarItem.hoverBackground#1a2128
- statusBarItem.prominentBackground#1a2128
- statusBarItem.prominentHoverBackground#1a2128
- tab.activeBackground#0b2942
- tab.activeBorder#fff0
- tab.activeForeground#d2dee7
- tab.border#fff0
- tab.inactiveBackground#fff0
- tab.inactiveForeground#A0A0A0
- tab.unfocusedActiveBorder#fff0
- tab.unfocusedActiveForeground#fff
- tab.unfocusedInactiveForeground#D4D4D4
- terminal.ansiBlack#011627
- terminal.ansiBlue#82AAFF
- terminal.ansiBrightBlack#575656
- terminal.ansiBrightBlue#82AAFF
- terminal.ansiBrightCyan#7fdbca
- terminal.ansiBrightGreen#22da6e
- terminal.ansiBrightMagenta#C792EA
- terminal.ansiBrightRed#EF5350
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#ffeb95
- terminal.ansiCyan#21c7a8
- terminal.ansiGreen#22da6e
- terminal.ansiMagenta#C792EA
- terminal.ansiRed#EF5350
- terminal.ansiWhite#ffffff
- terminal.ansiYellow#c5e478
- terminal.selectionBackground#1b90dd4d
- terminalCursor.background#234d70
- textBlockQuote.background#1f2429
- textBlockQuote.border#333D3D
- textCodeBlock.background#3A5A61
- textLink.activeForeground#88BBEECC
- textLink.foreground#88BBEECC
- textPreformat.foreground#5FB3B3
- textSeparator.foreground#3A5A61
- titleBar.activeBackground#1f2429
- titleBar.activeForeground#808080
- titleBar.inactiveBackground#1a2128
- titleBar.inactiveForeground#808080
- tree.indentGuidesStroke#333D3D
- walkThrough.embeddedEditorBackground#171C1C
- widget.shadow#1a2128
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #A6ACB9 | italic |
| string | #C8CED9 | — |
| string.template.js.jsx, meta.template.expression.js, string.template.js, string.template.ts | #C8CED9 | — |
| constant.numeric.css | #C8CED9 | — |
| punctuation.definition | #5FB4B4 | — |
| constant.numeric | #F9AE58 | — |
| constant.language | #DAA1DA | italic |
| constant.character, constant.other | #DAA1DA | — |
| variable.member | #EC5F66 | — |
| support.type.property-name.json | — | |
| keyword, keyword.operator, keyword.operator.word | #DAA1DA | — |
| keyword.operator | #F9AE58 | — |
| punctuation.separator, punctuation.terminator | #A6ACB9 | — |
| punctuation.section | #FFFFFF | — |
| punctuation.accessor | #A6ACB9 | — |
| punctuation.definition.annotation | #5FB4B4 | — |
| variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js, support.class.dollar.only.js | #5FB4B4 | — |
| entity.name.function | #88BBEECC | bold |
| meta.block, variable.other | #C8CED9 | — |
| meta.object-literal.key | #C8CED9 | — |
| variable.other.object.ts, variable.other.object.js | #C8CED9 | — |
| storage | #C8CED9 | — |
| support.type.property-name.css | — | |
| storage.type | #DAA1DA | italic |
| meta.definition.variable | #5FB4B4 | — |
| meta.var-single-variable.expr, meta.var.expr, source | #88BBEECC | — |
| meta.object-binding-pattern-variable | #C8CED9 | — |
| variable.object.property | #C8CED9 | — |
| variable | #C8CED9 | italic |
| variable.other, variable.language, variable.function, variable.argument | #C8CED9 | |
| entity.name.type | #EEB970 | — |
| support.variable.property | #EEB970 | italic |
| entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter | #FAC863 | — |
| entity.name.module.js, variable.import.parameter.js, variable.other.class.js | #E15A60 | — |
| support.class.component.js, support.class.component.jsx, support.class.component.tsx | #FFDB99 | |
| meta.jsx.children.js, meta.jsx.children.ts, meta.jsx.children.tsx | #C8CED9 | |
| variable.other.property.tsx, variable.other.property.jsx, variable.other.property.ts, variable.other.property.js | #C8CED9 | |
| entity.other.inherited-class | #5FB4B4 | italic underline |
| variable.parameter | #C8CED9 | — |
| variable.language | #EC5F66 | italic |
| entity.name.tag | #EC5F66 | — |
| entity.other.attribute-name | #DAA1DA | — |
| variable.function, variable.annotation | #88BBEECC | — |
| support.function, support.macro | #88BBEECC | italic |
| support.constant | #DAA1DA | italic |
| support.type, support.class | #88BBEECC | italic |
| invalid | #F7F7F7 | — |
| invalid.deprecated | #F7F7F7 | — |
| entity.name.tag.yaml | #5FB4B4 | — |
| source.yaml string.unquoted | #C8CED9 | — |
| markup.heading | — | bold |
| markup.heading punctuation.definition.heading | #F97B58 | — |
| markup.heading.1 punctuation.definition.heading | #EC5F66 | — |
| string.other.link, markup.underline.link | #88BBEECC | — |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.italic markup.bold | markup.bold markup.italic | — | bold italic |
| punctuation.definition.thematic-break | #F9AE58 | — |
| markup.list.numbered.bullet | #99C794 | — |
| markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item | #F9AE58 | — |
| markup.raw | — | — |
| markup.raw.inline | — | — |
| (text punctuation.definition.italic | text punctuation.definition.bold) | #DAA1DA | — |
| meta.diff, meta.diff.header | #DAA1DA | — |
| markup.deleted | #EC5F66 | — |
| markup.inserted | #99C794 | — |
| markup.changed | #F9AE58 | — |
| support.type.property-name | #C8CED9 | — |
| constant.numeric.line-number.match | #EC5F66 | — |
| message.error | #EC5F66 | — |
| diff.deleted | — | — |
| diff.deleted.char | — | — |
| diff.inserted | — | — |
| diff.inserted.char | — | — |