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#21252A
  • activityBarBadge.background#d4306f
  • debugIcon.continueForeground#67E1DD
  • debugIcon.restartForeground#E36E9B
  • debugIcon.startForeground#ABF076
  • debugIcon.stepIntoForeground#F0D060
  • debugIcon.stepOutForeground#F0D060
  • debugIcon.stepOverForeground#67E1DD
  • debugIcon.stopForeground#F26664
  • debugTokenExpression.boolean#82B7FF
  • debugTokenExpression.error#F26664
  • debugTokenExpression.name#CD76FC
  • debugTokenExpression.number#82B7FF
  • debugTokenExpression.string#00DC9E
  • debugTokenExpression.value#CCCCCC
  • debugToolBar.background#21252A
  • diffEditor.insertedTextBackground#1732167b
  • diffEditor.removedTextBackground#5b002366
  • dropdown.background#21252A
  • editor.background#21252A
  • editor.findMatchBackground#8a741e
  • editor.foreground#DDDDDD
  • editor.lineHighlightBackground#2a2f36
  • editor.selectionBackground#304052
  • editor.selectionHighlightBackground#333c47
  • editorGroupHeader.tabsBackground#21252A
  • editorGutter.addedBackground#0d5e31
  • editorGutter.deletedBackground#76162f
  • editorGutter.modifiedBackground#1e5382
  • editorIndentGuide.activeBackground#4a5c72
  • editorIndentGuide.background#2c3744
  • editorLineNumber.activeForeground#FF65A0
  • editorLineNumber.foreground#445468
  • editorWidget.background#21252A
  • input.background#253344
  • menu.background#21252A
  • panel.background#21252A
  • peekViewEditor.background#192029
  • peekViewEditor.matchHighlightBackground#213042
  • sideBar.background#21252A
  • sideBar.border#445468
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#1A1A1A
  • statusBar.debuggingBackground#21252A
  • statusBar.foreground#DDDDDD
  • statusBar.noFolderBackground#21252A
  • tab.activeBorder#FF65A0
  • tab.activeForeground#dadada
  • tab.border#21252A
  • tab.hoverBackground#181f25
  • tab.inactiveBackground#21252A
  • tab.inactiveForeground#4f6279
  • textCodeBlock.background#21252A
  • titleBar.activeBackground#21252A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#DDDDDD
comment, markup.quote.markdown, meta.diff, meta.diff.header#637384
string.quoted.docstring.multi, comment.block.documentation.c, storage.type.class.gtkdoc#42586F
support.type.exception#F26664
#EE3C36
#E36E9B
keyword.control.flow, keyword.control.c, keyword.control.if.cpp, keyword.control.else.cpp, keyword.control.while.cpp, keyword.control.for.cpp, keyword.control.return.cpp, keyword.control.break.cpp, storage.type.class.cpp, storage.type.modifier.access.control.private.cpp, storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.protected.cpp, keyword.other.typedef#E20272
meta.function.python, entity.other.inherited-class, storage.type.built-in.primitive.c, storage.type.built-in.primitive.cpp, support.type.python#FF9AD2
keyword.control, storage.type, punctuation.definition.decorator.python, keyword.other.using.directive.cpp, storage.modifier.declaration.python#F53CA8
entity.name.function.python, support.type.property-name.json, meta.function.c, entity.name.namespace.cpp, entity.name.scope-resolution.cpp, entity.name.function.preprocessor#CD76FC
support.function.magic, entity.name.function.definition.special.constructor.cpp, entity.name.function.definition.special.member.destructor.cpp#9966FF
constant.numeric, constant.language, constant.character.escape#82B7FF
storage.type.number, keyword.other.unit.hexadecimal.cpp#0090ff
variable.parameter.function.language, variable.parameter.function-call.python, meta.function.definition.parameters.c#67E1DD
variable.language.special.self, entity.name.type.class, entity.name.type.class.cpp, variable.language.this.cpp, support.type#00C1E8
meta.function-call.generic.python, entity.name.function.decorator.python, entity.name.function.c, entity.name.function.call.cpp, entity.name.function.member.cpp, entity.name.function.definition.cpp#ABF076
string#00DC9E
support.function.builtin, keyword.operator.sizeof.c, keyword.operator.sizeof.cpp#F2DE7D
support.variable.magic#E4B816
punctuation.separator, punctuation.section.function.begin, punctuation.section.class.begin, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.section.function.begin, punctuation.section.function.end, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.inheritance.begin, punctuation.definition.inheritance.end, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.section.function.lambda.begin.python, punctuation.terminator.statement.cpp, punctuation.terminator.statement.c, punctuation.section, punctuation.definition.begin.bracket.square.c, punctuation.definition.end.bracket.square.c, punctuation.separator.pointer-access.c#ffa23f
keyword.operator#ff590c
keyword.control.import, keyword.control.directive.include.c, keyword.control.directive.include.cpp#B88E70
#9C6E4C
keyword.operator.logical, keyword.control, storage.type, keyword.control.import, keyword.other.typedefitalic
keyword.codetag.notation.python, storage.type.class.gtkdocunderline
keyword.codetag.notation, entity.name.function.python, entity.name.type.class, support.function.magic, entity.name.function.definition.cppbold
storage.type.format, storage.type.number, entity.name.function.decorator.python, entity.name.function.preprocessor, meta.function.definition.parameters.c, entity.name.type.class.templated, entity.name.function.definition.cpp, storage.type.struct.c, storage.type.built-in.primitive.c, storage.type.union.c
bubble-dark by aryadaroui - VS Code Theme