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

☄️ Installation:

1. Installing CSS

• If you have not already, follow the Zen Live Editing guide to first create your chrome folder: https://docs.zen-browser.app/guides/live-editing

• Download the chrome ZIP file from latest Release version and paste the Nebula folder inside the chrome folder and open your userChrome.css and add the line ➡️@import "Nebula/Nebula.css";⬅️ and also open your userContent.css (or make one) and add the line ➡️@import "Nebula/Nebula-content.css";⬅️ OR if you dont want to add this line to your userChrome & userContent.css then take the userChrome.css and userContent.css file provided in the ZIP file and directly paste that one into your chrome folder.

• Restart the browser to see if the UI has changed.

• Go to about:config in Zen and search for "browser.tabs.allow_transparent_browser". If the option is visible, set it to "true". If not, click the "+" icon and set it to "boolean".

• Install the wallpapers.zip from the latest release (optional) (optional)

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

• Change the Backdrop type to Acrylic and enable blur behind in advanced options.

• Restart Zen and see how it looks.

2. Install kwin-effects-forceblur (ONLY FOR KDE LINUX)

• 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. Here is the blur configuration:

3. 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:

@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; /* Light weight for a sleek and modern feel */
    letter-spacing: 0.025em; /* Slight spacing for better readability */
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #e0e0e0; /* Soft white for a modern touch */
}

h1 {
    font-weight: 400 !important; /* Slightly bolder headlines */
    letter-spacing: 0.025em;
}

p {
    font-weight: 300 !important;
    line-height: 1.6;
    letter-spacing: 0.015em;
}

/* Optional: Add a soft glow effect for a smooth aesthetic */
p, h1, h2, h3 {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.2);
}

4. 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 clickin it

5. Add the extension Zen Internet by Sameerasw (Optional)

• this extension makes web pages transparent
https://addons.mozilla.org/en-US/firefox/addon/zen-internet/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search

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:

• https://github.com/Tanay-Kar/Lacuna

• https://github.com/greeeen-dev/natsumi-browser

• https://github.com/sameerasw/my-internet

• https://github.com/TheBigWazz/Pineapple-Fried

------------------------------------------
Kindly let me know if i missed some :))

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