Merlin Theme (Dark-Orange)
Publisher: SakanomakeitThemes in package: 1
If you want to modify or comment, you can send requests to: sakanomakeit@gmail.com .Or want to support a cup of coffee, you can donate via Kasikorn Bank: 014-1-39122-4
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#121212
- activityBar.activeBorder#ff0000
- activityBar.activeFocusBorder#ffe9c7
- activityBar.background#121212
- activityBar.border#121212
- activityBar.dropBorder#ff0000
- activityBar.foreground#f0750c
- activityBar.inactiveForeground#F0A800
- activityBarBadge.background#f0a800
- activityBarBadge.foreground#121212
- badge.background#ffba1a
- badge.foreground#121212
- button.background#F2BF49
- button.border#121212
- button.foreground#121212
- button.hoverBackground#f0a800
- button.secondaryForeground#ffffff
- dropdown.background#f0a800
- dropdown.border#121212
- dropdown.foreground#121212
- dropdown.listBackground#896606
- editor.background#121212
- editor.findMatchBackground#87dc4150
- editor.findMatchBorder#598ec000
- editor.findMatchHighlightBackground#87dc4150
- editor.findMatchHighlightBorder#598ec0b0
- editor.findRangeHighlightBackground#87dc4150
- editor.findRangeHighlightBorder#598ec0b0
- editor.foreground#bdbaba
- editor.hoverHighlightBackground#b3b3b35f
- editor.inactiveSelectionBackground#99a8b650
- editor.lineHighlightBackground#598ec000
- editor.lineHighlightBorder#f0a80050
- editor.selectionBackground#4191dca5
- editor.selectionForeground#121212
- editor.selectionHighlightBackground#99a8b650
- editor.selectionHighlightBorder#22e90c00
- editor.wordHighlightBackground#4191dc7e
- editor.wordHighlightBorder#4191dc7e
- editor.wordHighlightStrongBackground#4aff9250
- editor.wordHighlightStrongBorder#598ec000
- editorBracketHighlight.foreground1#26ff22
- editorBracketHighlight.foreground2#fbfa5f
- editorBracketHighlight.foreground3#bf31f6
- editorBracketHighlight.foreground4#79b5e7
- editorBracketHighlight.foreground5#fb3ec0
- editorBracketHighlight.foreground6#ff0000
- editorBracketMatch.background#00000000
- editorBracketMatch.border#f0a800a0
- editorCodeLens.foreground#a3caa3
- editorCursor.background#ffffff
- editorCursor.foreground#ffffff
- editorGroup.border#d3d3d3
- editorGroup.dropBackground#121212
- editorGroup.emptyBackground#121212
- editorGroup.focusedEmptyBorder#121212
- editorGroupHeader.border#121212
- editorGroupHeader.noTabsBackground#121212
- editorGroupHeader.tabsBackground#121212
- editorGroupHeader.tabsBorder#121212
- editorGutter.addedBackground#00ff3c
- editorGutter.background#121212
- editorGutter.deletedBackground#ff0000
- editorGutter.modifiedBackground#121212
- editorHoverWidget.background#212121
- editorHoverWidget.border#212121
- editorHoverWidget.foreground#ffffff
- editorHoverWidget.statusBarBackground#121212
- editorInfo.background#ffffff30
- editorInfo.border#ff000000
- editorInfo.foreground#97a5fd
- editorLineNumber.activeForeground#f0a90f
- editorLineNumber.foreground#ffffff
- editorLink.activeForeground#ff0
- editorPane.background#121212
- editorUnnecessaryCode.border#121212
- editorUnnecessaryCode.opacity#121212
- extensionBadge.remoteBackground#05b32e
- extensionBadge.remoteForeground#ffffff
- extensionButton.prominentBackground#05b32e
- extensionButton.prominentForeground#ffffff
- extensionButton.prominentHoverBackground#79b5e7
- extensionIcon.starForeground#fbfa5f
- focusBorder#121212
- foreground#ffffff
- icon.foreground#e8bd58
- input.background#f0a800
- input.border#121212
- input.foreground#121212
- input.placeholderForeground#121212
- inputOption.activeBackground#ffdba8
- inputOption.activeBorder#121212
- inputOption.activeForeground#121212
- inputValidation.errorBackground#f0a800
- inputValidation.errorBorder#121212
- inputValidation.errorForeground#121212
- inputValidation.infoBackground#f0a800
- inputValidation.infoBorder#121212
- inputValidation.infoForeground#121212
- inputValidation.warningBackground#f0a800
- inputValidation.warningBorder#121212
- inputValidation.warningForeground#121212
- list.activeSelectionBackground#ffda9e40
- list.activeSelectionForeground#ffffff
- list.activeSelectionIconForeground#8a6000
- list.deemphasizedForeground#ffda9e
- list.dropBackground#382700
- list.errorForeground#ff0000
- list.filterMatchBackground#ffda9e
- list.filterMatchBorder#ffda9e
- list.focusBackground#ffda9e40
- list.focusForeground#ffffff
- list.focusHighlightForeground#ffda9e
- list.focusOutline#ffda9e40
- list.highlightForeground#00ff3c
- list.hoverBackground#6b4200
- list.hoverForeground#ffffff
- list.inactiveFocusBackground#ffda9e40
- list.inactiveFocusOutline#ffda9e40
- list.inactiveSelectionBackground#ffda9e40
- list.inactiveSelectionForeground#ffffff
- list.invalidItemForeground#ffffff
- list.warningForeground#f0a800
- listFilterWidget.background#ffda9e
- listFilterWidget.noMatchesOutline#ffda9e
- listFilterWidget.outline#ffda9e
- menu.background#121212
- menu.border#121212
- menu.foreground#ffffff
- menu.selectionBackground#f0a800
- menu.selectionBorder#121212
- menu.selectionForeground#ffffff
- menu.separatorBackground#f0a800
- menubar.selectionBackground#f0a800b1
- menubar.selectionBorder#f0a800b1
- menubar.selectionForeground#ffffff
- minimap.background#121212
- minimap.errorHighlight#ff0000ff
- minimap.findMatchHighlight#18f09cff
- minimap.foregroundOpacity#000000c1
- minimap.selectionHighlight#f8e10cff
- minimap.warningHighlight#f0a800ff
- minimapGutter.addedBackground#f0a800
- minimapGutter.deletedBackground#f0a800
- minimapGutter.modifiedBackground#f0a800
- minimapSlider.activeBackground#ffffff50
- minimapSlider.background#ffffff50
- minimapSlider.hoverBackground#ffffff50
- notificationCenter.border#121212
- notificationCenterHeader.background#121212
- notificationCenterHeader.foreground#ffffff
- notificationLink.foreground#ffffff
- notifications.background#6b4200
- notifications.border#121212
- notifications.foreground#ffffff
- notificationsErrorIcon.foreground#ff0000
- notificationsInfoIcon.foreground#79b5e7
- notificationsWarningIcon.foreground#f0750c
- notificationToast.border#121212
- panel.background#212121
- panel.border#121212
- panel.dropBorder#212121
- panelTitle.activeBorder#f0a800
- panelTitle.activeForeground#f0a800
- panelTitle.inactiveForeground#ffffff
- pickerGroup.border#121212
- pickerGroup.foreground#ffffff
- progressBar.background#4818F0
- quickInput.background#121212
- quickInput.foreground#ffffff
- quickInputList.focusBackground#f0a80034
- quickInputList.focusForeground#ffffff
- quickInputList.focusIconForeground#ffffff
- scrollbar.shadow#f0a800
- scrollbarSlider.activeBackground#a87600
- scrollbarSlider.background#ffba1aaf
- scrollbarSlider.hoverBackground#ffe29ebf
- searchEditor.findMatchBackground#598ec050
- searchEditor.findMatchBorder#598ec000
- searchEditor.textInputBorder#212121
- settings.checkboxBackground#F0A800
- settings.checkboxBorder#121212
- settings.checkboxForeground#121212
- settings.dropdownBackground#F0A800
- settings.dropdownBorder#121212
- settings.dropdownForeground#121212
- settings.dropdownListBorder#F0A800
- settings.focusedRowBackground#212121
- settings.focusedRowBorder#212121
- settings.headerForeground#F0A800
- settings.modifiedItemIndicator#F0A800
- settings.numberInputBackground#F0A800
- settings.numberInputBorder#121212
- settings.numberInputForeground#121212
- settings.rowHoverBackground#212121
- settings.textInputBackground#F0A800
- settings.textInputBorder#121212
- settings.textInputForeground#121212
- sideBar.background#212121
- sideBar.border#121212
- sideBar.dropBackground#121212
- sideBar.foreground#ffffff
- sideBarSectionHeader.background#121212
- sideBarSectionHeader.border#121212
- sideBarSectionHeader.foreground#ffffff
- sideBarTitle.foreground#ffffff
- sideBySideEditor.border#121212
- statusBar.background#000000
- statusBar.border#121212
- statusBar.foreground#f0a800ff
- statusBarItem.activeBackground#f0a800ff
- statusBarItem.hoverBackground#f0a80040
- symbolIcon.functionForeground#fff06b
- symbolIcon.interfaceForeground#05b32e
- symbolIcon.objectForeground#ffae45
- symbolIcon.referenceForeground#ff0000
- symbolIcon.snippetForeground#5fffda
- symbolIcon.variableForeground#5dd4ff
- tab.activeBackground#121212
- tab.activeBorder#121212
- tab.activeBorderTop#f0a800
- tab.activeForeground#ffffff
- tab.activeModifiedBorder#121212
- tab.border#121212
- tab.hoverBackground#121212
- tab.hoverBorder#121212
- tab.hoverForeground#ffffff
- tab.inactiveBackground#212121
- tab.inactiveForeground#ffffff
- tab.inactiveModifiedBorder#121212
- tab.lastPinnedBorder#121212
- tab.unfocusedActiveBackground#121212
- tab.unfocusedActiveBorder#121212
- tab.unfocusedActiveBorderTop#121212
- tab.unfocusedActiveForeground#121212
- tab.unfocusedActiveModifiedBorder#121212
- tab.unfocusedHoverBackground#121212
- tab.unfocusedHoverBorder#121212
- tab.unfocusedHoverForeground#ffffff
- tab.unfocusedInactiveBackground#121212
- tab.unfocusedInactiveForeground#121212
- tab.unfocusedInactiveModifiedBorder#121212
- terminal.ansiBrightYellow#ffffff
- terminal.ansiYellow#ffffff
- terminal.background#121212
- terminal.border#121212
- terminal.dropBackground#ffffff
- terminal.foreground#f0a800
- terminal.selectionBackground#ffffff30
- terminal.tab.activeBorder#ffffff
- terminalCursor.background#ffffff
- terminalCursor.foreground#ffffff
- titleBar.activeBackground#121212
- titleBar.activeForeground#ffffff
- titleBar.border#121212
- titleBar.inactiveBackground#212121
- titleBar.inactiveForeground#ffffff
- toolbar.activeBackground#121212
- toolbar.hoverBackground#ffffff
- toolbar.hoverOutline#ffffff00
- tree.indentGuidesStroke#ffda9e
- tree.tableColumnsBorder#ffffff
- walkThrough.embeddedEditorBackground#121212
- welcomePage.background#212121
- welcomePage.buttonBackground#F0A800
- welcomePage.buttonHoverBackground#F0A800
- welcomePage.progress.background#F0A800
- welcomePage.progress.foreground#05b32e
- welcomePage.tileBackground#121212
- welcomePage.tileHoverBackground#000000
- welcomePage.tileShadow.#121212
- widget.shadow#306060
- window.activeBorder#121212
- window.inactiveBorder#121212
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #266e59 | — |
| meta.object-literal.key | #83aea9 | — |
| variable.other.readwrite.alias, entity.name.function, support.variable.property.js | #65cbe9 | — |
| support.type.property-name.css | #65cbe9 | bold |
| storage.modifier, storage.type.class, meta.brace.round, keyword.control.flow, keyword.control.import, keyword.control.from, keyword.control, storage.type, punctuation.operation.graphql | #ffb3c6 | — |
| #ffb3c6 | bold | |
| entity.name.tag.html, entity.name.tag.css, support.class.error, meta.brace.square.graphql | #ff686b | — |
| keyword.operator.nulltype.graphql, expression.ng | #ff686b | bold |
| punctuation.definition.block, meta.type.annotation, punctuation.terminator.statement, punctuation.definition.parameters, keyword.operator.type, variable.parameter, variable.other.property, support.type.primitive, string.quoted.double.html, entity.other.attribute-name, variable.parameter.graphql, punctuation.definition.dictionary.begin.json, punctuation.support.type.property-name, punctuation.definition.binding-pattern.object, keyword.operator.spread | #ffee93 | — |
| punctuation.decorator, punctuation.separator | #ffee93 | bold |
| string.quoted, constant.language, string.quoted.double.json, constant.numeric.decimal.js | #ffc09f | — |
| #ffc09f | bold | |
| constant.numeric, entity.name.type.class, entity.name.type, support.class, entity.other.ng-binding-name, entity.other.attribute-name.html, punctuation.section.property-list, source.css.scss, support.type.builtin.graphql, keyword.input.graphql, support.type.graphql, keyword.operator.logical, support.function.json, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.expression.of, meta.brace.square, keyword.operator.new, keyword.operator.ternary.js, keyword.operator.assignment, keyword.operator.relational | #adf7b6 | — |
| constant.language.boolean.true | #adf7b6 | bold |
| keyword.type.graphql, support.constant.json.ts | #fb6f92 | — |
| constant.language.boolean.false, punctuation.definition.template-expression | #fb6f92 | bold |
| punctuation.definition.string, entity.other.inherited-class, variable.object.property, variable.language.this, variable.other.object.property, variable.other.object, text.html.derivative, support.constant.property-value.css, keyword.operation.graphql, variable.other.constant.ts, punctuation.definition.string.template | #FFFFFF | — |
| #FFFFFF | bold | |
| #cecece | — | |
| #b3abab | bold | |
| variable.graphql, support.type.property-name, variable.other.readwrite, variable.other.constant.js | #b4c5d1 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...