HTML COLOR THEME
Screenshot
Costomize Editor
Copy And Past Below Piece Of Code ANd Past On setting.json, Then Edite Then correct any part you did not like.
"workbench.colorCustomizations": {
"focusBorder": "#535353",
"activityBar.background": "#121315",
"activityBarBadge.background": "#24BFA5",
"activityBarBadge.foreground": "#f0f0f0",
"activityBar.foreground": "#e7e7e7",
"activityBar.activeBorder": "#24BFA5",
"activityBar.activeFocusBorder": "#24BFA5",
"diffEditor.insertedTextBackground": "#66f0c213",
"dropdown.background": "#202124",
"dropdown.foreground": "#eeeeee",
"dropdown.border": "#00BCD4",
"editor.background": "#17181a",
"editor.foreground": "#e2e2e2ec",
"editor.selectionBackground": "#343F56",
"editor.wordHighlightBackground": "#343F56",
"editorCursor.foreground": "#24BFA5",
"editorGroupHeader.tabsBackground": "#17181a",
"editorGutter.addedBackground": "#24BFA5",
"editorGutter.modifiedBackground": "#938464",
"editorIndentGuide.background": "#97a7c826",
"editorLineNumber.activeForeground": "#ffffff9a",
"editorLineNumber.foreground": "#94949460",
"editorWhitespace.foreground": "#3b3a32",
"editor.selectionHighlightBackground": "#2929293b",
"editor.lineHighlightBackground": "#343f5667",
"editor.lineHighlightBorder": "#343f5667",
"breadcrumb.foreground": "#e0e0e0",
"breadcrumb.background": "#121315",
"breadcrumb.focusForeground": "#24BFA5",
"breadcrumbPicker.background": "#1b1b1d",
"foreground": "#dadada",
"gitDecoration.ignoredResourceForeground": "#3D4D67",
"gitDecoration.modifiedResourceForeground": "#E3C18A",
"gitDecoration.untrackedResourceForeground": "#70CA8E",
"input.background": "#202124",
"input.border": "#dfdfdf44",
"input.foreground": "#f0f0f0",
"inputOption.activeForeground": "#f0f0f0",
"inputOption.activeBorder": "#24BFA5",
"input.placeholderForeground": "#c0c0c06e",
"list.activeSelectionBackground": "#e6e6e609",
"list.activeSelectionForeground": "#ffffff",
"list.focusBackground": "#1a1a17",
"list.focusForeground": "#fff",
"list.hoverBackground": "#1E1F21",
"list.inactiveSelectionBackground": "#e6e6e609",
"list.inactiveSelectionForeground": "#D5D9E2",
"list.focusOutline": "#c0c0c06e",
"list.highlightForeground": "#24BFA5",
"list.deemphasizedForeground": "#24BFA5",
"panel.background": "#121315",
"panel.border": "#121315",
"panel.dropBorder": "#24BFA5",
"panelTitle.activeBorder": "#24BFA5",
"panelInput.border": "#24BFA5",
"panelTitle.activeForeground": "#ffff",
"scrollbarSlider.background": "#252526",
"scrollbarSlider.hoverBackground": "#2b2b2b",
"scrollbarSlider.activeBackground": "#ffffff50",
"sideBar.background": "#121315",
"sideBarSectionHeader.background": "#121315",
"sideBarSectionHeader.foreground": "#24BFA5",
"sideBarSectionHeader.border": "#121315",
"sideBarTitle.foreground": "#24BFA5",
"statusBar.background": "#121315",
"statusBar.border": "#121315",
"statusBar.foreground": "#e8e8e8",
"statusBar.noFolderBackground": "#121315",
"statusBar.noFolderBorder": "#121315",
"statusBarItem.activeBackground": "#24BFA5",
"statusBarItem.hoverBackground": "#64f0d82d",
"settings.headerForeground": "#24BFA5",
"settings.modifiedItemIndicator": "#24BFA5",
"progressBar.background": "#00BCD4",
"notificationLink.foreground": "#f8f8f8",
"editor.findMatchBorder": "#00BCD4",
"settings.dropdownBorder": "#24BFA5",
"pickerGroup.foreground": "#24BFA5",
"tab.activeBackground": "#24bfa509",
"tab.activeBorder": "#24BFA5",
"tab.inactiveBackground": "#252629",
"tab.inactiveForeground": "#f0f0f0",
"tab.unfocusedInactiveForeground": "#24BFA5",
"terminal.background": "#121315",
"terminal.border": "#121315",
"titleBar.activeBackground": "#121315",
"titleBar.activeForeground": "#f0f0f0",
"titleBar.inactiveBackground": "#121315",
"titleBar.inactiveForeground": "#f0f0f0",
"editorSuggestWidget.border": "#585858",
"editorSuggestWidget.foreground": "#cecece",
"editorSuggestWidget.background": "#212224",
"editorSuggestWidget.highlightForeground": "#24BFA5",
"editorSuggestWidget.selectedBackground": "#1c423cc5",
"editorHoverWidget.foreground": "#cecece",
"editorHoverWidget.background": "#17181a",
"editorWidget.background": "#17181a",
"button.background": "#24bfa5a8",
"button.foreground": "#f0f0f0",
"button.hoverBackground": "#0db498d3",
"checkbox.foreground": "#24BFA5",
"checkbox.border": "#24BFA5",
"textLink.foreground": "#00BCD4",
"menubar.selectionForeground": "#24BFA5",
"menu.selectionForeground": "#24BFA5",
}
HTML COLOR THEME
Costomize HTML Color Theme
Copy And Past Below Piece Of Code ANd Then Go to C:\Users\YorUser.vscode | .vscode-insiders\extensions\miladfathy.html-color-theme-1.0.0\themes and then Open Json File and enter your desired color scheme. At The Finally Press CTRL+F1 ANd Type Reload ANd Press Enter.
"tokenColors": [
{
"name": "Tag name",
"scope": "entity.name.tag",
"settings": {
"foreground": "#00B2FF"
}
},
{
"name": "Tag attribute",
"scope": "entity.other.attribute-name, string.quoted.double.json",
"settings": {
"foreground": "#fed404ea"
}
},
{
"name": "Tag Other",
"scope": "meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html",
"settings": {
"foreground": "#1ab2f8"
}
},
{
"name": "equals (=) before value HTML tag",
"scope": "meta.tag.metadata.meta.void.html,punctuation.separator.key-value.html",
"settings": {
"foreground": "#FED604"
}
},
{
"name": "<>/ in HTML Tags",
"scope": "punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end",
"settings": {
"foreground": "#0587c4"
}
},
{
"name": "Tag Value",
"scope": "meta.tag string -source -punctuation, text source text meta.tag string -punctuation",
"settings": {
"foreground": "#37E7AC"
}
},
{
"name": "Meta Brace",
"scope": "punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html",
"settings": {
"foreground": "#D0B344"
}
},
{
"name": "HTML ID",
"scope": "meta.toc-list.id",
"settings": {
"foreground": "#88F2AF"
}
},
{
"name": "HTML String",
"scope": "string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, string.quoted.double.handlebars",
"settings": {
"foreground": "#37E7AC"
}
}
]
