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#3C3F41
  • activityBar.border#282828
  • activityBar.foreground#AFB1B3
  • activityBarBadge.background#4A88C7
  • activityBarBadge.foreground#FFFFFF
  • badge.background#4A88C7
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#CCCCCC
  • breadcrumb.focusForeground#A9B7C6
  • breadcrumb.foreground#808080
  • breadcrumbPicker.background#2B2B2B
  • button.background#4A88C7
  • button.foreground#FFFFFF
  • button.hoverBackground#5599D8
  • descriptionForeground#808080
  • dropdown.background#3C3F41
  • dropdown.border#555555
  • dropdown.foreground#A9B7C6
  • editor.background#2B2B2B
  • editor.findMatchBackground#7B5100
  • editor.findMatchHighlightBackground#4D3B00
  • editor.foreground#A9B7C6
  • editor.inactiveSelectionBackground#2A3A54
  • editor.lineHighlightBackground#323232
  • editor.rangeHighlightBackground#FFFFFF0B
  • editor.selectionBackground#214283
  • editor.selectionHighlightBackground#1D4165
  • editor.wordHighlightBackground#1D3A5E
  • editor.wordHighlightStrongBackground#1D4E89
  • editorBracketMatch.background#3B514D
  • editorBracketMatch.border#3B514D
  • editorCursor.foreground#BBBBBB
  • editorError.foreground#BC3F3C
  • editorGroupHeader.tabsBackground#3C3F41
  • editorGutter.addedBackground#384C38
  • editorGutter.background#313335
  • editorGutter.deletedBackground#4B1818
  • editorGutter.modifiedBackground#4A6F8A
  • editorHoverWidget.background#2B2B2B
  • editorHoverWidget.border#555555
  • editorIndentGuide.activeBackground#5C5C5C
  • editorIndentGuide.background#3B3B3B
  • editorInfo.foreground#628FB6
  • editorLineNumber.activeForeground#A4A3A3
  • editorLineNumber.foreground#606366
  • editorRuler.foreground#3B3B3B
  • editorSuggestWidget.background#2B2B2B
  • editorSuggestWidget.border#555555
  • editorSuggestWidget.foreground#A9B7C6
  • editorSuggestWidget.highlightForeground#589DF6
  • editorSuggestWidget.selectedBackground#3B4970
  • editorSuggestWidget.selectedForeground#FFFFFF
  • editorWarning.foreground#A08000
  • editorWhitespace.foreground#3B3B3B
  • errorForeground#F85149
  • focusBorder#4A88C7
  • foreground#A9B7C6
  • gitDecoration.addedResourceForeground#629755
  • gitDecoration.conflictingResourceForeground#C75450
  • gitDecoration.deletedResourceForeground#C75450
  • gitDecoration.ignoredResourceForeground#606366
  • gitDecoration.modifiedResourceForeground#6897BB
  • gitDecoration.untrackedResourceForeground#629755
  • input.background#45494A
  • input.border#646464
  • input.foreground#BBBBBB
  • input.placeholderForeground#808080
  • inputOption.activeBackground#4B6EAF
  • inputOption.activeBorder#4B6EAF
  • list.activeSelectionBackground#4B6EAF
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3B4252
  • list.highlightForeground#589DF6
  • list.hoverBackground#4B4F52
  • list.inactiveSelectionBackground#393D40
  • list.inactiveSelectionForeground#A9B7C6
  • notificationCenterHeader.background#3C3F41
  • notifications.background#3C3F41
  • notifications.border#555555
  • notifications.foreground#A9B7C6
  • panel.background#2B2B2B
  • panel.border#3C3F41
  • panelTitle.activeBorder#4A88C7
  • panelTitle.activeForeground#A9B7C6
  • panelTitle.inactiveForeground#777777
  • peekView.border#4A88C7
  • peekViewEditor.background#1F2430
  • peekViewEditorGutter.background#1F2430
  • peekViewResult.background#2B2B2B
  • peekViewResult.fileForeground#A9B7C6
  • peekViewResult.lineForeground#A9B7C6
  • peekViewResult.selectionBackground#3B4970
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#2B2B2B
  • peekViewTitleDescription.foreground#888888
  • peekViewTitleLabel.foreground#BBBBBB
  • progressBar.background#4A88C7
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#909294AA
  • scrollbarSlider.background#4E5254AA
  • scrollbarSlider.hoverBackground#646769AA
  • selection.background#214283
  • sideBar.background#3C3F41
  • sideBar.border#282828
  • sideBar.foreground#AFB1B3
  • sideBarSectionHeader.background#3C3F41
  • sideBarSectionHeader.border#282828
  • sideBarSectionHeader.foreground#919294
  • sideBarTitle.foreground#919294
  • statusBar.background#4E5254
  • statusBar.border#282828
  • statusBar.debuggingBackground#8A0000
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#909294
  • statusBar.noFolderBackground#4E5254
  • statusBarItem.activeBackground#5B6060
  • statusBarItem.hoverBackground#6B7070
  • symbolIcon.classForeground#FFFE8B
  • symbolIcon.enumForeground#FFC66D
  • symbolIcon.enumMemberForeground#6897BB
  • symbolIcon.fieldForeground#A9B7C6
  • symbolIcon.functionForeground#FFC66D
  • symbolIcon.interfaceForeground#9876AA
  • symbolIcon.keywordForeground#CC7832
  • symbolIcon.methodForeground#FFC66D
  • symbolIcon.variableForeground#A9B7C6
  • tab.activeBackground#2B2B2B
  • tab.activeBorder#4A88C7
  • tab.activeForeground#BBBBBB
  • tab.border#282828
  • tab.inactiveBackground#3C3F41
  • tab.inactiveForeground#888888
  • tab.unfocusedActiveBorder#555555
  • terminal.ansiBlack#3E3E3E
  • terminal.ansiBlue#5AA4F5
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#74B8FA
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#D6ACFF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#E6F3F8
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#BD93F9
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#BBD3E1
  • terminal.ansiYellow#F1FA8C
  • terminal.background#2B2B2B
  • terminal.foreground#A9B7C6
  • terminal.selectionBackground#214283
  • titleBar.activeBackground#3C3F41
  • titleBar.activeForeground#BBBBBB
  • titleBar.border#282828
  • titleBar.inactiveBackground#3C3F41
  • titleBar.inactiveForeground#777777
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.number-sign, comment.block, punctuation.definition.comment#808080italic
string.quoted.docstring, string.quoted.docstring.tauraro#629755italic
string, string.quoted, string.quoted.double, string.quoted.single, string.quoted.raw, string.quoted.bytes, string.interpolated, punctuation.definition.string#6A8759
punctuation.section.embedded, punctuation.section.embedded.begin, punctuation.section.embedded.end#CC7832bold
meta.embedded.expression, meta.embedded.expression.tauraro#A9B7C6
constant.character.escape#CC7832bold
keyword.control, keyword.control.tauraro, keyword.control.exception, keyword.control.import, keyword.control.async, keyword.control.extern#CC7832bold
keyword.declaration, keyword.declaration.tauraro, keyword.declaration.function, keyword.declaration.class, keyword.declaration.interface, keyword.declaration.enum, keyword.declaration.struct, keyword.declaration.extend#CC7832bold
keyword.operator.word, keyword.operator.word.tauraro#CC7832bold
keyword.other.hausa, keyword.other.hausa.tauraro#FF9A3Cbold italic
storage.modifier, storage.modifier.tauraro#4A9EFFbold
entity.name.type.class, entity.name.type.class.tauraro, entity.name.type.interface, entity.name.type.interface.tauraro, entity.name.type.enum, entity.name.type.enum.tauraro, entity.name.type.struct, entity.name.type.struct.tauraro, entity.name.type, entity.name.type.tauraro#FFFE8B
entity.name.function, entity.name.function.tauraro, entity.name.function.method, entity.name.function.method.tauraro#FFC66D
entity.name.function.call, entity.name.function.call.tauraro, meta.function-call entity.name.function#FFC66D
entity.name.function.decorator, entity.name.function.decorator.tauraro, punctuation.definition.decorator, punctuation.definition.decorator.tauraro#BBB529
entity.name.namespace, entity.name.namespace.tauraro#A9B7C6
support.type.builtin, support.type.builtin.tauraro, support.type#9876AA
support.type.exception, support.type.exception.tauraro#9876AAitalic
support.function.builtin, support.function.builtin.tauraro, support.function#6897BB
constant.language, constant.language.tauraro#6897BBbold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal, constant.numeric.scientific#6897BB
variable.language.this, variable.language.this.tauraro#94E2D5italic
keyword.operator.arrow, keyword.operator.arrow.tauraro#CC7832bold
keyword.operator.fat-arrow, keyword.operator.fat-arrow.tauraro#CC7832bold
keyword.operator.comparison, keyword.operator.comparison.tauraro#A9B7C6
keyword.operator.assignment, keyword.operator.assignment.tauraro, keyword.operator.assignment.compound#A9B7C6
keyword.operator.arithmetic, keyword.operator.arithmetic.tauraro#A9B7C6
keyword.operator.bitwise, keyword.operator.bitwise.tauraro#A9B7C6
keyword.operator.nullable, keyword.operator.nullable.tauraro#FFC66D
keyword.operator.colon, keyword.operator.colon.tauraro, punctuation.separator.colon#A9B7C6
punctuation.brackets, punctuation.definition.parameters, meta.brace.round, meta.brace.square, meta.brace.curly#A9B7C6
variable.parameter, variable.parameter.function#A9B7C6italic
variable, variable.other, variable.other.readwrite#A9B7C6
invalid, invalid.illegal#FF5555underline
markup.bold#BBBBBBbold
markup.italic#BBBBBBitalic
markup.heading, entity.name.section#FFC66Dbold
markup.inline.raw, markup.fenced_code.block#6A8759
markup.underline.link, string.other.link#6897BBunderline
Tauraro Language Support by Yusee Habibu - VS Code Theme