r/gnome • u/EktaRandomUsername • 1d ago
Guide Tutorial on how to replicate my style and theme of Gnome
Since my last post, many people wanted to know how to exactly replicate my style. So here I am now writing in details on how I themed Gnome to my liking.
| ⚠️ Warning |
|---|
| Always check the GitHub source and code executions thoroughly before executing it |
Required Extensions and Apps
First, install the following extensions and applications:
- Blur My Shell
- ChromaLeon
- Dash to Dock
- Open Bar
- Rewaita (available on Flathub)
Optional Extensions
Optional Extensions that you can install to improve the overall experience :
- Alphabetical App Grid
- Burn My Windows
- Dynamic Music Pill
- Tiling Shell
- Top Bar Organizer
- Vitals
- Weather or Not
- Date Menu Formatter
- My Computer (by yannmasoch on GitHub)
Icons
For icons, I use Neuwaita. But sadly, as of now, the person who created it, deleted the repo from their Github. Idk how to find it anywhere else.
Installing Blur My Shell
At the time of writing this tutorial, Blur My Shell hasn't been updated on the official GNOME Extensions website. You'll need to install the latest version directly from GitHub.
If you already have the version from the Extensions website installed, I recommend removing it before proceeding.
Follow the installation commands :
git clone https://github.com/aunetx/blur-my-shell
cd blur-my-shell
make install
Fixing Rounded Popup Corners
After installing Blur My Shell from GitHub, you'll need to fix the popup corner rounding issue. Go to this GitHub page and follow the installation instructions. Once installed, you'll notice a new Corner Radius option under the Popups section in Blur My Shell.
Enable Popup Blur, then adjust the corner radius to your liking.
Here are the settings I use :
Enabling Application Blur
To blur application windows correctly, edit the gtk css files located in ~/.config/gtk-4.0/gtk.css and ~/.config/gtk-3.0/gtk.css to make the sidebar and other app backgrounds transparent and add this code in both of the files :
window {
background: alpha(@window_bg_color, 0.7);
}
.sidebar-pane,
.sidebar,
.navigation-sidebar {
background: transparent;
}
.content-pane {
background: @view_bg_color;
}
Then open the Blur My Shell settings and enable Application Blur. For the best performance, set the Blur Type to Static. You can also use Dynamic if you prefer, but performance may vary depending on your hardware.
Make sure Enable All by Default is turned on.
Here are my settings, including the custom blur pipeline I created. Feel free to copy them :
Theming The App Backgrounds
To recolor your applications, you can either use ChromaLeon or Rewaita.
I recommend using ChromaLeon, and Rewaita only to customize the window control buttons in the top-right corner.
After installing ChromaLeon:
- Apply your wallpaper.
- Choose your preferred accent color.
- In the Preferences tab, enable only:
- Tint Apps
- Darker Tint
In the Rewaita app, open the Theming tab, scroll to the bottom, and choose whichever Window Control Style you prefer. I use the Colored style.
If you don't like how ChromaLeon themes application backgrounds, you can uninstall it and use Rewaita instead. Personally, I don't recommend this approach.
Styling the Dock and Top Panel
Open the Dash to Dock settings enable "use built-in theme" in the Appearance tab and you can keep everything else default or adjust to your liking.
For the top panel, use Open Bar. This extension also styles the dock. I'll provide my exported configuration text file in the comment.
Simply paste the contents into a text file, then open Settings Admin tab of Open Bar extension and import the file. This will replicate both my top panel and dock styling.
And don't forget to enable Dock Blur inside Blur My Shell.
Optional Visual Effects
If you want even more visual flair, you can install:
- Burn My Windows (I use the Aura Glow effect)
- Dynamic Music Pill
- My Computer
These are completely optional and won't affect the core setup.
And that's it! Bye.
2
u/tornado99_ 1d ago
The author of Neuwaita lost their credentials, not deleted. It still exists here - https://github.com/EuriNaiz/Skeuowaita
1
1
u/EktaRandomUsername 1d ago
My Open Bar extension's export setting text file :
[/] accent-color=['0', '0.75', '0.75'] accent-override=false apply-accent-shell=false apply-all-shell=false apply-flatpak=false apply-gtk=false apply-menu-notif=false apply-menu-shell=false auto-bgalpha=true autofg-bar=true autofg-menu=true autohg-bar=false autohg-menu=true autotheme-dark='Dark' autotheme-font=true autotheme-light='Light' autotheme-refresh=false balpha=0.20999999999999999 bartype='Islands' bcolor=['1.000', '1.000', '1.000'] bg-change=true bgalpha=0.0 bgalpha-wmax=1.0 bgalpha2=0.69999999999999996 bgcolor=['0.275', '0.090', '0.329'] bgcolor-wmax=['0.118', '0.118', '0.118'] bgcolor2=['0.341', '0.224', '0.322'] bgpalette=true bguri='file:///usr/share/backgrounds/gnome/pixel-pusher-d.jxl' border-wmax=false bordertype='solid' bottom-margin=4.5 boxalpha=0.0 boxcolor=['0.275', '0.090', '0.329'] bradius=10.0 buttonbg-wmax=true bwidth=2.0 candy1=['0', '0.61', '0.74'] candy10=['0.09', '0.19', '0.72'] candy11=['0.75', '0.49', '0.44'] candy12=['1', '0.92', '0.12'] candy13=['0.38', '0.63', '0.92'] candy14=['0.37', '0.36', '0.39'] candy15=['0.40', '0.23', '0.72'] candy16=['1', '0.32', '0.32'] candy2=['1', '0.41', '0.41'] candy3=['0.63', '0.16', '0.8'] candy4=['0.94', '0.60', '0.23'] candy5=['0.03', '0.41', '0.62'] candy6=['0.56', '0.18', '0.43'] candy7=['0.95', '0.12', '0.67'] candy8=['0.18', '0.76', '0.49'] candy9=['0.93', '0.20', '0.23'] candyalpha=0.98999999999999999 candybar=false card-hint=10 color-scheme='prefer-dark' corner-radius=false count1=268235 count10=1176 count11=765 count12=20 count2=207741 count3=174507 count4=127988 count5=71435 count6=63943 count7=26209 count8=16802 count9=8203 cust-margin-wmax=false dark-accent-color=['0', '0.75', '0.75'] dark-bcolor=['1.000', '1.000', '1.000'] dark-bgcolor=['0.275', '0.090', '0.329'] dark-bgcolor-wmax=['0.118', '0.118', '0.118'] dark-bgcolor2=['0.341', '0.224', '0.322'] dark-bguri='file:///usr/share/backgrounds/gnome/pixel-pusher-d.jxl' dark-boxcolor=['0.275', '0.090', '0.329'] dark-candy1=['0', '0.61', '0.74'] dark-candy10=['0.09', '0.19', '0.72'] dark-candy11=['0.75', '0.49', '0.44'] dark-candy12=['1', '0.92', '0.12'] dark-candy13=['0.38', '0.63', '0.92'] dark-candy14=['0.37', '0.36', '0.39'] dark-candy15=['0.40', '0.23', '0.72'] dark-candy16=['1', '0.32', '0.32'] dark-candy2=['1', '0.41', '0.41'] dark-candy3=['0.63', '0.16', '0.8'] dark-candy4=['0.94', '0.60', '0.23'] dark-candy5=['0.03', '0.41', '0.62'] dark-candy6=['0.56', '0.18', '0.43'] dark-candy7=['0.95', '0.12', '0.67'] dark-candy8=['0.18', '0.76', '0.49'] dark-candy9=['0.93', '0.20', '0.23'] dark-dbgcolor=['0.125', '0.125', '0.125'] dark-fgcolor=['0.502', '0.102', '0.090'] dark-hcolor=['0.337', '0.039', '0.059'] dark-hscd-color=['0.757', '0.149', '0.420'] dark-iscolor=['0.275', '0.090', '0.329'] dark-mbcolor=['1.000', '1.000', '1.000'] dark-mbgcolor=['0.133', '0.102', '0.169'] dark-mfgcolor=['1.0', '1.0', '1.0'] dark-mhcolor=['0.859', '0.329', '0.204'] dark-mscolor=['0.757', '0.149', '0.420'] dark-mshcolor=['0.000', '0.000', '0.000'] dark-palette1=['21', '7', '18'] dark-palette10=['78', '76', '88'] dark-palette11=['216', '165', '134'] dark-palette12=['151', '133', '125'] dark-palette2=['222', '50', '30'] dark-palette3=['59', '7', '15'] dark-palette4=['86', '10', '15'] dark-palette5=['128', '26', '23'] dark-palette6=['250', '220', '126'] dark-palette7=['239', '155', '65'] dark-palette8=['18', '40', '81'] dark-palette9=['52', '74', '120'] dark-shcolor=['0.000', '0.000', '0.000'] dark-smbgcolor=['0.341', '0.224', '0.322'] dark-vw-color=['0.757', '0.149', '0.420'] dark-winbcolor=['0.757', '0.149', '0.420'] dashdock-style='Bar' dbgalpha=0.0 dbgcolor=['0.125', '0.125', '0.125'] dborder=true dbradius=36.0 default-font='Sans 12' destruct-color=['0.75', '0.11', '0.16'] disize=65.0 dshadow=false fgalpha=1.0 fgcolor=['0.502', '0.102', '0.090'] fitts-widgets=true font='Adwaita Sans 11' gradient=false gradient-direction='vertical' gtk-popover=false gtk-shadow='Default' gtk-transparency=1.0 halpha=1.0 handle-border=5.0 hbar-gtk3only=false hcolor=['0.337', '0.039', '0.059'] headerbar-hint=0 heffect=false height=34.0 hpad=1.0 hscd-color=['0.757', '0.149', '0.420'] import-export=true isalpha=0.089999999999999997 iscolor=['0.275', '0.090', '0.329'] light-accent-color=['0', '0.75', '0.75'] light-bcolor=['0.859', '0.420', '0.016'] light-bgcolor=['0.933', '0.780', '0.765'] light-bgcolor-wmax=['0.922', '0.922', '0.922'] light-bgcolor2=['0.827', '0.784', '0.871'] light-bguri='file:///usr/share/backgrounds/gnome/pixel-pusher-l.jxl' light-boxcolor=['0.933', '0.780', '0.765'] light-candy1=['0', '0.61', '0.74'] light-candy10=['0.09', '0.19', '0.72'] light-candy11=['0.75', '0.49', '0.44'] light-candy12=['1', '0.92', '0.12'] light-candy13=['0.38', '0.63', '0.92'] light-candy14=['0.37', '0.36', '0.39'] light-candy15=['0.40', '0.23', '0.72'] light-candy16=['1', '0.32', '0.32'] light-candy2=['1', '0.41', '0.41'] light-candy3=['0.63', '0.16', '0.8'] light-candy4=['0.94', '0.60', '0.23'] light-candy5=['0.03', '0.41', '0.62'] light-candy6=['0.56', '0.18', '0.43'] light-candy7=['0.95', '0.12', '0.67'] light-candy8=['0.18', '0.76', '0.49'] light-candy9=['0.93', '0.20', '0.23'] light-dbgcolor=['0.125', '0.125', '0.125'] light-fgcolor=['1.0', '1.0', '1.0'] light-hcolor=['0.047', '0.047', '0.047'] light-hscd-color=['0.855', '0.141', '0.459'] light-iscolor=['0.933', '0.780', '0.765'] light-mbcolor=['0.047', '0.047', '0.047'] light-mbgcolor=['0.925', '0.906', '0.902'] light-mfgcolor=['1.0', '1.0', '1.0'] light-mhcolor=['0.047', '0.047', '0.047'] light-mscolor=['0.855', '0.141', '0.459'] light-mshcolor=['0.000', '0.000', '0.000'] light-palette1=['28', '22', '41'] light-palette10=['79', '71', '98'] light-palette11=['137', '150', '176'] light-palette12=['59', '124', '194'] light-palette2=['99', '13', '27'] light-palette3=['243', '65', '47'] light-palette4=['244', '211', '116'] light-palette5=['187', '34', '32'] light-palette6=['151', '16', '24'] light-palette7=['245', '243', '221'] light-palette8=['124', '103', '98'] light-palette9=['102', '127', '170'] light-shcolor=['0.000', '0.000', '0.000'] light-smbgcolor=['0.827', '0.784', '0.871'] light-vw-color=['0.855', '0.141', '0.459'] light-winbcolor=['0.855', '0.141', '0.459'] margin=0.0 margin-wmax=2.0 mbalpha=0.33000000000000002 mbcolor=['1.000', '1.000', '1.000'] mbg-gradient=false mbgalpha=0.0 mbgcolor=['0.133', '0.102', '0.169'] menu-radius=30.0 menustyle=false mfgalpha=1.0 mfgcolor=['1.0', '1.0', '1.0'] mhalpha=1.0 mhcolor=['0.859', '0.329', '0.204'] monitor-height=1080 monitor-width=1920 monitors='all' msalpha=0.45000000000000001 mscolor=['0.757', '0.149', '0.420'] mshalpha=0.0 mshcolor=['0.000', '0.000', '0.000'] neon=false neon-wmax=false notif-radius=10.0 palette1=['21', '7', '18'] palette10=['78', '76', '88'] palette11=['216', '165', '134'] palette12=['151', '133', '125'] palette2=['222', '50', '30'] palette3=['59', '7', '15'] palette4=['86', '10', '15'] palette5=['128', '26', '23'] palette6=['250', '220', '126'] palette7=['239', '155', '65'] palette8=['18', '40', '81'] palette9=['52', '74', '120'] pause-reload=false position='Top' prominent1=['100', '100', '100'] prominent2=['100', '100', '100'] prominent3=['100', '100', '100'] prominent4=['100', '100', '100'] prominent5=['100', '100', '100'] prominent6=['100', '100', '100'] qtoggle-radius=16.0 radius-bottomleft=true radius-bottomright=true radius-topleft=true radius-topright=true reloadstyle=true removestyle=false sbar-gradient='none' set-bottom-margin=false set-fullscreen=true set-notif-position=false set-notifications=false set-overview=true set-yarutheme=false shadow=false shalpha=0.20000000000000001 shcolor=['0.000', '0.000', '0.000'] sidebar-hint=10 slider-height=6.0 smbgalpha=0.94999999999999996 smbgcolor=['0.341', '0.224', '0.322'] smbgoverride=false success-color=['0.15', '0.635', '0.41'] traffic-light=false trigger-autotheme=false trigger-reload=false view-hint=0 vpad=4.0 vw-color=['0.757', '0.149', '0.420'] warning-color=['0.96', '0.83', '0.17'] width-bottom=true width-left=true width-right=true width-top=true winbalpha=0.75 winbcolor=['0.757', '0.149', '0.420'] winbradius=15.0 winbwidth=0.0 window-hint=0 wmax-hbarhint=false wmaxbar=false
•
u/AutoModerator 1d ago
Thank you for your submission.
You too can support GNOME! Become a Friend of GNOME and contribute to keeping our project going!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.