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#121315
  • activityBar.border#1E1F22
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#7A7E85
  • activityBarBadge.background#3574F0
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3574F04D
  • badge.foreground#56A8F5
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.background#141517
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#7A7E85
  • button.background#3574F0
  • button.foreground#FFFFFF
  • button.hoverBackground#3062D4
  • button.secondaryBackground#32353D
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#3A3E47
  • checkbox.background#18191B
  • checkbox.border#393B4080
  • checkbox.foreground#FFFFFF
  • dropdown.background#18191B
  • dropdown.border#393B4080
  • dropdown.foreground#BCBEC4
  • dropdown.listBackground#18191BF8
  • editor.background#1E1F22
  • editor.findMatchBackground#3574F066
  • editor.findMatchHighlightBackground#3574F033
  • editor.foreground#BCBEC4
  • editor.inactiveSelectionBackground#3574F026
  • editor.lineHighlightBackground#26282E
  • editor.selectionBackground#3574F04D
  • editor.selectionHighlightBackground#3574F026
  • editorBracketMatch.background#3574F033
  • editorBracketMatch.border#56A8F5
  • editorCursor.foreground#CED0D6
  • editorGroup.border#141517
  • editorGroupHeader.noTabsBackground#141517
  • editorGroupHeader.tabsBackground#141517
  • editorGroupHeader.tabsBorder#141517
  • editorGutter.addedBackground#6AAB73
  • editorGutter.background#1E1F22
  • editorGutter.deletedBackground#E55765
  • editorGutter.modifiedBackground#56A8F5
  • editorHoverWidget.background#18191BF8
  • editorHoverWidget.border#393B4080
  • editorIndentGuide.activeBackground1#4E5157
  • editorIndentGuide.background1#2B2D30
  • editorLineNumber.activeForeground#A1A3AB
  • editorLineNumber.foreground#4B5059
  • editorRuler.foreground#2B2D30
  • editorSuggestWidget.background#18191BF8
  • editorSuggestWidget.border#393B4080
  • editorSuggestWidget.selectedBackground#3574F04D
  • editorWhitespace.foreground#393B40
  • editorWidget.background#18191BF8
  • editorWidget.border#393B4080
  • focusBorder#3574F0
  • gitDecoration.addedResourceForeground#6AAB73
  • gitDecoration.conflictingResourceForeground#CF8E6D
  • gitDecoration.deletedResourceForeground#7A7E85
  • gitDecoration.ignoredResourceForeground#54575E
  • gitDecoration.modifiedResourceForeground#56A8F5
  • gitDecoration.submoduleResourceForeground#C77DBB
  • gitDecoration.untrackedResourceForeground#FF6B68
  • input.background#18191BCC
  • input.border#393B4080
  • input.foreground#BCBEC4
  • input.placeholderForeground#54575E
  • inputOption.activeBorder#3574F0
  • list.activeSelectionBackground#3574F04D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#3574F04D
  • list.focusForeground#FFFFFF
  • list.hoverBackground#3A3E4780
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#3574F026
  • list.inactiveSelectionForeground#BCBEC4
  • menu.background#18191BF8
  • menu.foreground#BCBEC4
  • menu.selectionBackground#3574F04D
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#393B4080
  • minimap.background#1E1F22
  • notificationCenterHeader.background#18191B
  • notificationCenterHeader.foreground#BCBEC4
  • notifications.background#222429F2
  • notifications.border#393B4080
  • notifications.foreground#BCBEC4
  • panel.background#222429
  • panel.border#141517
  • panelTitle.activeBorder#3574F0
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#7A7E85
  • peekView.border#3574F0
  • peekViewEditor.background#1E1F22
  • peekViewResult.background#18191B
  • peekViewResult.selectionBackground#3574F04D
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#141517
  • quickInput.background#18191BF8
  • quickInput.foreground#BCBEC4
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#7A7E85B3
  • scrollbarSlider.background#54575E4D
  • scrollbarSlider.hoverBackground#7A7E8580
  • sideBar.background#18191B
  • sideBar.border#141517
  • sideBar.foreground#BCBEC4
  • sideBarSectionHeader.background#18191B
  • sideBarSectionHeader.border#2B2D30B3
  • sideBarSectionHeader.foreground#BCBEC4
  • sideBarTitle.foreground#BCBEC4
  • statusBar.background#141517
  • statusBar.border#2B2D30B3
  • statusBar.debuggingBackground#3574F0
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#7A7E85
  • statusBar.noFolderBackground#141517
  • statusBarItem.activeBackground#3574F04D
  • statusBarItem.hoverBackground#3A3E4780
  • tab.activeBackground#1E1F22
  • tab.activeBorderTop#3574F0
  • tab.activeForeground#FFFFFF
  • tab.border#141517
  • tab.hoverBackground#26282ECC
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#141517
  • tab.inactiveForeground#7A7E85
  • tab.unfocusedActiveBackground#1E1F22
  • tab.unfocusedActiveForeground#BCBEC4
  • tab.unfocusedInactiveBackground#141517
  • tab.unfocusedInactiveForeground#54575E
  • terminal.ansiBlack#18191B
  • terminal.ansiBlue#3574F0
  • terminal.ansiBrightBlack#54575E
  • terminal.ansiBrightBlue#64D2FF
  • terminal.ansiBrightCyan#7DD3FC
  • terminal.ansiBrightGreen#7EE787
  • terminal.ansiBrightMagenta#BF5AF2
  • terminal.ansiBrightRed#FF6B68
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD60A
  • terminal.ansiCyan#56A8F5
  • terminal.ansiGreen#6AAB73
  • terminal.ansiMagenta#C77DBB
  • terminal.ansiRed#E55765
  • terminal.ansiWhite#BCBEC4
  • terminal.ansiYellow#F1A02E
  • terminal.background#1E1F22
  • terminal.foreground#BCBEC4
  • titleBar.activeBackground#141517
  • titleBar.activeForeground#BCBEC4
  • titleBar.border#1E1F22
  • titleBar.inactiveBackground#121315
  • titleBar.inactiveForeground#54575E
  • widget.shadow#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7E85italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage.type, storage.modifier#CF8E6D—
entity.name.function, meta.function-call, support.function, meta.method-call#56A8F5—
string, string.quoted, string.template, punctuation.definition.string#6AAB73—
constant.numeric, constant.language.boolean, constant.language.null#2AACB8—
constant, constant.other, variable.other.constant, entity.name.constant#C77DBBitalic
entity.name.type, entity.name.class, entity.name.interface, support.class, support.type#BCBEC4—
variable, variable.other, variable.parameter#BCBEC4—
variable.other.property, variable.other.object.property, support.type.property-name#C77DBB—
meta.decorator, entity.name.function.decorator, storage.type.annotation#F1A02E—
entity.name.tag, punctuation.definition.tag#CF8E6D—
entity.other.attribute-name#56A8F5—
support.type.property-name.css, entity.other.attribute-name.class.css#56A8F5—
support.type.property-name.json#56A8F5—
markup.heading, punctuation.definition.heading.markdown#56A8F5bold
markup.underline.link.markdown, string.other.link.title.markdown#64D2FF—