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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#FF4B4Bitalic
keyword, keyword.control.go#FFD700bold
entity.name.function, entity.name.function.go#FF4B4Bitalic
variable, variable.other.go#FFF7F0
string, string.quoted.double.go, string.quoted.single.go#FFD700
constant.numeric, constant.numeric.go#FFD700
storage.type, storage.type.go#FF4B4Bbold
entity.name.namespace.go#FF4B4Bbold
entity.name.import.go, variable.other.package.go#FF4B4Bbold
entity.name.import.path.go#FFD700bold underline
entity.name.type, entity.name.type.go#FF4B4Bbold
source.go#FFF7F0
entity.name.tag.yaml#FFD700bold
entity.name.anchor.yaml#FF4B4Bbold underline
entity.name.alias.yaml#FFD700bold
string.unquoted.plain.out.yaml#FF4B4B
string.quoted.double.yaml, string.quoted.single.yaml#FFD700
constant.numeric.yaml#FFD700
constant.language.boolean.yaml#FF4B4Bbold
constant.language.null.yaml#FF4B4Bitalic
comment.line.number-sign.yaml#FF4B4Bitalic
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#FF4B4B
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#FF4B4Bbold
constant.language.null.json, constant.language.null.js, constant.language.null.ts, constant.language.null.tsx#FF4B4Bitalic
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#FF4B4Bitalic
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#FF4B4B
keyword.control.makefile#FFD700bold
variable.assignment.makefile#FF4B4Bbold
entity.name.function.target.makefile#FFD700bold underline
string.quoted.double.makefile, string.quoted.single.makefile#FF4B4B
comment.line.number-sign.makefile#FF4B4Bitalic
meta.scope.target.makefile#FF4B4Bbold
meta.scope.prerequisites.makefile#FF4B4B
keyword.control.terraform#FF4B4Bbold
variable.other.terraform#FFF7F0
entity.name.function.terraform#FF4B4Bitalic
entity.name.type.terraform#FF4B4Bbold
string.quoted.double.terraform, string.quoted.single.terraform#FFD700
constant.numeric.terraform#FFD700
constant.language.boolean.terraform#FF4B4Bbold
comment.line.number-sign.terraform#8b949eitalic
support.constant.terraform#FFD700bold
punctuation.definition.block.terraform#FF4B4B
support.function.builtin.terraform#FF4B4Bbold italic
variable.other.readwrite.terraform#FF4B4Bitalic

Shiki preview

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

Loading...