feat(themes): add neon-glass theme with segmented pill waybar and glassmorphic rofi

Leveraged Nano Banana to generate a 4k wallpaper. Added the new preset with glassmorphism aesthetic.
This commit is contained in:
2026-07-06 18:35:36 +01:00
parent 51e319d357
commit ccd896c8dc
5 changed files with 238 additions and 0 deletions

43
themes/neon-glass.json Normal file
View File

@@ -0,0 +1,43 @@
{
"version": 1,
"name": "Neon Glass",
"slug": "neon-glass",
"mode": "dark",
"wallpaper": "",
"colors": {
"base": "#0B0E14",
"mantle": "#07090D",
"surface": "#151A22",
"overlay": "#1E2530",
"text": "#E0E6F0",
"subtext": "#8F9BB3",
"muted": "#4B566B",
"accent": "#00F0FF",
"accentAlt": "#B026FF",
"good": "#00FFA3",
"warn": "#FFD000",
"bad": "#FF003C"
},
"border": {
"active": "accent",
"inactive": "overlay"
},
"ansi": [
"#151A22",
"#FF003C",
"#00FFA3",
"#FFD000",
"#00F0FF",
"#B026FF",
"#00E5FF",
"#E0E6F0",
"#4B566B",
"#FF3366",
"#33FFB8",
"#FFE033",
"#33F3FF",
"#C44DFF",
"#33EBFF",
"#FFFFFF"
]
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 702 KiB

View File

@@ -0,0 +1,82 @@
/*
* Neon Glass Rofi Theme
* Glassmorphic, transparent, blurred background with glowing accents.
*/
* {
/* Using standard theme palette via env variables injected by home-manager,
or fallback if testing independently. The whole-swap still gets the
colors injected into the RASI by the module! */
background-color: transparent;
text-color: var(text, #E0E6F0);
font: "Inter 13";
}
window {
width: 600px;
/* transparent base with slight tint */
background-color: rgba(11, 14, 20, 0.45);
border: 1px solid rgba(0, 240, 255, 0.3);
border-radius: 24px;
padding: 24px;
/* Blur would be applied via hyprland layerrule for rofi */
}
mainbox {
spacing: 16px;
}
inputbar {
background-color: rgba(21, 26, 34, 0.5);
border: 1px solid rgba(0, 240, 255, 0.5);
border-radius: 12px;
padding: 12px 16px;
spacing: 12px;
children: [ prompt, entry ];
}
prompt {
text-color: var(accent, #00F0FF);
}
entry {
placeholder: "Search...";
placeholder-color: var(subtext, #8F9BB3);
}
listview {
lines: 7;
spacing: 8px;
scrollbar: false;
border: 0px;
}
element {
padding: 10px 16px;
border-radius: 12px;
spacing: 12px;
}
element normal.normal, element alternate.normal {
background-color: transparent;
}
element selected.normal {
background-color: rgba(0, 240, 255, 0.15);
border: 1px solid rgba(0, 240, 255, 0.4);
text-color: var(accent, #00F0FF);
}
element-icon {
size: 24px;
background-color: transparent;
}
element-text {
background-color: transparent;
vertical-align: 0.5;
}
element-text selected {
text-color: var(accent, #00F0FF);
}

View File

@@ -0,0 +1,108 @@
/* Neon Glass Waybar — Segmented floating pills with glassmorphism */
* {
font-family: "Inter", "Symbols Nerd Font", sans-serif;
font-size: 13px;
font-weight: 500;
border: none;
border-radius: 0;
min-height: 0;
}
window#waybar {
/* The main bar background is transparent so the wallpaper shows through */
background: transparent;
color: @text;
}
/*
* The pill containers: left, center, right.
* Glassmorphism: semi-transparent base + blur (blur requires hyprland layerrule if waybar doesn't natively blur, but alpha base helps).
*/
.modules-left,
.modules-center,
.modules-right {
background: alpha(@base, 0.45);
border: 1px solid alpha(@accent, 0.2);
border-radius: 20px;
margin: 4px 6px;
padding: 2px 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* Add a glowing top border effect on hover or generally to accent the glass */
.modules-left {
border-top: 1px solid alpha(@accent, 0.6);
}
.modules-center {
border-top: 1px solid alpha(@text, 0.3);
}
.modules-right {
border-top: 1px solid alpha(@accentAlt, 0.6);
}
/* Remove default padding from individual modules so they fit snug in the pill */
#workspaces button,
#window,
#clock,
#tray,
#pulseaudio,
#battery,
#custom-notification,
#custom-vpn,
#custom-powerprofile,
#custom-updates,
#custom-doctor {
padding: 0 8px;
margin: 0 2px;
}
/* Workspaces */
#workspaces button {
color: @subtext;
border-radius: 12px;
transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
#workspaces button:hover {
background: alpha(@surface, 0.5);
color: @text;
}
#workspaces button.active {
color: @accent;
background: alpha(@accent, 0.15);
box-shadow: 0 0 8px alpha(@accent, 0.4);
}
#workspaces button.urgent {
color: @bad;
background: alpha(@bad, 0.15);
}
/* Indicators */
#battery.charging { color: @good; }
#battery.warning:not(.charging) { color: @warn; }
#battery.critical:not(.charging) {
color: @bad;
animation: blink 1s steps(2, start) infinite;
}
#pulseaudio.muted { color: @muted; }
#custom-updates { color: @accentAlt; }
#custom-doctor { color: @bad; }
#custom-vpn { color: @accent; }
@keyframes blink {
to { color: @text; }
}
tooltip {
background: alpha(@base, 0.85);
border: 1px solid alpha(@accent, 0.4);
border-radius: 12px;
}
tooltip label {
color: @text;
}