Skip to main content
Coding Theme

Liquid Glass Theme by Samsad

Publisher: Samsad Chalil ValappilThemes in package: 2

Apple Liquid Glass & macOS Sequoia inspired theme for VS Code with Dark and Light variants, refined contrast, and native typography.

Open in VS Code (opens extension in VS Code)

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.background#DFE2E8
  • activityBar.border#EBECF0
  • activityBar.foreground#1E1F22
  • activityBar.inactiveForeground#818594
  • activityBarBadge.background#3574F0
  • activityBarBadge.foreground#FFFFFF
  • badge.background#2F65CA2E
  • badge.foreground#2F65CA
  • breadcrumb.activeSelectionForeground#0A2540
  • breadcrumb.background#E4E6EB
  • breadcrumb.focusForeground#1E1F22
  • breadcrumb.foreground#818594
  • button.background#3574F0
  • button.foreground#FFFFFF
  • button.hoverBackground#2F65CA
  • button.secondaryBackground#FFFFFF
  • button.secondaryForeground#1E1F22
  • button.secondaryHoverBackground#F0F2F7
  • checkbox.background#FFFFFF
  • checkbox.border#D5D8DF99
  • checkbox.foreground#1E1F22
  • dropdown.background#FFFFFF
  • dropdown.border#D5D8DF99
  • dropdown.foreground#1E1F22
  • dropdown.listBackground#FFFFFFF8
  • editor.background#FFFFFF
  • editor.findMatchBackground#3574F04D
  • editor.findMatchHighlightBackground#3574F026
  • editor.foreground#1E1F22
  • editor.inactiveSelectionBackground#2F65CA17
  • editor.lineHighlightBackground#F5F8FE
  • editor.selectionBackground#2F65CA2E
  • editor.selectionHighlightBackground#2F65CA17
  • editorBracketMatch.background#2F65CA2E
  • editorBracketMatch.border#3574F0
  • editorCursor.foreground#000000
  • editorGroup.border#E4E6EB
  • editorGroupHeader.noTabsBackground#E4E6EB
  • editorGroupHeader.tabsBackground#E4E6EB
  • editorGroupHeader.tabsBorder#E4E6EB
  • editorGutter.addedBackground#368748
  • editorGutter.background#FFFFFF
  • editorGutter.deletedBackground#DB3B3B
  • editorGutter.modifiedBackground#2F65CA
  • editorHoverWidget.background#FFFFFFF8
  • editorHoverWidget.border#D5D8DF99
  • editorIndentGuide.activeBackground1#B3B5BC
  • editorIndentGuide.background1#EBECF0
  • editorLineNumber.activeForeground#1E1F22
  • editorLineNumber.foreground#818594
  • editorRuler.foreground#EBECF0
  • editorSuggestWidget.background#FFFFFFF8
  • editorSuggestWidget.border#D5D8DF99
  • editorSuggestWidget.selectedBackground#2F65CA2E
  • editorWhitespace.foreground#D5D8DF
  • editorWidget.background#FFFFFFF8
  • editorWidget.border#D5D8DF99
  • focusBorder#3574F0
  • gitDecoration.addedResourceForeground#368748
  • gitDecoration.conflictingResourceForeground#C96D00
  • gitDecoration.deletedResourceForeground#818594
  • gitDecoration.ignoredResourceForeground#B3B5BC
  • gitDecoration.modifiedResourceForeground#2F65CA
  • gitDecoration.submoduleResourceForeground#9A3BC8
  • gitDecoration.untrackedResourceForeground#E55353
  • input.background#FFFFFFE6
  • input.border#D5D8DF99
  • input.foreground#1E1F22
  • input.placeholderForeground#B3B5BC
  • inputOption.activeBorder#3574F0
  • list.activeSelectionBackground#2F65CA2E
  • list.activeSelectionForeground#0A2540
  • list.focusBackground#2F65CA2E
  • list.focusForeground#0A2540
  • list.hoverBackground#DDE0E880
  • list.hoverForeground#0A2540
  • list.inactiveSelectionBackground#2F65CA17
  • list.inactiveSelectionForeground#1E1F22
  • menu.background#FFFFFFF8
  • menu.foreground#1E1F22
  • menu.selectionBackground#2F65CA2E
  • menu.selectionForeground#0A2540
  • menu.separatorBackground#EBECF0CC
  • minimap.background#FFFFFF
  • notificationCenterHeader.background#EBEDF2
  • notificationCenterHeader.foreground#1E1F22
  • notifications.background#FFFFFFF2
  • notifications.border#D5D8DF99
  • notifications.foreground#1E1F22
  • panel.background#F5F6FA
  • panel.border#E4E6EB
  • panelTitle.activeBorder#3574F0
  • panelTitle.activeForeground#1E1F22
  • panelTitle.inactiveForeground#818594
  • peekView.border#3574F0
  • peekViewEditor.background#FFFFFF
  • peekViewResult.background#EBEDF2
  • peekViewResult.selectionBackground#2F65CA2E
  • peekViewResult.selectionForeground#0A2540
  • peekViewTitle.background#E4E6EB
  • quickInput.background#FFFFFFF8
  • quickInput.foreground#1E1F22
  • scrollbar.shadow#00000010
  • scrollbarSlider.activeBackground#818594B3
  • scrollbarSlider.background#B3B5BC66
  • scrollbarSlider.hoverBackground#81859480
  • sideBar.background#EBEDF2
  • sideBar.border#E4E6EB
  • sideBar.foreground#1E1F22
  • sideBarSectionHeader.background#EBEDF2
  • sideBarSectionHeader.border#EBECF0CC
  • sideBarSectionHeader.foreground#1E1F22
  • sideBarTitle.foreground#1E1F22
  • statusBar.background#E4E6EB
  • statusBar.border#EBECF0CC
  • statusBar.debuggingBackground#3574F0
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#818594
  • statusBar.noFolderBackground#E4E6EB
  • statusBarItem.activeBackground#2F65CA2E
  • statusBarItem.hoverBackground#DFE2E880
  • tab.activeBackground#FFFFFF
  • tab.activeBorderTop#3574F0
  • tab.activeForeground#1E1F22
  • tab.border#E4E6EB
  • tab.hoverBackground#D8DBE2CC
  • tab.hoverForeground#1E1F22
  • tab.inactiveBackground#E4E6EB
  • tab.inactiveForeground#818594
  • tab.unfocusedActiveBackground#FFFFFF
  • tab.unfocusedActiveForeground#1E1F22
  • tab.unfocusedInactiveBackground#E4E6EB
  • tab.unfocusedInactiveForeground#B3B5BC
  • terminal.ansiBlack#1E1F22
  • terminal.ansiBlue#3574F0
  • terminal.ansiBrightBlack#818594
  • terminal.ansiBrightBlue#007AFF
  • terminal.ansiBrightCyan#00A3E0
  • terminal.ansiBrightGreen#28A745
  • terminal.ansiBrightMagenta#AF52DE
  • terminal.ansiBrightRed#E55353
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E67E00
  • terminal.ansiCyan#0099CC
  • terminal.ansiGreen#368748
  • terminal.ansiMagenta#9A3BC8
  • terminal.ansiRed#DB3B3B
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#C48A00
  • terminal.background#FFFFFF
  • terminal.foreground#1E1F22
  • titleBar.activeBackground#E4E6EB
  • titleBar.activeForeground#1E1F22
  • titleBar.border#EBECF0
  • titleBar.inactiveBackground#DFE2E8
  • titleBar.inactiveForeground#818594
  • widget.shadow#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8C8C8Citalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage.type, storage.modifier#0033B3—
entity.name.function, meta.function-call, support.function, meta.method-call#00627A—
string, string.quoted, string.template, punctuation.definition.string#067D17—
constant.numeric, constant.language.boolean, constant.language.null#1750EB—
constant, constant.other, variable.other.constant, entity.name.constant#871094italic
entity.name.type, entity.name.class, entity.name.interface, support.class, support.type#000000—
variable, variable.other, variable.parameter#000000—
variable.other.property, variable.other.object.property, support.type.property-name#871094—
meta.decorator, entity.name.function.decorator, storage.type.annotation#9E880D—
entity.name.tag, punctuation.definition.tag#0033B3—
entity.other.attribute-name#00627A—
support.type.property-name.css, entity.other.attribute-name.class.css#00627A—
support.type.property-name.json#00627A—
markup.heading, punctuation.definition.heading.markdown#0033B3bold
markup.underline.link.markdown, string.other.link.title.markdown#007AFF—