Skip to main content
Coding Theme

Midnight Crimson

Publisher: devhippoThemes in package: 1

Introducing the Midnight Crimson theme for Visual Studio Code, a dark mode extension that will enhance your coding experience. This theme features a dark gray background with deep red accents, providing a visually striking and high-contrast appearance that makes your code easy to read. The Midnight

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#0a0a0a
  • activityBar.foreground#a0a0a0
  • activityBarBadge.background#ec557b
  • activityBarBadge.foreground#050505
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#242121
  • button.background#3f4650fa
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#242121
  • dropdown.listBackground#2E303E
  • editor.background#0c0c0c
  • editor.findMatchBackground#88767685
  • editor.findMatchHighlightBackground#88767634
  • editor.findRangeHighlightBackground#1b23811a
  • editor.hoverHighlightBackground#a19b819a
  • editor.inactiveSelectionBackground#352a3b
  • editor.lineHighlightBackground#080808
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#4b20643d
  • editor.selectionHighlightBackground#1b1b1b
  • editor.wordHighlightBackground#a42aeb3d
  • editor.wordHighlightStrongBackground#a42aeb3d
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#1C1E26
  • editorCursor.foreground#ffffff
  • editorError.foreground#e23e67
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#0e0e0e
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#e23e67
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#9e8e45fa
  • editorLineNumber.activeForeground#a0a0a0
  • editorLineNumber.foreground#d8ccbe28
  • editorOverviewRuler.addedForeground#09F7A080
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#F43E5C80
  • editorOverviewRuler.errorForeground#e23e67
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC280
  • editorOverviewRuler.warningForeground#27D79780
  • editorRuler.foreground#6C6F934D
  • editorSuggestWidget.highlightForeground#E95378
  • editorWarning.foreground#27D797B3
  • editorWhitespace.foreground#a0a0a062
  • editorWidget.background#181818
  • editorWidget.border#232530
  • errorForeground#e23e67
  • extensionButton.prominentBackground#990000
  • extensionButton.prominentHoverBackground#E9436D
  • focusBorder#272323
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#32b826c0
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#dddedf50
  • gitDecoration.modifiedResourceForeground#FAB38E
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#181818
  • inputOption.activeBorder#E9436D80
  • inputValidation.errorBackground#e23e67
  • inputValidation.errorBorder#b8193300
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#D5D8DA
  • list.dropBackground#6C6F9380
  • list.errorForeground#e23e67
  • list.focusBackground#2E303E80
  • list.focusForeground#D5D8DA
  • list.highlightForeground#e44a70
  • list.hoverBackground#2E303E80
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#27D797B3
  • panelTitle.activeBorder#e23e67
  • peekView.border#1A1C23
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • pickerGroup.foreground#E95378E6
  • progressBar.background#E95378
  • scrollbar.shadow#3f4650fa
  • scrollbarSlider.activeBackground#e23e67
  • scrollbarSlider.background#e23e675e
  • scrollbarSlider.hoverBackground#e23e67c2
  • selection.background#6C6F9380
  • sideBar.background#0f0f0f
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#0f0f0f
  • sideBarSectionHeader.foreground#a0a0a0
  • statusBar.background#0a0a0a
  • statusBar.debuggingBackground#da926c
  • statusBar.debuggingForeground#0c0606
  • statusBar.foreground#a0a0a0
  • statusBar.noFolderBackground#3c4050
  • statusBarItem.hoverBackground#52535f
  • statusBarItem.prominentBackground#292a33
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBackground#0c0c0c
  • tab.activeBorder#e23e67
  • tab.border#00000000
  • tab.inactiveBackground#0e0e0e
  • terminal.ansiBlue#26BBD9
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#FBC3A7
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9380
  • textLink.activeForeground#e23e67
  • textLink.foreground#e23e67
  • titleBar.activeBackground#201e1e
  • titleBar.inactiveBackground#3b3b3bd2
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#101014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#bbbbbb7citalic
constant.character.escape#25B0BCE6—
entity.name#FAC29AE6—
entity.name.function#e9dadae0bold
entity.name.tag#c93b5fbold
entity.name.type, storage.type.cs#FAC29AE6—
entity.other.attribute-name#288d8fbold italic
entity.other.inherited-class#e29c79f3—
entity.other.attribute-name.id#0077ffd8—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6—
entity.name.variable, variable#E95678E6—
entity.name.type.class.ts, entity.name.type.interface.ts#d090f5—
variable.other.constant.property.ts, variable.other.constant.object.property.ts#FFFFFF—
keyword.other.unit#E9436D—
markup.quote#FAB795B3italic
markup.heading, entity.name.section#E95678E6—
markup.bold#B877DBE6bold
markup.italic#25B0BCE6italic
markup.inline.raw, markup.fenced_code.block#F09483E6—
markup.underline.link#FAB795E6—
storage, keyword, keyword.operator, keyword.operator.new, keyword.operator.logical, keyword.operator.expression, keyword.operator.delete, variable.language#29a1a3f8bold
text.html.derivative#ced4dabold
string.quoted, string.template, constant, string.quoted.double, string.quoted.single, string.quoted.double.ts, constant.numeric.decimal, constant.language.null#80f35db7—
constant, constant.numeric.decimal, constant.language.null#c5f3ffcb—
string.regexp#F09483E6—
string.other.link#F09483E6—
support#b14a76bold
support.function#25B0BCE6—
support.variable#e95678bold
support.type.property-name, meta.object-literal.key#E95678E6
support.type.property-name.css#d9d9d9—
variable.parameter—italic
string.template meta.embedded#BBBBBB—
punctuation.definition.tag, punctuation.separator#ffffff9f—
punctuation.definition.template-expression#be74e6e6—
punctuation.section.embedded#be74e6e6—
punctuation.definition.list#f18572e6—
Midnight Crimson by devhippo - VS Code Theme