Skip to main content
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBorder #000000FF activityBar.background #FFFFFFFF activityBar.dropBorder #000000FF activityBar.foreground #000000FF activityBar.inactiveForeground #00000066 activityBarBadge.background #B3E0FFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle meta.embedded, source.groovy.embedded #9F9F9FFF — emphasis — italic strong — bold header #B3B3FFFF — comment #7DAC68FF —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Elias White Theme — Elias White Theme
activityBarBadge.foreground #000000FF
badge.background #D6D6D6FF
badge.foreground #000000FF
banner.background #AAD9F9FF
banner.foreground #000000FF
banner.iconForeground #77AAFFFF
breadcrumb.activeSelectionForeground #9B9B9BFF
breadcrumb.background #FFFFFFFF
breadcrumb.focusForeground #9B9B9BFF
breadcrumb.foreground #A1A1A1CC
breadcrumbPicker.background #FFFFFFFF
button.background #A3D5F7FF
button.foreground #000000FF
button.hoverBackground #9ED3F6FF
button.secondaryBackground #E1E4E7FF
button.secondaryForeground #000000FF
button.secondaryHoverBackground #D5D8DCFF
charts.blue #77AAFFFF
charts.foreground #A1A1A1FF
charts.green #23BE1AFF
charts.lines #A1A1A180
charts.orange #E9B72FFF
charts.purple #B059F4FF
charts.red #4CC700FF
charts.yellow #FFE333FF
checkbox.background #E5E5E5FF
checkbox.border #E5E5E5FF
checkbox.foreground #929292FF
debugConsole.errorForeground #4D00AEFF
debugConsole.infoForeground #77AAFFFF
debugConsole.sourceForeground #A1A1A1FF
debugConsole.warningForeground #FFE333FF
debugConsoleInputIcon.foreground #A1A1A1FF
debugExceptionWidget.background #E1BCF5FF
debugExceptionWidget.border #A3EA5CFF
debugIcon.breakpointCurrentStackframeForeground #FFD905FF
debugIcon.breakpointDisabledForeground #B5B5B5FF
debugIcon.breakpointForeground #D8FF1BFF
debugIcon.breakpointStackframeForeground #23BE1AFF
debugIcon.breakpointUnverifiedForeground #B5B5B5FF
debugIcon.continueForeground #76A2FFFF
debugIcon.disconnectForeground #4D00AEFF
debugIcon.pauseForeground #76A2FFFF
debugIcon.restartForeground #23BE1AFF
debugIcon.startForeground #23BE1AFF
debugIcon.stepBackForeground #76A2FFFF
debugIcon.stepIntoForeground #76A2FFFF
debugIcon.stepOutForeground #76A2FFFF
debugIcon.stepOverForeground #76A2FFFF
debugIcon.stopForeground #4D00AEFF
debugTokenExpression.boolean #69AAE0FF
debugTokenExpression.error #4D00AEFF
debugTokenExpression.name #C63ABEFF
debugTokenExpression.number #5AAF2EFF
debugTokenExpression.string #2A21BDFF
debugTokenExpression.value #A1A1A199
debugToolBar.background #EFEFEFFF
debugView.exceptionLabelBackground #C699E2FF
debugView.exceptionLabelForeground #A1A1A1FF
debugView.stateLabelBackground #B4B4B444
debugView.stateLabelForeground #A1A1A1FF
debugView.valueChangedHighlight #64AEECFF
descriptionForeground #A1A1A1B3
diffEditor.diagonalFill #A1A1A133
diffEditor.insertedTextBackground #B546A933
diffEditor.removedTextBackground #82FF0533
dropdown.background #E5E5E5FF
dropdown.border #E5E5E5FF
dropdown.foreground #929292FF
editor.background #FFFFFFFF
editor.findMatchBackground #FFC30555
editor.findMatchBorder #FFF505FF
editor.findMatchHighlightBackground #FFC30555
editor.findMatchHighlightBorder #FFF505FF
editor.findRangeHighlightBackground #E1E4E766
editor.focusedStackFrameHighlightBackground #41B0414D
editor.foldBackground #B3E0FF4D
editor.foreground #9F9F9FFF
editor.hoverHighlightBackground #93B8DE40
editor.inactiveSelectionBackground #E1E4E7FF
editor.inlineValuesBackground #FFD70533
editor.inlineValuesForeground #00000080
editor.lineHighlightBorder #FDFDFDFF
editor.linkedEditingBackground #82FF054D
editor.rangeHighlightBackground #0000000B
editor.selectionBackground #B3E0FFFF
editor.selectionHighlightBackground #7B92FF26
editor.selectionHighlightBorder #FFF505FF
editor.snippetFinalTabstopHighlightBorder #D2D2D2FF
editor.snippetTabstopHighlightBackground #B9B9B94D
editor.stackFrameHighlightBackground #FBFF0533
editor.symbolHighlightBackground #FFC30555
editor.wordHighlightBackground #CECECEB8
editor.wordHighlightStrongBackground #B3E3FFB8
editorActiveLineNumber.foreground #A2A2A2FF
editorBracketHighlight.foreground1 #FFE205FF
editorBracketHighlight.foreground2 #F524F2FF
editorBracketHighlight.foreground3 #8BCCFFFF
editorBracketHighlight.foreground4 #FFFFFF00
editorBracketHighlight.foreground5 #FFFFFF00
editorBracketHighlight.foreground6 #FFFFFF00
editorBracketHighlight.unexpectedBracket.foreground #6DED00CC
editorBracketMatch.background #9BFF9B1A
editorBracketMatch.border #B4B4B4FF
editorBracketPairGuide.activeBackground1 #FFFFFF00
editorBracketPairGuide.activeBackground2 #FFFFFF00
editorBracketPairGuide.activeBackground3 #FFFFFF00
editorBracketPairGuide.activeBackground4 #FFFFFF00
editorBracketPairGuide.activeBackground5 #FFFFFF00
editorBracketPairGuide.activeBackground6 #FFFFFF00
editorBracketPairGuide.background1 #FFFFFF00
editorBracketPairGuide.background2 #FFFFFF00
editorBracketPairGuide.background3 #FFFFFF00
editorBracketPairGuide.background4 #FFFFFF00
editorBracketPairGuide.background5 #FFFFFF00
editorBracketPairGuide.background6 #FFFFFF00
editorCodeLens.foreground #AEAEAEFF
editorCursor.foreground #A7A9A5FF
editorError.foreground #4CC700FF
editorGhostText.foreground #00000056
editorGroup.border #FFFFFFFF
editorGroup.dropBackground #FFFFFFFF
editorGroup.emptyBackground #FFFFFFFF
editorGroupHeader.noTabsBackground #FFFFFFFF
editorGroupHeader.tabsBackground #FFFFFFFF
editorGroupHeader.tabsBorder #FFFFFFFF
editorGutter.addedBackground #CFF482FF
editorGutter.background #FFFFFFFF
editorGutter.commentRangeForeground #A3A3A3FF
editorGutter.deletedBackground #D79CF1FF
editorGutter.foldingControlForeground #A3A3A3FF
editorGutter.modifiedBackground #A5E6F8FF
editorHint.foreground #949494B3
editorHoverWidget.background #FFFFFFFF
editorHoverWidget.border #DDDDDDFF
editorHoverWidget.foreground #A1A1A1FF
editorHoverWidget.highlightForeground #8ACDFFFF
editorHoverWidget.statusBarBackground #F7F7F8FF
editorIndentGuide.activeBackground #BFBFBFFF
editorIndentGuide.background #E1E1E1FF
editorInfo.foreground #77AAFFFF
editorInlayHint.background #D6D6D699
editorInlayHint.foreground #000000CC
editorInlayHint.parameterBackground #D6D6D699
editorInlayHint.parameterForeground #000000CC
editorInlayHint.typeBackground #D6D6D699
editorInlayHint.typeForeground #000000CC
editorLightBulb.foreground #FFD905FF
editorLightBulbAutoFix.foreground #76A2FFFF
editorLineNumber.activeForeground #A2A2A2FF
editorLineNumber.foreground #B5B5B5FF
editorLink.activeForeground #69AAE0FF
editorMarkerNavigation.background #FFFFFFFF
editorMarkerNavigationError.background #4CC700FF
editorMarkerNavigationError.headerBackground #4CC7001A
editorMarkerNavigationInfo.background #77AAFFFF
editorMarkerNavigationInfo.headerBackground #77AAFF1A
editorMarkerNavigationWarning.background #FFE333FF
editorMarkerNavigationWarning.headerBackground #FFE3331A
editorOverviewRuler.addedForeground #CFF48299
editorOverviewRuler.border #B8B8B84D
editorOverviewRuler.bracketMatchForeground #ACACACFF
editorOverviewRuler.commonContentForeground #C8C8C866
editorOverviewRuler.currentContentForeground #6AD5C180
editorOverviewRuler.deletedForeground #D79CF199
editorOverviewRuler.errorForeground #6DED00B3
editorOverviewRuler.findMatchForeground #E9B72F7E
editorOverviewRuler.incomingContentForeground #73AFFF80
editorOverviewRuler.infoForeground #77AAFFFF
editorOverviewRuler.modifiedForeground #A5E6F899
editorOverviewRuler.rangeHighlightForeground #B3E0FF99
editorOverviewRuler.selectionHighlightForeground #ACACACCC
editorOverviewRuler.warningForeground #FFE333FF
editorOverviewRuler.wordHighlightForeground #ACACACCC
editorOverviewRuler.wordHighlightStrongForeground #AC51AECC
editorPane.background #FFFFFFFF
editorRuler.foreground #FFFFFFFF
editorSuggestWidget.background #FFFFFFFF
editorSuggestWidget.border #DDDDDDFF
editorSuggestWidget.focusHighlightForeground #8ACDFFFF
editorSuggestWidget.foreground #9F9F9FFF
editorSuggestWidget.highlightForeground #8ACDFFFF
editorSuggestWidget.selectedBackground #AAD9F9FF
editorSuggestWidget.selectedForeground #000000FF
editorSuggestWidget.selectedIconForeground #000000FF
editorSuggestWidgetStatus.foreground #9F9F9F80
editorUnicodeHighlight.border #FCE242FF
editorUnnecessaryCode.opacity #FFFFFFAA
editorWarning.foreground #FFE333FF
editorWhitespace.foreground #FFFFFFFF
editorWidget.background #FFFFFFFF
editorWidget.border #DDDDDDFF
editorWidget.foreground #A1A1A1FF
errorForeground #4D00AEFF
extensionBadge.remoteBackground #FFFFFFFF
extensionBadge.remoteForeground #000000FF
extensionButton.prominentBackground #A3D5F7FF
extensionButton.prominentForeground #000000FF
extensionButton.prominentHoverBackground #9ED3F6FF
extensionIcon.preReleaseForeground #82E7CAFF
extensionIcon.starForeground #FFB805FF
extensionIcon.verifiedForeground #77AAFFFF
focusBorder #B3E0FFFF
foreground #A1A1A1FF
gitDecoration.addedResourceForeground #4BAA5CFF
gitDecoration.conflictingResourceForeground #C260FFFF
gitDecoration.deletedResourceForeground #C5C63BFF
gitDecoration.ignoredResourceForeground #B2B2B2FF
gitDecoration.modifiedResourceForeground #0014C4FF
gitDecoration.renamedResourceForeground #2ABA5CFF
gitDecoration.stageDeletedResourceForeground #C5C63BFF
gitDecoration.stageModifiedResourceForeground #0014C4FF
gitDecoration.submoduleResourceForeground #5CA9FFFF
gitDecoration.untrackedResourceForeground #2ABA5CFF
icon.foreground #A3A3A3FF
input.background #E5E5E5FF
input.foreground #A1A1A1FF
input.placeholderForeground #AAAAAAFF
inputOption.activeBackground #B3E0FF66
inputOption.activeBorder #B3E0FF00
inputOption.activeForeground #000000FF
inputOption.hoverBackground #C8CBCC80
inputValidation.errorBackground #C3E3A4FF
inputValidation.errorBorder #E0FF41FF
inputValidation.infoBackground #B5EBFAFF
inputValidation.infoBorder #B3E0FFFF
inputValidation.warningBackground #FBF2C9FF
inputValidation.warningBorder #FFE547FF
interactive.activeCodeBorder #77AAFFFF
interactive.inactiveCodeBorder #E5E5EBFF
keybindingLabel.background #B7B7B72B
keybindingLabel.border #EFEFEF99
keybindingLabel.bottomBorder #DEDEDE99
keybindingLabel.foreground #A1A1A1FF
keybindingTable.headerBackground #A1A1A10A
keybindingTable.rowsBackground #A1A1A10A
list.activeSelectionBackground #AAD9F9FF
list.activeSelectionForeground #000000FF
list.activeSelectionIconForeground #000000FF
list.deemphasizedForeground #B2B2B2FF
list.dropBackground #E5E7E9FF
list.errorForeground #9000ADFF
list.filterMatchBackground #FFC30555
list.filterMatchBorder #FFF505FF
list.focusHighlightForeground #8ACDFFFF
list.focusOutline #B3E0FFFF
list.highlightForeground #8ACDFFFF
list.hoverBackground #F7F8F9FF
list.inactiveSelectionBackground #E5E5EBFF
list.invalidItemForeground #FFE547FF
list.warningForeground #FFE333FF
listFilterWidget.background #DDCD99FF
listFilterWidget.noMatchesOutline #E0FF41FF
listFilterWidget.outline #FFFFFF00
menu.background #FFFFFFFF
menu.foreground #A1A1A1FF
menu.selectionBackground #AAD9F9FF
menu.selectionForeground #000000FF
menu.separatorBackground #A5A5A5FF
menubar.selectionBackground #0000001A
menubar.selectionForeground #A1A1A1FF
merge.commonContentBackground #C8C8C829
merge.commonHeaderBackground #C8C8C866
merge.currentContentBackground #6AD5C133
merge.currentHeaderBackground #6AD5C180
merge.incomingContentBackground #73AFFF33
merge.incomingHeaderBackground #73AFFF80
minimap.errorHighlight #6DED00B3
minimap.findMatchHighlight #E9B72FFF
minimap.foregroundOpacity #FFFFFFFF
minimap.selectionHighlight #93B8DEFF
minimap.selectionOccurrenceHighlight #C4C4C4FF
minimap.warningHighlight #FFE333FF
minimapGutter.addedBackground #CFF482FF
minimapGutter.deletedBackground #D79CF1FF
minimapGutter.modifiedBackground #A5E6F8FF
minimapSlider.activeBackground #00000022
minimapSlider.background #00000011
minimapSlider.hoverBackground #0000001A
notebook.cellBorderColor #E5E5EBFF
notebook.cellEditorBackground #FFFFFFFF
notebook.cellInsertionIndicator #B3E0FFFF
notebook.cellStatusBarItemHoverBackground #00000026
notebook.cellToolbarSeparator #B7B7B759
notebook.focusedCellBorder #B3E0FFFF
notebook.focusedEditorBorder #B3E0FFFF
notebook.inactiveFocusedCellBorder #E5E5EBFF
notebook.selectedCellBackground #E5E5EBFF
notebook.selectedCellBorder #E5E5EBFF
notebook.symbolHighlightBackground #0000000B
notebookScrollbarSlider.activeBackground #00000044
notebookScrollbarSlider.background #00000022
notebookScrollbarSlider.hoverBackground #00000033
notebookStatusErrorIcon.foreground #4D00AEFF
notebookStatusRunningIcon.foreground #A1A1A1FF
notebookStatusSuccessIcon.foreground #23BE1AFF
notificationCenterHeader.background #F2F2F3FF
notificationLink.foreground #77AAFFFF
notifications.background #FFFFFFFF
notifications.border #F2F2F3FF
notifications.foreground #A1A1A1FF
notificationsErrorIcon.foreground #4CC700FF
notificationsInfoIcon.foreground #77AAFFFF
notificationsWarningIcon.foreground #FFE333FF
panel.background #FFFFFFFF
panel.border #B7B7B759
panel.dropBorder #989898FF
panelSection.border #B7B7B759
panelSection.dropBackground #FFFFFFFF
panelSectionHeader.background #B7B7B733
panelTitle.activeBorder #989898FF
panelTitle.activeForeground #989898FF
panelTitle.inactiveForeground #98989899
peekView.border #77AAFFFF
peekViewEditor.background #CCEBFFFF
peekViewEditor.matchHighlightBackground #FFB80599
peekViewEditorGutter.background #CCEBFFFF
peekViewResult.background #FFFFFFFF
peekViewResult.fileForeground #000000FF
peekViewResult.lineForeground #A5A5A5FF
peekViewResult.matchHighlightBackground #FFBC174D
peekViewResult.selectionBackground #75AFFF33
peekViewResult.selectionForeground #000000FF
peekViewTitle.background #77AAFF1A
peekViewTitleDescription.foreground #A1A1A1B3
peekViewTitleLabel.foreground #000000FF
pickerGroup.border #DCDCE3FF
pickerGroup.foreground #77AAFFFF
ports.iconRunningProcessForeground #6FCD6BFF
problemsErrorIcon.foreground #4CC700FF
problemsInfoIcon.foreground #77AAFFFF
problemsWarningIcon.foreground #FFE333FF
progressBar.background #A1D1F8FF
quickInput.background #FFFFFFFF
quickInput.foreground #A1A1A1FF
quickInputList.focusBackground #AAD9F9FF
quickInputList.focusForeground #000000FF
quickInputList.focusIconForeground #000000FF
quickInputTitle.background #0000001B
sash.hoverBorder #B3E0FFFF
scm.providerBorder #DDDDDDFF
scrollbar.shadow #FFFFFFFF
scrollbarSlider.activeBackground #00000044
scrollbarSlider.background #00000022
scrollbarSlider.hoverBackground #00000033
searchEditor.findMatchBackground #FFC30538
searchEditor.findMatchBorder #FFF505A8
settings.checkboxBackground #E5E5E5FF
settings.checkboxBorder #E5E5E5FF
settings.checkboxForeground #929292FF
settings.dropdownBackground #E5E5E5FF
settings.dropdownBorder #E5E5E5FF
settings.dropdownForeground #929292FF
settings.dropdownListBorder #DDDDDDFF
settings.focusedRowBackground #F7F8F999
settings.focusedRowBorder #0000001F
settings.headerBorder #B7B7B759
settings.headerForeground #989898FF
settings.modifiedItemIndicator #A5E6F8FF
settings.numberInputBackground #E5E5E5FF
settings.numberInputForeground #A1A1A1FF
settings.rowHoverBackground #F7F8F94D
settings.sashBorder #B7B7B759
settings.textInputBackground #E5E5E5FF
settings.textInputForeground #A1A1A1FF
sideBar.background #FFFFFFFF
sideBar.border #FFFFFFFF
sideBar.dropBackground #FFFFFFFF
sideBar.foreground #9F9F9FFF
sideBarSectionHeader.background #FFFFFF00
sideBarSectionHeader.border #A1A1A133
sideBarSectionHeader.foreground #9F9F9FFF
sideBarTitle.foreground #A5A5A5FF
sideBySideEditor.horizontalBorder #FFFFFFFF
sideBySideEditor.verticalBorder #FFFFFFFF
statusBar.background #FFFFFFFF
statusBar.debuggingBackground #CCA637FF
statusBar.debuggingForeground #A1A1A1FF
statusBar.focusBorder #A1A1A1FF
statusBar.foreground #A1A1A1FF
statusBar.noFolderBackground #FFFFFFFF
statusBar.noFolderForeground #A1A1A1FF
statusBarItem.activeBackground #0000002E
statusBarItem.compactHoverBackground #00000033
statusBarItem.errorBackground #F0E938FF
statusBarItem.errorForeground #000000FF
statusBarItem.focusBorder #A1A1A1FF
statusBarItem.hoverBackground #0000001F
statusBarItem.prominentBackground #FFFFFF80
statusBarItem.prominentForeground #A1A1A1FF
statusBarItem.prominentHoverBackground #FFFFFF4D
statusBarItem.remoteBackground #80EAC6FF
statusBarItem.remoteForeground #000000FF
statusBarItem.warningBackground #FFEE85FF
statusBarItem.warningForeground #000000FF
symbolIcon.arrayForeground #A1A1A1FF
symbolIcon.booleanForeground #A1A1A1FF
symbolIcon.classForeground #0611E2FF
symbolIcon.colorForeground #A1A1A1FF
symbolIcon.constantForeground #A1A1A1FF
symbolIcon.constructorForeground #B059F4FF
symbolIcon.enumeratorForeground #0611E2FF
symbolIcon.enumeratorMemberForeground #76A2FFFF
symbolIcon.eventForeground #0611E2FF
symbolIcon.fieldForeground #76A2FFFF
symbolIcon.fileForeground #A1A1A1FF
symbolIcon.folderForeground #A1A1A1FF
symbolIcon.functionForeground #B059F4FF
symbolIcon.interfaceForeground #76A2FFFF
symbolIcon.keyForeground #A1A1A1FF
symbolIcon.keywordForeground #A1A1A1FF
symbolIcon.methodForeground #B059F4FF
symbolIcon.moduleForeground #A1A1A1FF
symbolIcon.namespaceForeground #A1A1A1FF
symbolIcon.nullForeground #A1A1A1FF
symbolIcon.numberForeground #A1A1A1FF
symbolIcon.objectForeground #A1A1A1FF
symbolIcon.operatorForeground #A1A1A1FF
symbolIcon.packageForeground #A1A1A1FF
symbolIcon.propertyForeground #A1A1A1FF
symbolIcon.referenceForeground #A1A1A1FF
symbolIcon.snippetForeground #A1A1A1FF
symbolIcon.stringForeground #A1A1A1FF
symbolIcon.structForeground #A1A1A1FF
symbolIcon.textForeground #A1A1A1FF
symbolIcon.typeParameterForeground #A1A1A1FF
symbolIcon.unitForeground #A1A1A1FF
symbolIcon.variableForeground #76A2FFFF
tab.activeBackground #FFFFFFFF
tab.activeBorder #FFFFFFFF
tab.activeForeground #000000FF
tab.activeModifiedBorder #7DBEDEFF
tab.border #FFFFFFFF
tab.inactiveBackground #FFFFFFFF
tab.inactiveForeground #ADADADFF
tab.inactiveModifiedBorder #7DBEDE80
tab.lastPinnedBorder #A1A1A133
tab.unfocusedActiveBackground #FFFFFFFF
tab.unfocusedActiveBorder #FFFFFFFF
tab.unfocusedActiveForeground #000000FF
tab.unfocusedActiveModifiedBorder #7DBEDE80
tab.unfocusedInactiveBackground #FFFFFFFF
tab.unfocusedInactiveForeground #ADADADFF
tab.unfocusedInactiveModifiedBorder #7DBEDE40
terminal.ansiBlack #FFFFFFFF
terminal.ansiBlue #8AB8EAFF
terminal.ansiBrightBlack #C4C4C4FF
terminal.ansiBrightBlue #68AFFEFF
terminal.ansiBrightCyan #82D5E9FF
terminal.ansiBrightGreen #50E1A7FF
terminal.ansiBrightMagenta #EA34EDFF
terminal.ansiBrightRed #4CC700FF
terminal.ansiBrightWhite #999999FF
terminal.ansiBrightYellow #6F00C6FF
terminal.ansiCyan #9EE5F7FF
terminal.ansiGreen #66F5BEFF
terminal.ansiMagenta #C75FC8FF
terminal.ansiRed #82CE36FF
terminal.ansiWhite #999999FF
terminal.ansiYellow #EBEF1DFF
terminal.border #B7B7B759
terminal.dropBackground #FFFFFFFF
terminal.foreground #A1A1A1FF
terminal.selectionBackground #00000040
terminal.tab.activeBorder #FFFFFFFF
terminalCommandDecoration.defaultBackground #00000040
terminalCommandDecoration.errorBackground #D79CF1FF
terminalCommandDecoration.successBackground #A5E6F8FF
testing.iconErrored #4CC700FF
testing.iconFailed #4CC700FF
testing.iconPassed #2ABA5CFF
testing.iconQueued #FFE333FF
testing.iconSkipped #B5B5B5FF
testing.iconUnset #B5B5B5FF
testing.message.error.decorationForeground #4CC700FF
testing.message.error.lineBackground #82FF0533
testing.message.info.decorationForeground #9F9F9F80
testing.peekBorder #4CC700FF
testing.peekHeaderBackground #4CC7001A
testing.runAction #2ABA5CFF
textBlockQuote.background #B8B8B81A
textBlockQuote.border #B3E0FF80
textCodeBlock.background #FFFFFF66
textLink.activeForeground #77AAFFFF
textLink.foreground #77AAFFFF
textPreformat.foreground #130DC5FF
textSeparator.foreground #0000002E
titleBar.activeBackground #FFFFFFFF
titleBar.activeForeground #A1A1A1FF
titleBar.border #FFFFFFFF
titleBar.inactiveBackground #FFFFFFFF
titleBar.inactiveForeground #A1A1A1FF
toolbar.activeBackground #C3C5C650
toolbar.hoverBackground #C8CBCC50
tree.indentGuidesStroke #CDCDCDFF
tree.tableColumnsBorder #A1A1A120
tree.tableOddRowsBackground #A1A1A10A
welcomePage.progress.background #E5E5E5FF
welcomePage.progress.foreground #77AAFFFF
welcomePage.tileBackground #FFFFFFFF
welcomePage.tileHoverBackground #F7F7F8FF
welcomePage.tileShadow #FFFFFF5C
widget.shadow #FFFFFF5C constant.language #64AEECFF —
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #5AAF2EFF —
constant.regexp #7375A5FF —
entity.name.tag #64AEECFF —
entity.name.tag.css #130DC5FF —
entity.other.attribute-name #589DFFFF —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss #130DC5FF —
markup.underline — underline
markup.heading #64AEECFF bold
markup.inserted #5AAF2EFF —
punctuation.definition.quote.begin.markdown #7DAC68FF —
punctuation.definition.list.begin.markdown #6699FFFF —
markup.inline.raw #2A21BDFF —
punctuation.definition.tag #B7B7B7FF —
meta.preprocessor, entity.name.function.preprocessor #64AEECFF —
meta.preprocessor.string #2A21BDFF —
meta.preprocessor.numeric #5AAF2EFF —
meta.structure.dictionary.key.python #589DFFFF —
meta.diff.header #64AEECFF —
storage.modifier, keyword.operator.noexcept #64AEECFF —
string, meta.embedded.assembly #2A21BDFF —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #64AEECFF —
meta.template.expression #9F9F9FFF —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #589DFFFF —
keyword.control #64AEECFF —
keyword.operator #9F9F9FFF —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #64AEECFF —
keyword.other.unit #5AAF2EFF —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #64AEECFF —
support.function.git-rebase #589DFFFF —
constant.sha.git-rebase #5AAF2EFF —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #9F9F9FFF —
variable.language #64AEECFF —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #6902C3FF —
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #63D7C0FF —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #63D7C0FF —
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #C63ABEFF —
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder #589DFFFF —
variable.other.constant, variable.other.enummember #65B8FFFF —
meta.object-literal.key #589DFFFF —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #2A21BDFF —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #2A21BDFF —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #6FC11DFF —
keyword.operator.or.regexp, keyword.control.anchor.regexp #6902C3FF —
keyword.operator.quantifier.regexp #130DC5FF —
constant.character #64AEECFF —
constant.character.escape #130DC5FF —
entity.name.label #A2A2A2FF —
token.info-token #6699FFFF —
token.warn-token #CEA936FF —
token.error-token #48C600FF —
token.debug-token #B962FFFF —
meta.embedded, source.groovy.embedded #9F9F9FFF —
constant.language #64AEECFF —
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #5AAF2EFF —
constant.regexp #7375A5FF —
entity.name.tag #64AEECFF —
entity.name.tag.css #130DC5FF —
entity.other.attribute-name #589DFFFF —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss #130DC5FF —
markup.underline — underline
markup.heading #64AEECFF bold
markup.inserted #5AAF2EFF —
punctuation.definition.quote.begin.markdown #7DAC68FF —
punctuation.definition.list.begin.markdown #6699FFFF —
markup.inline.raw #2A21BDFF —
punctuation.definition.tag #B7B7B7FF —
meta.preprocessor, entity.name.function.preprocessor #64AEECFF —
meta.preprocessor.string #2A21BDFF —
meta.preprocessor.numeric #5AAF2EFF —
meta.structure.dictionary.key.python #589DFFFF —
meta.diff.header #64AEECFF —
storage.modifier, keyword.operator.noexcept #64AEECFF —
string, meta.embedded.assembly #2A21BDFF —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #64AEECFF —
meta.template.expression #9F9F9FFF —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #589DFFFF —
keyword.control #64AEECFF —
keyword.operator #9F9F9FFF —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #64AEECFF —
keyword.other.unit #5AAF2EFF —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #64AEECFF —
support.function.git-rebase #589DFFFF —
constant.sha.git-rebase #5AAF2EFF —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #9F9F9FFF —
variable.language #64AEECFF —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #6902C3FF —
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #63D7C0FF —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #63D7C0FF —
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #C63ABEFF —
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder #589DFFFF —
variable.other.constant, variable.other.enummember #65B8FFFF —
meta.object-literal.key #589DFFFF —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #2A21BDFF —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #2A21BDFF —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #6FC11DFF —
keyword.operator.or.regexp, keyword.control.anchor.regexp #6902C3FF —
keyword.operator.quantifier.regexp #130DC5FF —
constant.character #64AEECFF —
constant.character.escape #130DC5FF —
entity.name.label #A2A2A2FF —
token.info-token #6699FFFF —
token.warn-token #CEA936FF —
token.error-token #48C600FF —
token.debug-token #B962FFFF —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #6902C3FF —
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #63D7C0FF —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #63D7C0FF —
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #C63ABEFF —
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder #589DFFFF —
variable.other.constant, variable.other.enummember #65B8FFFF —
meta.object-literal.key #589DFFFF —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #2A21BDFF —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #2A21BDFF —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #6FC11DFF —
keyword.operator.or.regexp, keyword.control.anchor.regexp #6902C3FF —
keyword.operator.quantifier.regexp #130DC5FF —
constant.character #64AEECFF —
constant.character.escape #130DC5FF —
entity.name.label #A2A2A2FF —
meta.embedded, source.groovy.embedded #9F9F9FFF —
constant.language #64AEECFF —
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #5AAF2EFF —
constant.regexp #7375A5FF —
entity.name.tag #64AEECFF —
entity.name.tag.css #130DC5FF —
entity.other.attribute-name #589DFFFF —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss #130DC5FF —
markup.underline — underline
markup.heading #64AEECFF bold
markup.inserted #5AAF2EFF —
punctuation.definition.quote.begin.markdown #7DAC68FF —
punctuation.definition.list.begin.markdown #6699FFFF —
markup.inline.raw #2A21BDFF —
punctuation.definition.tag #B7B7B7FF —
meta.preprocessor, entity.name.function.preprocessor #64AEECFF —
meta.preprocessor.string #2A21BDFF —
meta.preprocessor.numeric #5AAF2EFF —
meta.structure.dictionary.key.python #589DFFFF —
meta.diff.header #64AEECFF —
storage.modifier, keyword.operator.noexcept #64AEECFF —
string, meta.embedded.assembly #2A21BDFF —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #64AEECFF —
meta.template.expression #9F9F9FFF —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #589DFFFF —
keyword.control #64AEECFF —
keyword.operator #9F9F9FFF —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #64AEECFF —
keyword.other.unit #5AAF2EFF —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #64AEECFF —
support.function.git-rebase #589DFFFF —
constant.sha.git-rebase #5AAF2EFF —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #9F9F9FFF —
variable.language #64AEECFF —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #6902C3FF —
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #63D7C0FF —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #63D7C0FF —
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #C63ABEFF —
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder #589DFFFF —
variable.other.constant, variable.other.enummember #65B8FFFF —
meta.object-literal.key #589DFFFF —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #2A21BDFF —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #2A21BDFF —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #6FC11DFF —
keyword.operator.or.regexp, keyword.control.anchor.regexp #6902C3FF —
keyword.operator.quantifier.regexp #130DC5FF —
constant.character #64AEECFF —
constant.character.escape #130DC5FF —
entity.name.label #A2A2A2FF —
token.info-token #6699FFFF —
token.warn-token #CEA936FF —
token.error-token #48C600FF —
token.debug-token #B962FFFF —
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal #6902C3FF —
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #63D7C0FF —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class #63D7C0FF —
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator #C63ABEFF —
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder #589DFFFF —
variable.other.constant, variable.other.enummember #65B8FFFF —
meta.object-literal.key #589DFFFF —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #2A21BDFF —
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp #2A21BDFF —
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp #6FC11DFF —
keyword.operator.or.regexp, keyword.control.anchor.regexp #6902C3FF —
keyword.operator.quantifier.regexp #130DC5FF —
constant.character #64AEECFF —
constant.character.escape #130DC5FF —
entity.name.label #A2A2A2FF —
meta.embedded, source.groovy.embedded #9F9F9FFF —
constant.language #64AEECFF —
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent #5AAF2EFF —
constant.regexp #7375A5FF —
entity.name.tag #64AEECFF —
entity.name.tag.css #130DC5FF —
entity.other.attribute-name #589DFFFF —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss #130DC5FF —
markup.underline — underline
markup.heading #64AEECFF bold
markup.strikethrough — strikethrough
markup.inserted #5AAF2EFF —
punctuation.definition.quote.begin.markdown #7DAC68FF —
punctuation.definition.list.begin.markdown #6699FFFF —
markup.inline.raw #2A21BDFF —
punctuation.definition.tag #B7B7B7FF —
meta.preprocessor, entity.name.function.preprocessor #64AEECFF —
meta.preprocessor.string #2A21BDFF —
meta.preprocessor.numeric #5AAF2EFF —
meta.structure.dictionary.key.python #589DFFFF —
meta.diff.header #64AEECFF —
storage.modifier, keyword.operator.noexcept #64AEECFF —
string, meta.embedded.assembly #2A21BDFF —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded #64AEECFF —
meta.template.expression #9F9F9FFF —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded #589DFFFF —
keyword.control #64AEECFF —
keyword.operator #9F9F9FFF —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike #64AEECFF —
keyword.other.unit #5AAF2EFF —
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php #64AEECFF —
support.function.git-rebase #589DFFFF —
constant.sha.git-rebase #5AAF2EFF —
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java #9F9F9FFF —
variable.language #64AEECFF —
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ): Promise < User | null > {
if (! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if (! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Problems1
Output
Debug Console
Terminal
Ports
~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
main*
Button.tsx
31
~/my-project
$
export interface User {
id : string ;
name : string ;
role : "admin" | "member" ;
tags : string [];
}
/**
* Fetch user data by ID
* @param id
* @returns User object or null if ID is invalid
*/
export async function fetchUser ( id : string ): Promise < User | null > {
if (! id ) {
return null ;
}
const response = await fetch ( `/api/users/ ${ id } ` , {
method: "GET" ,
headers: { Accept: "application/json" },
});
if (! response . ok ) {
throw new Error ( `HTTP ${ response . status } ` );
}
return ( await response . json ()) as User ;
}
function greet ( user : User ): string {
// Simple greeting function that uses the user's name
return `Hello, ${ user . name } !` ;
}
Elias White Theme | Coding Theme