Dark Mage by Ray -A VS Code Theme

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#26303233
• activityBar.activeBorder#b4ddd9
• activityBar.activeFocusBorder#a3ffe5
• activityBar.background#090e11
• activityBar.border#090e11
• activityBar.dropBorder#ffdd00
• activityBar.foreground#98bab7
• activityBar.inactiveForeground#7b9896
• activityBarBadge.background#a3ffe5
• activityBarBadge.foreground#090e11
• badge.background#a3ffe5
• badge.foreground#090e11
• breadcrumb.activeSelectionForeground#d1fffa
• breadcrumb.background#090e11
• breadcrumb.focusForeground#b4ddd9
• breadcrumb.foreground#98bab7
• breadcrumbPicker.background#090e11
• button.background#ffdd00
• button.foreground#090e11
• button.hoverBackground#c4c4c4
• button.secondaryBackground#b4ddd9
• button.secondaryForeground#090e11
• button.secondaryHoverBackground#98bab7
• charts.blue#ffdd00
• charts.foreground#b4ddd9
• charts.green#bdf7ff
• charts.lines#5f7575
• charts.orange#8af1ff
• charts.purple#a3ffe5
• charts.red#9effef
• charts.yellow#ffc800
• checkbox.background#ffdd00
• checkbox.border#263032
• checkbox.foreground#090e11
• debugConsole.errorForeground#9effef
• debugConsole.infoForeground#ffdd00
• debugConsole.sourceForeground#a3ffe5
• debugConsole.warningForeground#8af1ff
• debugConsoleInputIcon.foreground#7b9896
• debugExceptionWidget.background#263032
• debugExceptionWidget.border#263032
• debugIcon.breakpointCurrentStackframeForeground#bdf7ff
• debugIcon.breakpointDisabledForeground#7b9896
• debugIcon.breakpointForeground#9effef
• debugIcon.breakpointStackframeForeground#ffc800
• debugIcon.breakpointUnverifiedForeground#98bab7
• debugIcon.continueForeground#bdf7ff
• debugIcon.disconnectForeground#8af1ff
• debugIcon.pauseForeground#ffdd00
• debugIcon.restartForeground#006699
• debugIcon.startForeground#bdf7ff
• debugIcon.stepBackForeground#d1fffa
• debugIcon.stepIntoForeground#d1fffa
• debugIcon.stepOutForeground#d1fffa
• debugIcon.stepOverForeground#d1fffa
• debugIcon.stopForeground#9effef
• debugTokenExpression.boolean#a3ffe5
• debugTokenExpression.error#9effef
• debugTokenExpression.name#ffdd00
• debugTokenExpression.number#006699
• debugTokenExpression.string#bdf7ff
• debugTokenExpression.value#d1fffa
• debugToolBar.background#263032
• debugToolBar.border#425354
• debugView.exceptionLabelBackground#263032
• debugView.exceptionLabelForeground#ffc800
• debugView.stateLabelBackground#263032
• debugView.stateLabelForeground#ffdd00
• debugView.valueChangedHighlight#ffc80033
• descriptionForeground#b4ddd9
• diffEditor.border#263032
• diffEditor.diagonalFill#2630327f
• diffEditor.insertedTextBackground#bdf7ff20
• diffEditor.removedTextBackground#9effef20
• dropdown.background#263032
• dropdown.border#263032
• dropdown.foreground#b4ddd9
• dropdown.listBackground#263032
• editor.background#090e11
• editor.findMatchBackground#ffc8003f
• editor.findMatchHighlightBackground#ffc80033
• editor.findRangeHighlightBackground#263032
• editor.focusedStackFrameHighlightBackground#bdf7ff3f
• editor.foldBackground#26303266
• editor.foreground#d1fffa
• editor.hoverHighlightBackground#4253547f
• editor.inactiveSelectionBackground#ffdd0033
• editor.lineHighlightBackground#090e11
• editor.lineHighlightBorder#263032
• editor.rangeHighlightBackground#ffc80033
• editor.selectionBackground#ffdd0033
• editor.selectionForeground#d1fffa
• editor.selectionHighlightBackground#263032
• editor.snippetFinalTabstopHighlightBackground#4253547f
• editor.snippetTabstopHighlightBackground#2630327f
• editor.stackFrameHighlightBackground#c4c4c43f
• editor.symbolHighlightBackground#a3ffe533
• editor.wordHighlightBackground#a3ffe533
• editor.wordHighlightStrongBackground#00669933
• editorBracketMatch.background#263032
• editorBracketMatch.border#425354
• editorCodeLens.foreground#98bab7
• editorCursor.background#090e11
• editorCursor.foreground#a3ffe5
• editorError.border#d1fffa
• editorError.foreground#9effef
• editorGroup.border#263032
• editorGroup.dropBackground#4253547f
• editorGroup.emptyBackground#090e11
• editorGroup.focusedEmptyBorder#263032
• editorGroupHeader.border#090e11
• editorGroupHeader.noTabsBackground#090e11
• editorGroupHeader.tabsBackground#090e11
• editorGroupHeader.tabsBorder#090e11
• editorGutter.addedBackground#bdf7ff
• editorGutter.background#090e11
• editorGutter.commentRangeForeground#5f7575
• editorGutter.deletedBackground#9effef
• editorGutter.foldingControlForeground#98bab7
• editorGutter.modifiedBackground#ffc800
• editorHint.border#7b9896
• editorHint.foreground#006699
• editorHoverWidget.background#263032
• editorHoverWidget.border#263032
• editorHoverWidget.foreground#b4ddd9
• editorHoverWidget.statusBarBackground#ffdd0033
• editorIndentGuide.activeBackground#425354
• editorIndentGuide.background#263032
• editorInfo.border#98bab7
• editorInfo.foreground#ffdd00
• editorLightBulb.foreground#ffc800
• editorLightBulbAutoFix.foreground#ffdd00
• editorLineNumber.activeForeground#7b9896
• editorLineNumber.foreground#425354
• editorLink.activeForeground#c4c4c4
• editorMarkerNavigation.background#263032
• editorMarkerNavigationError.background#9effef
• editorMarkerNavigationInfo.background#ffdd00
• editorMarkerNavigationWarning.background#8af1ff
• editorOverviewRuler.addedForeground#bdf7ff7f
• editorOverviewRuler.border#263032
• editorOverviewRuler.bracketMatchForeground#5f7575
• editorOverviewRuler.commonContentForeground#a3ffe5
• editorOverviewRuler.currentContentForeground#c4c4c4
• editorOverviewRuler.deletedForeground#9effef7f
• editorOverviewRuler.errorForeground#9effef7f
• editorOverviewRuler.findMatchForeground#ffc800bf
• editorOverviewRuler.incomingContentForeground#ffdd00
• editorOverviewRuler.infoForeground#ffdd007f
• editorOverviewRuler.modifiedForeground#ffc8007f
• editorOverviewRuler.rangeHighlightForeground#425354bf
• editorOverviewRuler.selectionHighlightForeground#263032bf
• editorOverviewRuler.warningForeground#8af1ff7f
• editorOverviewRuler.wordHighlightForeground#425354bf
• editorOverviewRuler.wordHighlightStrongForeground#5f7575bf
• editorPane.background#090e11
• editorRuler.foreground#263032
• editorSuggestWidget.background#263032
• editorSuggestWidget.border#263032
• editorSuggestWidget.foreground#b4ddd9
• editorSuggestWidget.highlightForeground#006699
• editorSuggestWidget.selectedBackground#425354
• editorUnnecessaryCode.opacity#0000007f
• editorWarning.border#b4ddd9
• editorWarning.foreground#8af1ff
• editorWhitespace.foreground#263032
• editorWidget.background#263032
• editorWidget.border#263032
• editorWidget.foreground#b4ddd9
• editorWidget.resizeBorder#ffdd00
• errorForeground#9effef
• extensionBadge.remoteBackground#006699
• extensionBadge.remoteForeground#090e11
• extensionButton.prominentBackground#ffdd00
• extensionButton.prominentForeground#090e11
• extensionButton.prominentHoverBackground#c4c4c4
• focusBorder#a3ffe5
• foreground#d1fffa
• gitDecoration.addedResourceForeground#bdf7ff
• gitDecoration.conflictingResourceForeground#c4c4c4
• gitDecoration.deletedResourceForeground#9effef
• gitDecoration.ignoredResourceForeground#5f7575
• gitDecoration.modifiedResourceForeground#ffc800
• gitDecoration.stageDeletedResourceForeground#9effef
• gitDecoration.stageModifiedResourceForeground#c4c4c4
• gitDecoration.submoduleResourceForeground#006699
• gitDecoration.untrackedResourceForeground#a3ffe5
• icon.foreground#b4ddd9
• imagePreview.border#263032
• input.background#263032
• input.border#263032
• input.foreground#b4ddd9
• input.placeholderForeground#425354
• inputOption.activeBackground#425354
• inputOption.activeBorder#c4c4c4
• inputOption.activeForeground#d1fffa
• inputValidation.errorBackground#263032
• inputValidation.errorBorder#9effef
• inputValidation.errorForeground#9effef
• inputValidation.infoBackground#263032
• inputValidation.infoBorder#ffdd00
• inputValidation.infoForeground#ffdd00
• inputValidation.warningBackground#263032
• inputValidation.warningBorder#8af1ff
• inputValidation.warningForeground#8af1ff
• list.activeSelectionBackground#a3ffe533
• list.activeSelectionForeground#d1fffa
• list.deemphasizedForeground#7b9896
• list.dropBackground#263032
• list.errorForeground#9effef
• list.filterMatchBackground#ffc80033
• list.filterMatchBorder#ffc80033
• list.focusBackground#5f75753f
• list.focusForeground#d1fffa
• list.highlightForeground#ffc800
• list.hoverBackground#26303233
• list.hoverForeground#d1fffa
• list.inactiveFocusBackground#2630323f
• list.inactiveSelectionBackground#4253543f
• list.inactiveSelectionForeground#b4ddd9
• list.invalidItemForeground#9effef
• list.warningForeground#ffc800
• listFilterWidget.background#263032
• listFilterWidget.noMatchesOutline#9effef
• listFilterWidget.outline#ffdd00
• menu.background#090e11
• menu.foreground#b4ddd9
• menu.selectionBackground#263032
• menu.selectionForeground#d1fffa
• menu.separatorBackground#425354
• menubar.selectionBackground#263032
• menubar.selectionForeground#d1fffa
• merge.border#7b9896
• merge.commonContentBackground#a3ffe54c
• merge.commonHeaderBackground#a3ffe54c
• merge.currentContentBackground#c4c4c44c
• merge.currentHeaderBackground#c4c4c44c
• merge.incomingContentBackground#ffdd004c
• merge.incomingHeaderBackground#ffdd004c
• minimap.background#090e11
• minimap.errorHighlight#9effef80
• minimap.findMatchHighlight#ffc800
• minimap.selectionHighlight#ffdd0080
• minimap.warningHighlight#8af1ff80
• minimapGutter.addedBackground#bdf7ff80
• minimapGutter.deletedBackground#9effef80
• minimapGutter.modifiedBackground#ffc80080
• minimapSlider.activeBackground#5f757533
• minimapSlider.background#26303233
• minimapSlider.hoverBackground#42535433
• notebook.cellBorderColor#2630323f
• notebook.cellHoverBackground#2630323f
• notebook.cellInsertionIndicator#bdf7ff
• notebook.cellStatusBarItemHoverBackground#2630323f
• notebook.cellToolbarSeparator#2630323f
• notebook.focusedCellBackground#2630327f
• notebook.focusedCellBorder#a3ffe5
• notebook.focusedCellShadow#0000003f
• notebook.focusedEditorBorder#263032
• notebook.focusedRowBorder#a3ffe5
• notebook.inactiveFocusedCellBorder#98bab7
• notebook.outputContainerBackgroundColor#090e11
• notebook.rowHoverBackground#2630327f
• notebook.selectedCellBorder#7b9896
• notebook.symbolHighlightBackground#a3ffe53f
• notebookScrollbarSlider.activeBackground#98bab77f
• notebookScrollbarSlider.background#5f75757f
• notebookScrollbarSlider.hoverBackground#7b98967f
• notebookStatusErrorIcon.foreground#9effef
• notebookStatusRunningIcon.foreground#ffdd00
• notebookStatusSuccessIcon.foreground#bdf7ff
• notificationCenterHeader.background#425354
• notificationCenterHeader.foreground#b4ddd9
• notificationLink.foreground#ffdd00
• notifications.background#263032
• notifications.border#5f7575
• notifications.foreground#d1fffa
• notificationsErrorIcon.foreground#9effef
• notificationsInfoIcon.foreground#ffdd00
• notificationsWarningIcon.foreground#8af1ff
• notificationToast.border#5f7575
• panel.background#090e11
• panel.border#263032
• panel.dropBorder#ffdd00
• panelSection.border#263032
• panelSection.dropBackground#2630323f
• panelSectionHeader.background#425354
• panelSectionHeader.border#090e11
• panelSectionHeader.foreground#b4ddd9
• panelTitle.activeBorder#5f7575
• panelTitle.activeForeground#b4ddd9
• panelTitle.inactiveForeground#7b9896
• peekView.border#006699
• peekViewEditor.background#2630327f
• peekViewEditor.matchHighlightBackground#ffc8007f
• peekViewEditorGutter.background#2630327f
• peekViewResult.background#263032
• peekViewResult.fileForeground#b4ddd9
• peekViewResult.lineForeground#425354
• peekViewResult.matchHighlightBackground#ffc800
• peekViewResult.selectionBackground#5f7575
• peekViewResult.selectionForeground#d1fffa
• peekViewTitle.background#263032
• peekViewTitleDescription.foreground#98bab7
• peekViewTitleLabel.foreground#d1fffa
• pickerGroup.border#425354
• pickerGroup.foreground#7b9896
• problemsErrorIcon.foreground#9effef
• problemsInfoIcon.foreground#ffdd00
• problemsWarningIcon.foreground#8af1ff
• progressBar.background#bdf7ff
• quickInput.background#263032
• quickInput.foreground#d1fffa
• quickInputTitle.background#425354
• sash.hoverBorder#ffdd00
• scm.providerBorder#425354
• scrollbar.shadow#090e11
• scrollbarSlider.activeBackground#98bab77f
• scrollbarSlider.background#5f75757f
• scrollbarSlider.hoverBackground#7b98967f
• selection.background#425354
• settings.checkboxBackground#ffdd00
• settings.checkboxBorder#ffdd00
• settings.checkboxForeground#090e11
• settings.dropdownBackground#263032
• settings.dropdownForeground#b4ddd9
• settings.dropdownListBorder#425354
• settings.focusedRowBackground#090e11
• settings.headerForeground#d1fffa
• settings.modifiedItemIndicator#c4c4c4
• settings.numberInputBackground#263032
• settings.numberInputForeground#b4ddd9
• settings.textInputBackground#263032
• settings.textInputForeground#b4ddd9
• sideBar.background#090e11
• sideBar.border#263032
• sideBar.dropBackground#2630323f
• sideBar.foreground#b4ddd9
• sideBarSectionHeader.background#425354
• sideBarSectionHeader.border#090e11
• sideBarSectionHeader.foreground#b4ddd9
• sideBarTitle.foreground#98bab7
• statusBar.background#ffdd00
• statusBar.border#090e11
• statusBar.debuggingBackground#8af1ff
• statusBar.debuggingBorder#090e11
• statusBar.debuggingForeground#090e11
• statusBar.foreground#090e11
• statusBar.noFolderBackground#a3ffe5
• statusBar.noFolderBorder#090e11
• statusBar.noFolderForeground#090e11
• statusBarItem.activeBackground#c4c4c4
• statusBarItem.errorBackground#9effef
• statusBarItem.errorForeground#090e11
• statusBarItem.hoverBackground#bdf7ff
• statusBarItem.prominentBackground#c4c4c4
• statusBarItem.prominentHoverBackground#bdf7ff
• statusBarItem.remoteBackground#c4c4c4
• statusBarItem.remoteForeground#090e11
• symbolIcon.arrayForeground#006699
• symbolIcon.booleanForeground#a3ffe5
• symbolIcon.classForeground#ffdd00
• symbolIcon.colorForeground#c4c4c4
• symbolIcon.constantForeground#bdf7ff
• symbolIcon.constructorForeground#a3ffe5
• symbolIcon.enumeratorForeground#c4c4c4
• symbolIcon.enumeratorMemberForeground#ffdd00
• symbolIcon.eventForeground#8af1ff
• symbolIcon.fieldForeground#9effef
• symbolIcon.fileForeground#b4ddd9
• symbolIcon.folderForeground#98bab7
• symbolIcon.functionForeground#a3ffe5
• symbolIcon.interfaceForeground#9effef
• symbolIcon.keyForeground#ffc800
• symbolIcon.keywordForeground#ffdd00
• symbolIcon.methodForeground#c4c4c4
• symbolIcon.moduleForeground#c4c4c4
• symbolIcon.namespaceForeground#ffdd00
• symbolIcon.nullForeground#9effef
• symbolIcon.numberForeground#8af1ff
• symbolIcon.objectForeground#d1fffa
• symbolIcon.operatorForeground#9effef
• symbolIcon.packageForeground#8af1ff
• symbolIcon.propertyForeground#c4c4c4
• symbolIcon.referenceForeground#8af1ff
• symbolIcon.snippetForeground#98bab7
• symbolIcon.stringForeground#bdf7ff
• symbolIcon.structForeground#ffdd00
• symbolIcon.textForeground#d1fffa
• symbolIcon.typeParameterForeground#ffdd00
• symbolIcon.unitForeground#ffc800
• symbolIcon.variableForeground#8af1ff
• tab.activeBackground#090e11
• tab.activeForeground#b4ddd9
• tab.activeModifiedBorder#ffc800
• tab.border#090e11
• tab.hoverBackground#26303280
• tab.hoverForeground#98bab7
• tab.inactiveBackground#263032
• tab.inactiveForeground#5f7575
• tab.inactiveModifiedBorder#ffc800
• tab.lastPinnedBorder#006699
• tab.unfocusedActiveBackground#090e11
• tab.unfocusedActiveForeground#5f7575
• tab.unfocusedActiveModifiedBorder#ffc800
• tab.unfocusedHoverBackground#26303280
• tab.unfocusedHoverForeground#7b9896
• tab.unfocusedInactiveBackground#263032
• tab.unfocusedInactiveForeground#425354
• tab.unfocusedInactiveModifiedBorder#ffc800
• terminal.ansiBlack#090e11
• terminal.ansiBlue#ffdd00
• terminal.ansiBrightBlack#263032
• terminal.ansiBrightBlue#ffdd00
• terminal.ansiBrightCyan#c4c4c4
• terminal.ansiBrightGreen#c4c4c4
• terminal.ansiBrightMagenta#006699
• terminal.ansiBrightRed#8af1ff
• terminal.ansiBrightWhite#d1fffa
• terminal.ansiBrightYellow#ffc800
• terminal.ansiCyan#c4c4c4
• terminal.ansiGreen#bdf7ff
• terminal.ansiMagenta#006699
• terminal.ansiRed#9effef
• terminal.ansiWhite#b4ddd9
• terminal.ansiYellow#ffc800
• terminal.background#090e11
• terminal.foreground#b4ddd9
• terminal.selectionBackground#ffdd007f
• terminalCursor.background#263032
• terminalCursor.foreground#98bab7
• testing.iconErrored#9effef
• testing.iconFailed#8af1ff
• testing.iconPassed#bdf7ff
• testing.iconQueued#c4c4c4
• testing.iconSkipped#7b9896
• testing.iconUnset#98bab7
• testing.message.error.decorationForeground#9effef
• testing.message.error.lineBackground#9effef3f
• testing.message.hint.decorationForeground#006699
• testing.message.hint.lineBackground#0066993f
• testing.message.info.decorationForeground#ffdd00
• testing.message.info.lineBackground#ffdd003f
• testing.message.warning.decorationForeground#8af1ff
• testing.message.warning.lineBackground#8af1ff3f
• testing.peekBorder#5f7575
• testing.runAction#ffdd00
• textBlockQuote.background#263032
• textBlockQuote.border#263032
• textCodeBlock.background#090e11
• textLink.activeForeground#c4c4c4
• textLink.foreground#ffdd00
• textPreformat.foreground#8af1ff
• textSeparator.foreground#7b9896
• titleBar.activeBackground#090e11
• titleBar.activeForeground#98bab7
• titleBar.inactiveBackground#090e11
• titleBar.inactiveForeground#5f7575
• tree.indentGuidesStroke#263032
• walkThrough.embeddedEditorBackground#090e11
• welcomePage.background#090e11
• welcomePage.buttonBackground#263032
• welcomePage.buttonHoverBackground#425354
• welcomePage.progress.background#ffdd00
• welcomePage.progress.foreground#090e11
• widget.shadow#090e11

tokenColors

TextMate scopes and font styles (syntax highlighting rules).