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.

  • editor.background#0D1117
  • editor.findMatchBackground#EAB30855
  • editor.findMatchBorder#FACC15
  • editor.findMatchHighlightBackground#F59E0B22
  • editor.foreground#E6EDF3
  • editor.hoverHighlightBackground#22C55E22
  • editor.inactiveSelectionBackground#172554
  • editor.selectionBackground#1E3A5F
  • editor.wordHighlightBackground#1D4ED833
  • editor.wordHighlightStrongBackground#F59E0B33
  • editorBracketMatch.background#0EA5E922
  • editorBracketMatch.border#22D3EE
  • editorCursor.foreground#F8FAFC
  • editorIndentGuide.activeBackground1#334155
  • editorIndentGuide.background1#1F2937
  • editorLineNumber.activeForeground#93C5FD
  • editorLineNumber.foreground#4B5563
  • editorLink.activeForeground#22D3EE
  • editorWhitespace.foreground#1F2937

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line.documentation.draton#667085italic
keyword.control.draton, keyword.control.import.draton, keyword.control.from.draton, keyword.control.as.draton, keyword.declaration.relationship.draton#FF6B6Bbold
storage.type.function.draton, storage.type.class.draton, storage.type.interface.draton, storage.type.enum.draton, storage.type.error.draton, storage.type.layer.draton, storage.type.binding.draton, storage.type.channel.draton#FF4FA3bold
storage.modifier.access.draton, storage.modifier.mutable.draton, storage.modifier.attribute.draton#FF7EDBbold
entity.name.type.class.draton, entity.name.type.interface.draton, entity.name.type.enum.draton, entity.name.type.error.draton, entity.name.type.draton, support.type.builtin.draton#8B9CFF
entity.name.section.layer.draton, entity.name.namespace.draton, meta.import.draton, meta.import.draton variable.other.import.draton, meta.import.draton entity.name.namespace.draton, meta.import.draton keyword.control.import.draton, meta.import.draton keyword.control.from.draton, meta.import.draton keyword.control.as.draton, meta.import.draton punctuation.definition.import.draton#78DCE8
entity.name.function.draton#7CFC8Abold
entity.name.function.call.draton, entity.name.function.method.draton, support.function.constructor.draton#22D3EE
variable.other.definition.draton, variable.other.import.draton, variable.other.readwrite.draton#FF9E64
variable.parameter.draton#FFB86C
variable.other.property.draton#F9E2AF
constant.other.enum-member.draton, constant.language.boolean.draton, constant.language.null.draton, variable.language.wildcard.draton#D4AF37bold
constant.numeric.integer.draton, constant.numeric.float.draton, constant.numeric.hex.draton, constant.numeric.binary.draton#FF9F1C
string.quoted.double.draton, string.quoted.double.interpolated.draton#3DDC97
punctuation.definition.string.begin.draton, punctuation.definition.string.end.draton, constant.character.escape.draton#34D399
meta.interpolation.draton, punctuation.section.interpolation.begin.draton, punctuation.section.interpolation.end.draton#F472B6bold
keyword.operator.draton#F15BB5
punctuation.definition.group.draton, punctuation.definition.import.draton, punctuation.separator.comma.draton, punctuation.terminator.statement.draton, punctuation.accessor.draton#AAB6C3
Draton by Draton - VS Code Theme