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#1f2430
  • activityBar.border#1f2430
  • activityBar.foreground#707a8ccc
  • activityBar.inactiveForeground#707a8c99
  • activityBarBadge.background#ffcc66
  • activityBarBadge.foreground#1f2430
  • badge.background#ffcc6633
  • badge.foreground#ffcc66
  • button.background#ffcc66
  • button.foreground#1f2430
  • button.hoverBackground#fac761
  • debugExceptionWidget.background#232834
  • debugExceptionWidget.border#191e2a
  • debugToolBar.background#232834
  • descriptionForeground#707a8c
  • diffEditor.insertedTextBackground#bae67e26
  • diffEditor.removedTextBackground#f29e7426
  • dropdown.background#232834
  • dropdown.border#434957
  • dropdown.foreground#707a8c
  • editor.background#0d1018
  • editor.findMatchBackground#ffcc660d
  • editor.findMatchBorder#ffcc66
  • editor.findMatchHighlightBackground#ffcc660d
  • editor.findMatchHighlightBorder#ffcc6659
  • editor.findRangeHighlightBackground#323a4c
  • editor.findRangeHighlightBorder#1f243000
  • editor.foreground#bbbbbb
  • editor.inactiveSelectionBackground#323a4c
  • editor.lineHighlightBackground#191e2a
  • editor.rangeHighlightBackground#191e2a
  • editor.selectionBackground#33415e
  • editor.selectionHighlightBackground#323a4c
  • editor.selectionHighlightBorder#323a4c
  • editor.wordHighlightBackground#77a8d912
  • editor.wordHighlightBorder#77a8d980
  • editor.wordHighlightStrongBackground#a6cc7012
  • editor.wordHighlightStrongBorder#a6cc7080
  • editorBracketMatch.background#707a8c4d
  • editorBracketMatch.border#707a8c99
  • editorCodeLens.foreground#5c6773
  • editorCursor.foreground#ffcc66
  • editorError.foreground#ff3333
  • editorGroup.background#232834
  • editorGroup.border#191e2a
  • editorGroupHeader.noTabsBackground#1f2430
  • editorGroupHeader.tabsBackground#1f2430
  • editorGroupHeader.tabsBorder#1f2430
  • editorGutter.addedBackground#a6cc7099
  • editorGutter.deletedBackground#f2798399
  • editorGutter.modifiedBackground#77a8d999
  • editorHoverWidget.background#232834
  • editorHoverWidget.border#101521
  • editorIndentGuide.activeBackground#707a8cb3
  • editorIndentGuide.background#707a8c4d
  • editorLineNumber.activeForeground#707a8ccc
  • editorLineNumber.foreground#707a8c66
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#232834
  • editorOverviewRuler.addedForeground#a6cc7099
  • editorOverviewRuler.border#191e2a
  • editorOverviewRuler.deletedForeground#f2798399
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#77a8d999
  • editorOverviewRuler.warningForeground#ffcc66
  • editorRuler.foreground#707a8c4d
  • editorSuggestWidget.background#232834
  • editorSuggestWidget.border#101521
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#191e2a
  • editorWarning.foreground#ffcc66
  • editorWhitespace.foreground#707a8c66
  • editorWidget.background#232834
  • errorForeground#ff3333
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#1f2430
  • extensionButton.prominentHoverBackground#fac761
  • focusBorder#596171
  • foreground#707a8c
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#f27983b3
  • gitDecoration.ignoredResourceForeground#525a69
  • gitDecoration.modifiedResourceForeground#77a8d9b3
  • gitDecoration.submoduleResourceForeground#d4bfffb3
  • gitDecoration.untrackedResourceForeground#a6cc70b3
  • icon.foreground#707a8c
  • input.background#1d222e
  • input.border#434957
  • input.foreground#bbbbbb
  • input.placeholderForeground#5f6878
  • inputOption.activeBorder#ffcc66
  • inputValidation.errorBackground#1f2430
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#1f2430
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#1f2430
  • inputValidation.warningBorder#ffd580
  • list.activeSelectionBackground#191e2a
  • list.activeSelectionForeground#707a8c
  • list.errorForeground#f27983
  • list.filterMatchBackground#ffcc660d
  • list.filterMatchBorder#ffcc66
  • list.focusBackground#191e2a
  • list.focusForeground#707a8c
  • list.highlightForeground#ffcc66
  • list.hoverBackground#191e2a
  • list.hoverForeground#707a8c
  • list.inactiveSelectionBackground#191e2a
  • list.inactiveSelectionForeground#707a8c
  • list.invalidItemForeground#5f6878
  • listFilterWidget.background#232834
  • listFilterWidget.noMatchesOutline#ff3333
  • listFilterWidget.outline#ffcc66
  • panel.background#1f2430
  • panel.border#191e2a
  • panelTitle.activeBorder#ffcc66
  • panelTitle.activeForeground#bbbbbb
  • panelTitle.inactiveForeground#707a8c
  • peekView.border#191e2a
  • peekViewEditor.background#232834
  • peekViewEditor.matchHighlightBackground#ffcc6633
  • peekViewResult.background#232834
  • peekViewResult.fileForeground#707a8c
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewTitle.background#232834
  • peekViewTitleDescription.foreground#707a8c
  • peekViewTitleLabel.foreground#707a8c
  • pickerGroup.border#191e2a
  • pickerGroup.foreground#525a69
  • progressBar.background#ffcc66
  • scrollbar.shadow#191e2a
  • scrollbarSlider.activeBackground#707a8cb3
  • scrollbarSlider.background#707a8c66
  • scrollbarSlider.hoverBackground#707a8c99
  • selection.background#33415efd
  • settings.headerForeground#bbbbbb
  • settings.modifiedItemIndicator#77a8d9
  • sideBar.background#1f2430
  • sideBar.border#1f2430
  • sideBarSectionHeader.background#1f2430
  • sideBarSectionHeader.border#1f2430
  • sideBarSectionHeader.foreground#707a8c
  • sideBarTitle.foreground#707a8c
  • statusBar.background#1f2430
  • statusBar.border#1f2430
  • statusBar.debuggingBackground#f29e74
  • statusBar.debuggingForeground#1f2430
  • statusBar.foreground#707a8c
  • statusBar.noFolderBackground#232834
  • statusBarItem.activeBackground#191e2a
  • statusBarItem.hoverBackground#191e2a
  • statusBarItem.prominentBackground#191e2a
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#1f2430
  • tab.activeBorder#ffcc66
  • tab.activeForeground#bbbbbb
  • tab.border#1f2430
  • tab.inactiveBackground#1f2430
  • tab.inactiveForeground#707a8c
  • tab.unfocusedActiveBorder#707a8c
  • tab.unfocusedActiveForeground#707a8c
  • tab.unfocusedInactiveForeground#707a8c
  • terminal.ansiBlack#191e2a
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#d4bfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd580
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#a6cc70
  • terminal.ansiMagenta#cfbafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#fad07b
  • terminal.background#1f2430
  • terminal.foreground#bbbbbb
  • textBlockQuote.background#232834
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#bbbbbb
  • titleBar.activeBackground#1f2430
  • titleBar.activeForeground#bbbbbb
  • titleBar.border#1f2430
  • titleBar.inactiveBackground#1f2430
  • titleBar.inactiveForeground#707a8c
  • tree.indentGuidesStroke#707a8cb3
  • walkThrough.embeddedEditorBackground#232834
  • widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#bbbbbb—
comment#5c6773italic
punctuation.definition.string, constant.other.symbol#5ccfe6—
string.regexp, constant.character, constant.other#43CC9E—
constant.numeric#ddd799—
entity.other.attribute-name.tag.pug#e6de90—
constant.language#d5d588—
variable#ea8650—
variable.other.property#895b8a—
variable.member#f28779—
variable.language#5ccfe6italic
storage#e67eba—
keyword.control#bca7ff—
keyword.control.at-rule#ffccc688—
keyword.other.unit#999—
entity.other.attribute-name.html, entity.other.attribute-name.astro, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, meta.attribute.unrecognized.loading.html entity.other.attribute-name.html, meta.attribute.unrecognized.aria-label.html entity.other.attribute-name.html, meta.attribute.unrecognized.frameborder.html entity.other.attribute-name.html, meta.attribute.unrecognized.scrolling.html entity.other.attribute-name.html#666—
keyword.other.important.scss, keyword.other.default.scss#5ccfe680—
keyword.operator#eeeeee—
punctuation.separator, punctuation.terminator, attribute_value#bbbbbbb3—
punctuation.section#bbbbbb—
punctuation.accessor#bbbbbb—
source.java storage.type, source.haskell storage.type, source.c storage.type#73d0ff—
entity.other.inherited-class#73d0ff—
storage.type.function#ad7d4c—
source.java storage.type.primitive#5ccfe6—
entity.name.function.scss#dddddd—
entity.name.function.js, entity.name.function.ts#cc99b7—
punctuation.definition.parameters#937a7d—
variable.parameter, meta.parameter#cc4977—
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffd580—
support.function, support.macro#ddd362—
entity.name.import, entity.name.package#bae67e—
entity.name#2ec7e6dd—
string.quoted.double.html, string.quoted.astro, string.quoted.tsx, string.quoted.jsx#ac7972—
entity.name.tag#2d9fb6—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#5ccfe680—
meta.attribute-selector, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, meta.attribute.class.html string.quoted.double.html, meta.attribute.class.astro string.quoted.astro, meta.attribute.class.tsx string.quoted.tsx, meta.attribute.class.jsx string.quoted.jsx#c6677a—
meta.attribute.src string.quoted.double, meta.attribute.src.html string.quoted.double.html, meta.attribute.srcset string.quoted.double, meta.attribute.srcset.html string.quoted.double.html, meta.attribute.alt string.quoted.double, meta.attribute.alt.html string.quoted.double.html, meta.attribute.src string.quoted.astro, meta.attribute.src.astro string.quoted.astro, meta.attribute.srcset string.quoted.astro, meta.attribute.srcset.astro string.quoted.astro, meta.attribute.alt string.quoted.astro, meta.attribute.alt.astro string.quoted.astro, meta.attribute.src string.quoted.tsx, meta.attribute.src.tsx string.quoted.tsx, meta.attribute.srcset string.quoted.tsx, meta.attribute.srcset.tsx string.quoted.tsx, meta.attribute.alt string.quoted.tsx, meta.attribute.alt.tsx string.quoted.tsx, meta.attribute.src string.quoted.jsx, meta.attribute.src.jsx string.quoted.jsx, meta.attribute.srcset string.quoted.jsx, meta.attribute.srcset.jsx string.quoted.jsx, meta.attribute.alt string.quoted.jsx, meta.attribute.alt.jsx string.quoted.jsx, meta.attribute.data-x.data-bg-sp string.quoted.double, meta.attribute.data-x.data-bg-sp.html string.quoted.double.html, meta.attribute.data-x.data-bg string.quoted.double, meta.attribute.data-x.data-bg.html string.quoted.double.html, meta.attribute.data-x.data-src.html string.quoted.double.html#ddd362cc—
meta.attribute.href.html string.quoted.double.html, meta.attribute.href.astro string.quoted.astro, meta.attribute.href.tsx string.quoted.tsx, meta.attribute.href.jsx string.quoted.jsx#eb9b6fee—
meta.attribute.unrecognized entity.other.attribute-name.html#dd3954—
entity.other.attribute-name.id, meta.attribute.id.html string.quoted.double.html, meta.attribute.id.astro string.quoted.astro, meta.attribute.id.tsx string.quoted.tsx, meta.attribute.id.jsx string.quoted.jsx#6592f9—
support.constant#ddd362normal
support.type, support.class, source.go storage.type#d0d0d0—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#ffe6b3—
invalid#ff3333—
meta.diff, meta.diff.header#c594c5—
source.ruby variable.other.readwrite#ff8a9a—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag, support.class.component.astro, support.class.component.tsx, support.class.component.jsx#5ccfe6—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5c6773—
support.type.property-name.css#DDDDDDnormal
support.type.property-name.json#DDDDDD—
meta.structure.dictionary.value.json punctuation.definition.dictionary.begin.json, meta.structure.dictionary.value.json punctuation.definition.dictionary.end.json, meta.structure.dictionary.value.json punctuation.definition.array.begin.json.comments, meta.structure.dictionary.value.json punctuation.definition.array.end.json.comments#BBBBBB—
meta.structure.dictionary.value.json string.quoted.double.json#AC7972—
support.type.property-name.json punctuation.support.type.property-name.begin.json, support.type.property-name.json punctuation.support.type.property-name.end.json#5CCFE6—
constant.numeric.line-number.find-in-files - match#5c6773—
constant.numeric.line-number.match#ffa759—
entity.name.filename.find-in-files#bae67e—
message.error#ff3333—
markup.heading, markup.heading entity.name#bae67ebold
markup.underline.link, string.other.link#5ccfe6—
markup.italic#f28779italic
markup.bold#f28779bold
markup.italic markup.bold, markup.bold markup.italic—bold italic
markup.raw——
markup.raw.inline——
meta.separator#5c6773bold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffd580—
markup.inserted#a6cc70—
markup.changed#7592c9—
markup.deleted#f27983—
markup.strike#ffe6b3—
markup.table#5ccfe6—
text.html.markdown markup.inline.raw#f29e74—
text.html.markdown meta.dummy.line-break#5c6773—
punctuation.definition.markdown#5c6773—
meta.attribute.style.html source.css, entity.other.attribute-name.placeholder#72CC82—
Mil Theme by milford - VS Code Theme