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#24292e
  • activityBar.foreground#fafbfc
  • activityBarBadge.background#54a3ff
  • editor.background#081a25
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#0d2b3d
  • editor.selectionBackground#294058
  • editorBracketMatch.background#7177443b
  • editorBracketMatch.border#c8e1ff8f
  • editorGroupHeader.tabsBackground#05101d
  • editorGroupHeader.tabsBorder#05101d
  • editorIndentGuide.activeBackground#258086
  • editorIndentGuide.background#1e3c4e
  • editorLineNumber.foreground#c6c6c5
  • focusBorder#05101d
  • foreground#ffffff
  • panel.background#05101d
  • panelTitle.activeForeground#ffffff
  • scrollbar.shadow#00000000
  • sideBar.background#05101d
  • sideBar.border#05101d
  • sideBar.foreground#e1e4e8
  • sideBarSectionHeader.background#24292e
  • sideBarSectionHeader.foreground#e1e4e8
  • sideBarTitle.foreground#e1e4e8
  • statusBar.background#111011
  • statusBar.border#24292e
  • statusBar.debuggingBackground#fafbfc
  • statusBar.debuggingForeground#24292e
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#24292e
  • tab.activeBackground#122130
  • tab.activeBorder#0e223b
  • tab.border#060708
  • tab.inactiveBackground#05101d
  • tab.inactiveForeground#c6d6e9
  • titleBar.activeBackground#24292e
  • titleBar.border#05101d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#24292eff
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdownbold
markup.italic.markdownitalic
meta.link.inline.markdown#8ba0b8underline
markup.fenced_code, markup.inline#6a737d
string#032f62
constant.numeric, constant.language, variable.language.this, variable.other.class, variable.other.constant, meta.property-name, meta.property-value, support#99f071
keyword, storage.modifier, storage.type, support.function.node, support.type.property-name.json, punctuation.separator.key-value, punctuation.definition.template-expression#0aa5ff
variable.parameter.function#E27F2D
keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression#24292eff
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function#bdaaff
entity.other.inherited-class, meta.instance.constructor, meta.function-call#ffffff
variable.other.property#79fff8
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, keyword.other.template#79e299
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080
string.quoted.single.al, string.quoted.single.al.restored, constant.datetime.al#f599a0
keyword.control.al, entity.name.type.al, keyword.other.builtintypes.al#d47a7a
keyword.operators.al, keyword.operators.property.al, keyword.operators.assigment.al, keyword.operators.comparison.al, keyword.operators.math.al, keyword.other.applicationobject.al, keyword.other.metadata.al, keyword.other.property.al, constant.boolean.al#57bd81
entity.name.trigger.al, entity.trigger.call1.al#71b4c0bold
constant.boolean.alitalic
constant.numeric.al#f07ef0
comment, comment.line.al.restored#1bbd79

Shiki preview

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

Loading...

NDP AL Theme - Coding Theme