Skip to main content
Coding Theme

September Steel

Publisher: Per Ragnar EdinThemes in package: 3

A dark flat theme based on One Monokai Theme by Joshua Azemoh. The 2021 version is inspired by Nord Operator Theme by Chad.

Color themes

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#23272e
  • activityBar.border#23272E
  • activityBar.foreground#576073
  • activityBarBadge.background#a53500
  • activityBarBadge.foreground#f8fafd
  • badge.background#a53500
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#343844
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#828da1
  • button.background#404754
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1d1f23
  • dropdown.border#181a1f
  • editor.background#2f333d
  • editor.findMatchBackground#0088FF
  • editor.findMatchHighlightBackground#0087FF55
  • editor.hoverHighlightBackground#a53500
  • editor.lineHighlightBackground#383e4a
  • editor.selectionBackground#3f4450
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#BF9900
  • editorBracketMatch.background#a53500
  • editorBracketMatch.border#a53500
  • editorCodeLens.foreground#555B6E
  • editorCursor.background#ffffff
  • editorCursor.foreground#009DFF
  • editorError.foreground#c24038
  • editorGroup.border#23272e
  • editorGroupHeader.border#23272E
  • editorGroupHeader.tabsBackground#23272E
  • editorGroupHeader.tabsBorder#23272E
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#646872
  • editorIndentGuide.background#3F434C
  • editorLineNumber.activeForeground#d1d5e488
  • editorLineNumber.foreground#495162
  • editorPane.background#2a2f38
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#1B80B2
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • gitDecoration.conflictingResourceForeground#ff7300
  • gitDecoration.deletedResourceForeground#da0f00
  • gitDecoration.ignoredResourceForeground#535964
  • gitDecoration.modifiedResourceForeground#e5c07b
  • gitDecoration.untrackedResourceForeground#98c379
  • input.background#1d1f23
  • list.activeSelectionBackground#3b404b
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#1B80B2
  • list.focusForeground#ffffff
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#3b404b
  • list.inactiveSelectionBackground#3b404b
  • list.inactiveSelectionForeground#d7dae0
  • panel.background#282c34
  • panel.border#23272e
  • panelTitle.activeBorder#F7A04F
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff55
  • peekView.border#1D1F23
  • peekViewEditor.background#252931
  • peekViewEditor.matchHighlightBackground#00000055
  • peekViewResult.background#1e2229
  • peekViewResult.matchHighlightBackground#0058a0
  • peekViewTitle.background#1D1F23
  • peekViewTitleDescription.foreground#aaccff44
  • peekViewTitleLabel.foreground#ffffff99
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#282c34
  • sideBar.border#23272E
  • sideBar.foreground#7d8594
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#f7be4f
  • statusBar.background#282c34
  • statusBar.border#23272E
  • statusBar.debuggingBackground#21252b
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#99a1af
  • statusBarItem.remoteForeground#282c34
  • tab.activeBackground#343844
  • tab.activeBorderTop#3c68a1
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#a1893c
  • tab.border#23272E
  • tab.hoverBackground#2F333D
  • tab.inactiveBackground#282C34
  • tab.inactiveForeground#606980
  • tab.lastPinnedBorder#00000055
  • tab.unfocusedActiveForeground#8e9cb8
  • terminal.ansiBlack#1D1F23
  • terminal.ansiBlue#61afef
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#b267e6
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#bbbbbb
  • terminal.ansiYellow#e5c07b
  • terminal.background#252930
  • terminal.border#2f333d
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.border#23272E
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#6b717d
  • tree.indentGuidesStroke#646872
  • widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bbbbbbff
comment, punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#5b667citalic
string#e5c07b
string.quoted.double.html#e5c07b
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#d27de5
string.template.js#e5c07b
meta.template.expression.js#abb2bf
constant.numeric#d27de5
string.embedded.begin, string.embedded.end#d27de5
string.embedded#98c379
constant.language#56b6c2
constant.character, constant.other#56b6c2
variable.language#e06c75
variable.readwrite, variable.readwrite.other.block#61afef
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75
keyword.operator#b5bfcf
storage#e06c75
storage.type#56b6c2
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef
variable.other.object#61afef
variable.other.property, variable.other.block#abb2bf
entity.other.inherited-class#98c379
entity.name.function, support.function#98c379
variable.parameter#d19a66
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#98c379
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#e06c75
entity.name.tag.class, entity.name.tag.id#56b6c2
entity.other.attribute-name#98c379
support.constant#56b6c2
support.type, support.variable#56b6c2
support.dictionary.json#56b6c2
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#98c379
variable.css, variable.scss, variable.less, variable.sass#56b6c2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#d27de5
function.css, function.scss, function.less, function.sass#56b6c2
support.other.variable
invalid#d27de5
invalid.deprecated#56b6c2
structure.dictionary.property-name.json#56b6c2
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#d27de5
markup.inserted#e5c07b
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#e5c07b
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
markup.heading.markdown#5c6370bold
markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#f7be4fbold
entity.name.section.markdown#f7be4f
markup.underline.link.image.markdown, markup.underline.link.markdown#61afef
punctuation#798497
punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.markdown, punctuation.definition.raw.markdown#5c6370
punctuation.definition.list.begin.markdown#98c379
markup.bold.markdown#98c379bold
markup.italic.markdown#e06c75italic
markup.quote.markdown#56b6c2italic
fenced_code.block.language#E06B74
markup.list.unnumbered.markdown#e5c07b
markup.inline.raw.string.markdown, markup.raw.block.markdown, markup.fenced_code.block.markdown#61afef
punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.link.markdown#5c6370
meta.separator.markdown#5c6370
constant.other.reference.link.markdown#e06c75
support.function.builtin.python#61afef
meta.function-call.generic.python#98c379

Shiki preview

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

Loading...