Skip to main content
Coding 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.background#222424
  • activityBar.border#353736
  • diffEditor.insertedTextBackground#0c520e40
  • diffEditor.removedTextBackground#da091340
  • editor.background#222424
  • editor.foreground#eeeeee
  • editor.lineHighlightBackground#171818
  • editor.selectionBackground#1b3139
  • editor.selectionHighlightBackground#193f3cb1
  • editor.selectionHighlightBorder#7ca29f6e
  • editor.wordHighlightBackground#4c80aa60
  • editor.wordHighlightBorder#52616d51
  • editor.wordHighlightStrongBackground#6ba6d390
  • editor.wordHighlightStrongBorder#89a8c088
  • editorBracketHighlight.foreground1#cccccf
  • editorBracketHighlight.foreground2#cccccf
  • editorBracketHighlight.foreground3#cccccf
  • editorBracketHighlight.foreground4#cccccf
  • editorBracketHighlight.foreground5#cccccf
  • editorBracketHighlight.foreground6#cccccf
  • editorBracketHighlight.unexpectedBracket.foreground#cccccf
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#00000000
  • editorBracketPairGuide.activeBackground1#00000000
  • editorBracketPairGuide.activeBackground2#00000000
  • editorBracketPairGuide.activeBackground3#00000000
  • editorBracketPairGuide.activeBackground4#00000000
  • editorBracketPairGuide.activeBackground5#00000000
  • editorBracketPairGuide.activeBackground6#00000000
  • editorCursor.foreground#777d81
  • editorGroup.border#353736
  • editorGroupHeader.tabsBackground#222424
  • editorGutter.addedBackground#0c520e
  • editorGutter.background#222424
  • editorGutter.deletedBackground#da0913
  • editorGutter.modifiedBackground#bf9f4d
  • editorIndentGuide.activeBackground1#cccccf
  • editorIndentGuide.background1#3d3d3d
  • editorInlayHint.background#34383800
  • editorInlayHint.foreground#53585c
  • editorLineNumber.foreground#4a4a4a
  • editorOverviewRuler.border#27292a
  • editorRuler.foreground#616161
  • editorWhitespace.foreground#3b3b3b
  • list.activeSelectionBackground#1b3139
  • list.activeSelectionForeground#e5e5e5
  • list.highlightForeground#98b18c
  • list.hoverBackground#171818
  • list.inactiveSelectionBackground#222424
  • notificationCenterHeader.background#5c5c42
  • notifications.background#5c5c42
  • panel.border#353736
  • peekViewEditor.background#222424
  • peekViewResult.background#171818
  • peekViewTitle.background#1b3139
  • scrollbar.shadow#2e3130
  • scrollbarSlider.activeBackground#777d8180
  • scrollbarSlider.background#3d3d3d80
  • scrollbarSlider.hoverBackground#4a4a4a80
  • sideBar.background#222424
  • sideBar.border#353736
  • statusBar.background#222424
  • statusBar.debuggingBackground#bf9f4d
  • statusBar.noFolderBackground#222424
  • tab.activeBackground#171818
  • tab.inactiveBackground#222424
  • terminal.ansiBlack#1c1a1a
  • terminal.ansiBlue#3993d4
  • terminal.ansiBrightBlack#898989
  • terminal.ansiBrightBlue#a4c2ff
  • terminal.ansiBrightCyan#8dd2c5
  • terminal.ansiBrightGreen#7bea96
  • terminal.ansiBrightMagenta#ff92f1
  • terminal.ansiBrightRed#ff6b68
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#e4e24a
  • terminal.ansiCyan#06969
  • terminal.ansiGreen#5c962c
  • terminal.ansiMagenta#983498
  • terminal.ansiRed#ea5e5e
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#a68a0d
  • terminal.background#2b2b2b
  • terminal.foreground#e5e5e5
  • titleBar.border#353736

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text, variable.other.readwrite#eeeeee
comment, punctuation.definition.comment#8b8b8b
comment.block.documentation, comment.line.documentation#9c7b7b
comment.block.documentation storage.type, comment.block.documentation variable.parameter, comment.block.documentation keyword#8a653bitalic
keyword, storage.type, storage.modifier#e5b597bold
meta.preprocessor, keyword.control.import, keyword.control.export, entity.name.tag.documentation, meta.annotation, entity.name.annotation, storage.type.annotation#b1b8b1
variable, meta.definition.variable.js#e5e5e5
variable.parameter#c0cdde
#c0cdde
constant.language, variable.language.this, variable.language.super#e5b597bold
variable.other.constant, variable.other.readwrite.static, entity.name.variable.static#eedab8italic
entity.name.label#d7d687
string, punctuation.definition.string#d297b0
constant.character.escape#bb700f
invalid.illegal.string#d72d2d
string.regexp#73a0ff
constant.numeric#8dd2c5
entity.name.type, entity.name.class, support.class#98b18cbold
entity.other.inherited-class#98b18cbold
entity.name.interface#bfbc86bold
entity.name.enum, support.enum#b5b882bold
constant.other.enum#d99b79
entity.name.type.parameter, variable.type.parameter#cd7d46
entity.name.function, support.function, meta.function-call#e5e5e5
meta.function-call variable.function, entity.name.function.constructor#98b18c
entity.name.function.static, support.function.static#eedab8italic
entity.name.tag#e5b597bold
entity.other.attribute-name#bfbfbf
string.quoted.double, string.quoted.single#d297b0
constant.character.entity#b8b8ff
support.function.external.bash#98b18c
variable.other.readwrite.instance.dart#a4c2ff
keyword.operator.ternary.dart#e5e5e5
variable.parameter.named.kotlin#999999
meta.dynamic.call.kotlin#ff92f1
invalid, invalid.illegal#f34c4c
invalid.deprecated#e5e5e5strikethrough
string.unquoted.plain.out.yaml#E5E5E5
support.type.property-name.json#e5e5e5
meta.structure.dictionary.json, source.json#e5e5e5
Sweet Pascal by Pascal Welsch - VS Code Theme