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#6BC7FF
  • activityBar.background#161b22
  • activityBar.foreground#FFF7F0
  • activityBar.inactiveForeground#6e7681
  • activityBarBadge.background#6BC7FF
  • 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#6BC7FF
  • panel.background#161b22
  • panel.border#6BC7FF
  • sideBar.background#161b22
  • sideBar.foreground#FFF7F0
  • sideBarSectionHeader.background#21262d
  • sideBarSectionHeader.foreground#6BC7FF
  • statusBar.background#161b22
  • statusBar.debuggingBackground#FFD700
  • statusBar.debuggingForeground#161b22
  • statusBar.foreground#FFF7F0
  • statusBar.noFolderBackground#161b22
  • tab.activeBackground#21262d
  • tab.activeBorder#6BC7FF
  • tab.activeForeground#6BC7FF
  • tab.border#21262d
  • tab.inactiveBackground#161b22
  • tab.inactiveForeground#6BC7FF
  • 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#6BC7FFitalic
keyword, keyword.control.go#FFD700bold
entity.name.function, entity.name.function.go#6BC7FFitalic
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#6BC7FFbold
entity.name.namespace.go#6BC7FFbold
entity.name.import.go, variable.other.package.go#6BC7FFbold
entity.name.import.path.go#FFD700bold underline
entity.name.type, entity.name.type.go#6BC7FFbold
source.go#FFF7F0
entity.name.tag.yaml#6BC7FFbold
entity.name.anchor.yaml#FFD700bold underline
entity.name.alias.yaml#6BC7FFbold
string.unquoted.plain.out.yaml#6BC7FF
string.quoted.double.yaml, string.quoted.single.yaml#FFD700
constant.numeric.yaml#FFD700
constant.language.boolean.yaml#6BC7FFbold
constant.language.null.yaml#6BC7FFitalic
comment.line.number-sign.yaml#6BC7FFitalic
support.type.property-name.json, meta.object-literal.key.js, meta.object-literal.key.ts, meta.object-literal.key.tsx#6BC7FFbold
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#6BC7FFbold
constant.language.null.json, constant.language.null.js, constant.language.null.ts, constant.language.null.tsx#6BC7FFitalic
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#6BC7FFitalic
punctuation.separator.key-value.json, punctuation.separator.key-value.js, punctuation.separator.key-value.ts, punctuation.separator.key-value.tsx#6BC7FF
punctuation.definition.block.js, punctuation.definition.block.ts, punctuation.definition.block.tsx#FFD700
keyword.control.makefile#FFD700bold
variable.assignment.makefile#6BC7FFbold
entity.name.function.target.makefile#6BC7FFbold underline
meta.scope.target.makefile#6BC7FFbold
string.quoted.double.makefile, string.quoted.single.makefile#FFD700
comment.line.number-sign.makefile#6BC7FFitalic
meta.scope.prerequisites.makefile#6BC7FF
keyword.control.terraform#6BC7FFbold
variable.other.terraform#FFF7F0
entity.name.function.terraform#6BC7FFitalic
entity.name.type.terraform#6BC7FFbold
string.quoted.double.terraform, string.quoted.single.terraform#A084CA
constant.numeric.terraform#FFD700
constant.language.boolean.terraform#6BC7FFbold
comment.line.number-sign.terraform#8b949eitalic
support.constant.terraform#FFD700bold
punctuation.definition.block.terraform#6BC7FF
support.function.builtin.terraform#6BC7FFbold italic
variable.other.readwrite.terraform#6BC7FFitalic

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