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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#A08CA0italic
keyword, keyword.control.go#DDA0DDbold
entity.name.function, entity.name.function.go#FF6FD8italic
variable, variable.other.go#FFF0FF
string, string.quoted.double.go, string.quoted.single.go#DDA0DD
constant.numeric, constant.numeric.go#FF6FD8
storage.type, storage.type.go#DDA0DDbold
entity.name.import.go, variable.other.package.go#A08CA0bold
entity.name.import.path.go#FF6FD8bold underline
entity.name.type, entity.name.type.go#FFD700bold
source.go#FFF0FF
entity.name.tag.yaml#FFD700bold
entity.name.anchor.yaml#A084CAbold underline
entity.name.alias.yaml#FFD700bold
string.unquoted.plain.out.yaml#3B4D9B
string.quoted.double.yaml, string.quoted.single.yaml#A084CA
constant.numeric.yaml#3B4D9B
constant.language.boolean.yaml#FFD700bold
constant.language.null.yaml#7C6BA0italic
comment.line.number-sign.yaml#7C6BA0italic
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#A084CA
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#7C6BA0italic
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#7C6BA0italic
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#A084CA
keyword.control.makefile#FFD700bold
variable.assignment.makefile#A084CAbold
entity.name.function.target.makefile#FFD700bold underline
string.quoted.double.makefile, string.quoted.single.makefile#A084CA
comment.line.number-sign.makefile#7C6BA0italic
meta.scope.target.makefile#FFD700bold
meta.scope.prerequisites.makefile#FFD700
keyword.control.terraform#DDA0DDbold
variable.other.terraform#FFF0FF
entity.name.function.terraform#FFD700italic
entity.name.type.terraform#FFD700bold
string.quoted.double.terraform, string.quoted.single.terraform#DDA0DD
constant.numeric.terraform#FF6FD8
constant.language.boolean.terraform#DDA0DDbold
comment.line.number-sign.terraform#8b949eitalic
support.constant.terraform#FFD700bold
punctuation.definition.block.terraform#FFD700
support.function.builtin.terraform#DDA0DDbold italic
variable.other.readwrite.terraform#DDA0DDitalic

Shiki preview

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

Loading...

Vscode Theme based on Dragon Ball by Felipe Rocha Correa - VS Code Theme