Skip to main content
CodingTheme

Color themes

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.activeBorder#FF2D2D
  • activityBar.background#161b22
  • activityBar.foreground#F2F2F2
  • activityBar.inactiveForeground#6e7681
  • activityBarBadge.background#FF2D2D
  • activityBarBadge.foreground#161b22
  • editor.background#0d1117
  • editor.foreground#F2F2F2
  • editor.lineHighlightBackground#161b22
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#3b3b3b60
  • editorCursor.foreground#FF2D2D
  • editorGroupHeader.tabsBackground#161b22
  • editorIndentGuide.activeBackground1#FF2D2D
  • editorIndentGuide.background1#21262d
  • editorLineNumber.activeForeground#FF2D2D
  • editorLineNumber.foreground#7C7C8C
  • panel.background#161b22
  • panel.border#FF2D2D
  • sideBar.background#161b22
  • sideBar.foreground#F2F2F2
  • sideBarSectionHeader.background#21262d
  • sideBarSectionHeader.foreground#FF2D2D
  • statusBar.background#161b22
  • statusBar.debuggingBackground#FF2D2D
  • statusBar.debuggingForeground#161b22
  • statusBar.foreground#F2F2F2
  • statusBar.noFolderBackground#161b22
  • tab.activeBackground#21262d
  • tab.activeBorder#FF2D2D
  • tab.activeForeground#FF2D2D
  • tab.border#21262d
  • tab.inactiveBackground#161b22
  • tab.inactiveForeground#7C7C8C
  • tab.unfocusedActiveBorder#FF2D2D99
  • titleBar.activeBackground#161b22
  • titleBar.activeForeground#F2F2F2
  • titleBar.inactiveBackground#0d1117
  • titleBar.inactiveForeground#6e7681

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#7C7C8Citalic
keyword, keyword.control.go#FF2D2Dbold
entity.name.function, entity.name.function.go#FF2D2Ditalic
variable, variable.other.go#F2F2F2
string, string.quoted.double.go, string.quoted.single.go#7C7C8C
constant.numeric, constant.numeric.go#FF2D2D
storage.type, storage.type.go#FF2D2Dbold
entity.name.import.go, variable.other.package.go#23232Abold
entity.name.import.path.go#FF2D2Dbold underline
source.go#F2F2F2
entity.name.tag.yaml#FFD700bold
entity.name.anchor.yaml#FFD700bold underline
entity.name.alias.yaml#FFD700bold
string.unquoted.plain.out.yaml#FFD700
string.quoted.double.yaml, string.quoted.single.yaml#FFD700
constant.numeric.yaml#FFD700
constant.language.boolean.yaml#FFD700bold
constant.language.null.yaml#FFD700italic
comment.line.number-sign.yaml#FFD700italic
support.type.property-name.json, meta.object-literal.key.js, meta.object-literal.key.ts, meta.object-literal.key.tsx#FFD700bold
string.value.json, string.quoted.double.js, string.quoted.single.js, string.quoted.double.ts, string.quoted.single.ts, string.quoted.double.tsx, string.quoted.single.tsx#FFD700
constant.numeric.json, constant.numeric.js, constant.numeric.ts, constant.numeric.tsx#FFD700
constant.language.boolean.json, constant.language.boolean.js, constant.language.boolean.ts, constant.language.boolean.tsx#FFD700bold
constant.language.null.json, constant.language.null.js, constant.language.null.ts, constant.language.null.tsx#FFD700italic
comment.line.double-slash.js, comment.line.double-slash.ts, comment.line.double-slash.tsx, comment.block.documentation.js, comment.block.documentation.ts, comment.block.documentation.tsx#FFD700italic
punctuation.separator.key-value.json, punctuation.separator.key-value.js, punctuation.separator.key-value.ts, punctuation.separator.key-value.tsx#FFD700
punctuation.definition.block.js, punctuation.definition.block.ts, punctuation.definition.block.tsx#FFD700
keyword.control.makefile#FFD700bold
variable.assignment.makefile#FFD700bold
entity.name.function.target.makefile#FFD700bold underline
string.quoted.double.makefile, string.quoted.single.makefile#FFD700
comment.line.number-sign.makefile#FFD700italic
meta.scope.target.makefile#FFD700bold
meta.scope.prerequisites.makefile#FFD700
entity.name.type, entity.name.type.go#FF2D2Dbold
keyword.control.terraform#FF2D2Dbold
variable.other.terraform#F2F2F2
entity.name.function.terraform#FF2D2Ditalic
entity.name.type.terraform#FF2D2Dbold
string.quoted.double.terraform, string.quoted.single.terraform#7C7C8C
constant.numeric.terraform#FF2D2D
constant.language.boolean.terraform#FF2D2Dbold
comment.line.number-sign.terraform#7C7C8Citalic
support.constant.terraform#FFD700bold
punctuation.definition.block.terraform#FF2D2D
support.function.builtin.terraform#FF2D2Dbold italic
variable.other.readwrite.terraform#FF2D2Ditalic

Shiki preview

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

Loading...