Nebula is a minimal theme made for Zen Browser which adds a lot of new animations, glass-like blur, UI changes, and more. It is inspired by glassmorphism and minimal gradients.
This is my personal userChrome which I made to personalize Zen to my own liking. ❤️
If some of you don't like the design choices I made, you can edit the userChrome yourself if you know how to code, and if you don't, you can use ChatGPT to customize it as per your preference.
It is so crazy to me that Nebula has become one of the biggest mods for Zen Browser in such a short period of time! really appreciate it
Follow these steps to install and apply the Nebula theme to Zen Browser:
-
📝 Install Sine
- Go to Sine's Github and follow its installation process.
- This includes downloading and setting up FX-Autoconfig using the auto installer or manual installation.
- Then setting up Sine.
-
💎 Installing Nebula through Sine's Marketplace
- Go to settings and click Sine, from there a Marketplace will load where Nebula will be shown as a mod to install.
- Click the install button and Nebula should be installed as a mod.
-
⚙️ Enable Transparent Tabs
- Go to
about:configin Zen. - Search for
browser.tabs.allow_transparent_browser. - If visible, set it to
true.
- Go to
-
🖼️ Install Wallpapers (Optional)
- Download
wallpapers.zipfrom the latest release. - Extract and use them as desired.
- Download
- Nebula features a
Nebula-config.cssfile inside the Nebula folder — it allows users to customize Nebula to their own liking! - Want to change/disable certain animations? You can do that as well by reading the clear instructions in the
Nebula-config.cssfile. - There are lots of inbuilt mods which Nebula has baked in — for example, the
nogapsmod removes the gap/border from the website window. - Here is a list of configs which you can change through
about:config - Note: If you are on Sine version of Nebula, you can click this settings icon on Nebula mod to change its preferences
• To get real backdrop filter transparency (note: that this method provides a better blur effect than the transparent zen extension by sameerasw), go to "https://github.com/MicaForEveryone/MicaForEveryone" and install the app.
• Click the "+ Add new Rule" at the bottom left and "Add process rule" for "zen".
• NOTE: If you have "Show Accent color on title bars and window borders" enabled in Windows 11 settings, please disable it for transparency to work.
• Also, please make sure your Zen theme color contrast is set to 0 for it to look transparent.
• Change the Backdrop type to Acrylic and enable blur behind in advanced options.
• Restart Zen and see how it looks.
• To get real backdrop filter transparency, go to "https://github.com/taj-ny/kwin-effects-forceblur" and install the app.
• It's required to install 'kwin-effects-forceblur' from AUR then go to System Settings -> Windows -> Desktop Effecs, disable Blur and enable Better Blur and in Better Blur settings go to 'Force blur' tab and add 'zen' to list of classes of windows.
• NOTE: If Zen was installed from AUR as "zen-browser-bin", then in KDE put the name "zen-browser" for blur Here is the blur configuration:
• Go to "https://addons.mozilla.org/en-US/firefox/addon/bonjourr-startpage/" and install this extension.
• The new tab must be replaced by this now. On the bottom right, you will see a settings button for new tab. Change the settings to these:
 |
 |
 |
|---|
• In the section where it says "Add custom CSS", add this code to change font of newtab and make it transparent:
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
body, h1, h2, h3, h4, h5, h6, p, span, div {
font-family: 'Comfortaa', sans-serif !important;
font-weight: 300 !important;
letter-spacing: 0.015em;
font-smooth: always;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* Light mode */
@media (prefers-color-scheme: light) {
body, h1, h2, h3, h4, h5, h6, p, span, div {
color: #222222;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body, h1, h2, h3, h4, h5, h6, p, span, div {
color: #e0e0e0;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.2);
}
}
h1 {
font-weight: 400 !important;
letter-spacing: 0.025em;
}
p {
font-weight: 300 !important;
line-height: 1.6;
letter-spacing: 0.015em;
}
#background {
background-color: transparent !important;
}
#background {background-image: none !important; background-color: transparent !important;}
.tabbing {background-color: transparent !important;}
body {background-color: transparent !important;}
#background-wrapper {
opacity: 0 !important;
}• First pin an extension normally, it should be somewhere in the top bar like default zen
• Now, right click on the sidebar and go to customize toolbar mode, from there drag the extension from the top bar to above essentials (or you can say below the URLbar) it would look a bit weird but press save changes and it should look perfect
• In my personal opinion, place the bonjourr extension above essentials so you can easily open a new tab by clicking it
6. Add the extension Zen Internet by Sameerasw (Optional)
This extension makes web pages transparent
You are totally free to make forks of this or put this in your chrome file and create or modify it according to yourself. It is suggested to credit me if you use my theme. Thanks for using Nebula 🫶🏻
Here are some awesome projects that inspired or contributed to this project:
- 🔗 Lacuna by Tanay-Kar
- 🌐 Natsumi Browser by greeeen-dev
- 🧠 My Internet by sameerasw
- 🍍 Pineapple Fried by TheBigWazz
- 🧩 Advanced Tab Groups by TFFC-Anoms12
If I missed anyone, kindly let me know! 😊
Note
There might be some issues with this theme, please report them to me if you experience something unusual, i will try to fix/clarify it. Also this mod has only been tested by me on a windows 11 computer so if Linux and MacOS versions are not working properly then i can't really do anything about it :(