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.parameteritalic
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