mnml

Color themes

• 

  mnml dark

• 

  mnml light

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.activeBorder#005fb8
• activityBar.background#f8f8f8
• activityBar.border#0000001a
• activityBar.foreground#1f1f1f
• activityBar.inactiveForeground#0000009e
• activityBarBadge.background#005fb8
• activityBarBadge.foreground#ffffff
• badge.background#005fb8
• badge.foreground#ffffff
• button.background#005fb8
• button.border#0000001a
• button.foreground#ffffff
• button.hoverBackground#005fb8e6
• button.secondaryBackground#0000001a
• button.secondaryForeground#3b3b3b
• button.secondaryHoverBackground#00000034
• checkbox.background#f8f8f8
• checkbox.border#cecece
• descriptionForeground#3b3b3b
• diffEditor.insertedLineBackground#23863633
• diffEditor.insertedTextBackground#2386364d
• diffEditor.removedLineBackground#da363333
• diffEditor.removedTextBackground#da36334d
• dropdown.background#ffffff
• dropdown.border#cecece
• dropdown.foreground#3b3b3b
• dropdown.listBackground#ffffff
• editor.background#ffffff
• editor.foreground#3b3b3b
• editor.inactiveSelectionBackground#e5ebf1
• editor.selectionHighlightBackground#add6ff80
• editorBracketHighlight.foreground1#3150db
• editorBracketHighlight.foreground2#319331
• editorBracketHighlight.foreground3#7b3814
• editorGroup.border#0000001a
• editorGroupHeader.tabsBackground#f8f8f8
• editorGroupHeader.tabsBorder#0000001a
• editorGutter.addedBackground#2ea043
• editorGutter.deletedBackground#f85149
• editorGutter.modifiedBackground#005fb8
• editorIndentGuide.activeBackground#939393
• editorIndentGuide.background#d3d3d3
• editorInlayHint.background#8b949e33
• editorInlayHint.foreground#8b949e
• editorInlayHint.typeBackground#8b949e33
• editorInlayHint.typeForeground#8b949e
• editorLineNumber.activeForeground#171184
• editorLineNumber.foreground#6e7681
• editorOverviewRuler.border#0000001a
• editorSuggestWidget.background#f8f8f8
• editorWidget.background#ffffff
• errorForeground#f85149
• focusBorder#005fb8
• foreground#3b3b3b
• icon.foreground#3b3b3b
• input.background#ffffff
• input.border#cecece
• input.foreground#3b3b3b
• input.placeholderForeground#00000079
• inputOption.activeBackground#005fb841
• inputOption.activeBorder#005fb8
• inputOption.activeForeground#000000
• keybindingLabel.foreground#3b3b3b
• list.activeSelectionBackground#e8e8e8
• list.activeSelectionForeground#000000
• list.activeSelectionIconForeground#000000
• list.focusAndSelectionOutline#90c2f9
• list.hoverBackground#f2f2f2
• menu.border#d4d4d4
• notebook.cellBorderColor#e8e8e8
• notebook.selectedCellBackground#c8ddf150
• notificationCenterHeader.background#ffffff
• notificationCenterHeader.foreground#3b3b3b
• notifications.background#ffffff
• notifications.border#0000001a
• notifications.foreground#3b3b3b
• panel.background#f8f8f8
• panel.border#0000001a
• panelInput.border#0000001a
• panelTitle.activeBorder#005fb8
• panelTitle.activeForeground#3b3b3b
• panelTitle.inactiveForeground#3b3b3b
• peekViewEditor.matchHighlightBackground#bb800966
• peekViewResult.background#ffffff
• peekViewResult.matchHighlightBackground#bb800966
• pickerGroup.border#0000001a
• pickerGroup.foreground#8b949e
• ports.iconRunningProcessForeground#369432
• progressBar.background#005fb8
• quickInput.background#ffffff
• quickInput.foreground#3b3b3b
• scrollbar.shadow#484f5833
• scrollbarSlider.activeBackground#6e768187
• scrollbarSlider.background#6e768133
• scrollbarSlider.hoverBackground#6e768145
• searchEditor.textInputBorder#cecece
• settings.dropdownBackground#ffffff
• settings.dropdownBorder#cecece
• settings.headerForeground#1f1f1f
• settings.modifiedItemIndicator#bb800966
• settings.numberInputBorder#cecece
• settings.textInputBorder#cecece
• sideBar.background#f8f8f8
• sideBar.border#0000001a
• sideBar.foreground#3b3b3b
• sideBarSectionHeader.background#f8f8f8
• sideBarSectionHeader.border#0000001a
• sideBarSectionHeader.foreground#3b3b3b
• sideBarTitle.foreground#3b3b3b
• statusBar.background#f8f8f8
• statusBar.border#0000001a
• statusBar.debuggingBackground#fd716c
• statusBar.debuggingForeground#000000
• statusBar.focusBorder#005fb8
• statusBar.foreground#3b3b3b
• statusBar.noFolderBackground#f8f8f8
• statusBarItem.errorBackground#c72e0f
• statusBarItem.focusBorder#005fb8
• statusBarItem.prominentBackground#6e768166
• statusBarItem.remoteBackground#005fb8
• statusBarItem.remoteForeground#ffffff
• tab.activeBackground#ffffff
• tab.activeBorder#f8f8f8
• tab.activeBorderTop#005fb8
• tab.activeForeground#3b3b3b
• tab.border#0000001a
• tab.hoverBackground#ffffff
• tab.inactiveBackground#f8f8f8
• tab.inactiveForeground#00000080
• tab.lastPinnedBorder#3b3b3b30
• tab.unfocusedActiveBorder#f8f8f8
• tab.unfocusedActiveBorderTop#00000015
• tab.unfocusedHoverBackground#6e76811a
• terminal.foreground#3b3b3b
• terminal.inactiveSelectionBackground#e5ebf1
• terminal.tab.activeBorder#005fb8
• terminalCursor.foreground#005fb8
• textBlockQuote.background#f8f8f8
• textBlockQuote.border#0000001a
• textCodeBlock.background#6e768166
• textLink.activeForeground#005fb8
• textLink.foreground#005fb8
• textSeparator.foreground#21262d
• titleBar.activeBackground#f8f8f8
• titleBar.activeForeground#1e1e1e
• titleBar.border#0000001a
• titleBar.inactiveBackground#f8f8f8
• titleBar.inactiveForeground#8b949e
• welcomePage.tileBackground#f3f3f3
• widget.border#d4d4d4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...