Nebula

✨What is Nebula?

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.

🪐Showcase :))

🫶🏻Thanks for the support!

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

💫 Nebula with Sine Installation Guide

Follow these steps to install and apply the Nebula theme to Zen Browser:

1. 📝 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.

2. 💎 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.

   

3. ⚙️ Enable Transparent Tabs

   • Go to about:config in Zen.
   • Search for browser.tabs.allow_transparent_browser.
   • If visible, set it to true.

4. 🖼️ Install Wallpapers (Optional)

   • Download wallpapers.zip from this Link.

   • Extract and use them as desired.

2. Customize Nebula through configs

• Nebula features a Nebula-config.css file 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.css file.
• There are lots of inbuilt mods which Nebula has baked in — for example, the nogaps mod 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

3. Install Mica For Everyone (ONLY FOR WINDOWS 11 USERS)

• 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.

3. Install kwin-effects-better-blur-dx (ONLY FOR KDE LINUX)

• To get real backdrop filter transparency, go to "https://github.com/xarblu/kwin-effects-better-blur-dx" and install the app through the method specified for your distribution.

• Once you install 'kwin-effects-better-blur-dx' using your package manager, go to System Settings -> Windows -> Desktop Effecs, disable Blur and enable Better Blur DX. Then in Better Blur DX, 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 Better Blur DX put the name "zen-browser" for blur Here is the blur configuration:

3. Install BlurMyShell (FOR GNOME LINUX)

• First, make Zen transparent by setting zen.widget.linux.transparency to true in about:config.

• Next, install the Blur My Shell extension, open its settings, go to the Application tab, and enable Application Blur.

• Turn off Opaque focused window and set the Opacity slider to maximum to avoid weird artifacts.

• Add zen to the whitelist and you’re done — you now have a smooth, blurred Zen interface!

• (Optional) If you want the same look as my setup, you can copy my Blur My Shell configuration shown in the screenshot.

4. Add the Firefox extension Bonjourrr

• 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;
}

5. Using pinned extensions

• 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

Re-distribution info:

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 🫶🏻

🙌 Credits

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
• 💻 NoGaps by Comp-Tech-Guy

---

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 :(