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#eceff1
  • activityBar.border#90a4ae50
  • activityBar.foreground#031530
  • editor.background#ffffff
  • editor.findMatchBackground#1dafd933
  • editor.findMatchHighlightBackground#00000010
  • editor.foreground#90a4ae
  • editor.lineHighlightBackground#1dafd910
  • editor.lineHighlightBorder#ffffff
  • editor.selectionBackground#fdbc4022
  • editorCursor.foreground#000000
  • editorGroupHeader.tabsBackground#eceff1
  • editorLineNumber.activeForeground#896ac3
  • editorLineNumber.foreground#eceff1
  • foreground#90a4ae
  • scrollbar.shadow#ffffff
  • sideBar.background#eceff1
  • sideBar.dropBackground#90a4ae
  • sideBar.foreground#000000
  • statusBar.background#eceff1
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#eceff1
  • statusBar.noFolderForeground#000000
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeBorderTop#896ac3
  • tab.activeForeground#031530
  • tab.border#eceff1
  • tab.inactiveBackground#eceff1
  • tab.inactiveForeground#90a4ae
  • titleBar.activeBackground#eceff1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta, keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.default, support.type.property-name.css, support.function.misc.css, meta.function-call variable, constant.language.symbol.hashkey.ruby#90a4ae
#eceff1
comment, keyword.operator, punctuation, meta.brace#ccd7deitalic
meta.import variable, meta.export variable, meta.export.default, meta.definition.function, meta.object.member, entity.name.function, entity.name.type.class, variable.other.constant, source.ruby entity.other.inherited-class, support.constant.property-value, constant.other.color, meta.tag.attributes variable, variable.other.object, entity.name.function.ruby, source.ruby, entity.name.tag.dockerfile#031530
string#31c89d
storage.type, meta.function, source.ruby keyword.other.special-method, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, keyword.control.class.ruby, keyword.control.ruby, constant.language.json, entity.name.section.dockerfile#896ac3
keyword.operator.expression, support.class.component, entity.name.tag, source.ruby entity.name.type.class, support.type.property-name.json, meta.entry.toml#dc3568
meta.function-call, meta.function-call entity.name.function, keyword.control, support.function, constant.language.symbol.ruby, keyword.other.special-method, meta.table.toml#1dafd9
keyword.todo, support.variable.dom, support.class.console, support.function.console#fdbc40
constant.numeric, support.constant.math#2b3291
#f0652a
entity.name.tag.dockerfileitalic
Cloud City by Christian Naths - VS Code Theme