Giter VIP home page Giter VIP logo

firefox-sweet-theme's Introduction

Screenshot of the theme

Description

A dark and modern theme for firefox

This theme is supposed to work with current supported Firefox releases:

  • Firefox 68.0
  • Firefox 68 ESR
  • Firefox 60 ESR
  • Firefox 69.0 Beta
  • Firefox 70.0 Nightly

Firefox 60 ESR issues:

(Dark theme variant is broken in Firefox < 67).

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#Browser_compatibility

Installation

Installation script

git clone https://github.com/EliverLara/firefox-sweet-theme && cd firefox-sweet-theme
./scripts/install.sh

Script options

  • -f <firefox_folder> optional

    • Set custom Firefox folder path, for example ~/.mozilla/icecat/.
    • Default: ~/.mozilla/firefox/
  • -p <profile_folder> optional

    • Set custom profile folder name, for example e0j6yb0p.default-nightly
    • Default: *.default (standard default profile)
  • -g optional

    • Auto enable GNOMISH extra features hide-single-tab.css & matching-autocomplete-width.css

Manual installation

  1. Go to about:support in Firefox.

  2. Application Basics > Profile Directory > Open Directory.

  3. Open directory in a terminal.

  4. Create a chrome directory if it doesn't exist.

    mkdir -p chrome
    cd chrome
  5. Clone this repo to a subdirectory:

    git clone https://github.com/EliverLara/firefox-sweet-theme.git
  6. Create single-line user CSS files if non-existent or empty (at least one line is needed for sed):

    [[ -s userChrome.css ]] || echo >> userChrome.css
  7. Import this theme at the beginning of the CSS files (all @imports must come before any existing @namespace declarations):

    sed -i '1s/^/@import "firefox-sweet-theme\/userChrome.css";\n/' userChrome.css
  8. Symlink preferences file:

    ln -s chrome/firefox-sweet-theme/configuration/user.js ../user.js
  9. Restart Firefox.

  10. Open Firefox customization panel and move the new tab button to headerbar.

  11. Be happy with your new vibrant Firefox.

Uninstalling

  1. Go to your firefox profile folder. (Go to about:support in Firefox > Application Basics > Profile Directory > Open Directory)

  2. Remove the chrome folder.

Enabling optional features

Open chrome/firefox-sweet-theme/userChrome.css with a text editor and follow instructions to enable extra features. Keep in mind this file might change in future versions and your configuration will be lost. You can copy the @imports you want to enable to a new file named customChrome.css directly in your chrome/firefox-sweet-theme directory if you want it to survive updates. Remember all @imports must be at the top of the file, before other statements.

Alternatively you can run installation script with -g flag to auto install GNOMISH features.

./scripts/install.sh -g

Those features are not included by default, because can introduce bugs or Firefox functionalities lost.

  • hide-single-tab.css GNOMISH

    Hide the tab bar when only one tab is open.

    You should move the new tab button somewhere else for this to work, because by default it is on the tab bar too.

  • matching-autocomplete-width.css GNOMISH

    Limit the URL bar's autocompletion popup's width to the URL bar's width.

  • system-icons.css

    Use system theme icons instead of Adwaita icons included by theme.

  • symbolic-tab-icons.css

    Make all tab icons look kinda like symbolic icons.

Known bugs

CSD have sharp corners

See upstream bug.

Icons color broken with system-icons.css

Icons might appear black where they should be white on some systems. I have no idea why, but you can adjust them directly in the system-icons.css file, look for --gnome-icons-hack-filter & --gnome-window-icons-hack-filter vars and play with css filters.

Development

If you wanna mess around the styles and change something, you might find these things useful.

To use the Inspector to debug the UI, open the developer tools (F12) on any page, go to options, check both of those:

  • Enable browser chrome and add-on debugging toolboxes
  • Enable remote debugging

Now you can close those tools and press Ctrl+Alt+Shift+I to Inspect the browser UI.

Also you can inspect any GTK3 application, for example type this into a terminal and it will run Epiphany with the GTK Inspector, so you can check the CSS styles of its elements too.

GTK_DEBUG=interactive epiphany

Feel free to use any parts of my code to develop your own themes, I don't force any specific license on your code.

Credits

Based on the awesome gnome theme by Rafael Mardojai CM

firefox-sweet-theme's People

Contributors

aesophor avatar curbengh avatar eliverlara avatar rafaelmardojai avatar vkhitrin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

firefox-sweet-theme's Issues

url bar drop down menu is transparent/ sizing issues

hi. after the newest update on my maschine (manjaro kde) the urlbar behaves weird. first off- when i click on it the highlighting frame isnt in the siz of the urlbar anymore but has maybe 20px padding on all sides. secondly the dropdown menu when u enter ur address or search becomes transparent. its pretty much not usable this way.

just installed ur newest version again to see if the bug is only in my config this way cuz i changed a few things but its still the same.

Not working for 81.0.1

I'm running Firefox 81.0.1, enabled the dark theme from Add-ons, and installed the theme using sudo ./scripts/install.sh -g. However, I'm not getting the UI changes as supposed.

Please see screenshot below:

screenshot_2020-10-12_20:13:15

is this not supported on v81 yet?

Window button on the Right

It's on KDE Neon the buttons are on the right side of the window though it's selected on left side. And i disabled the bookmark bar and it's still visible and looks ugly to me. Would be great if you fix those. Or point out what to do i'll fix those. Thanks for this nice work.
Firefox Beta 69

Canvas Prompt Broken

The canvas prompt given when a website tries to access your HTML5 canvas image (the prompt is only given when pivacy.resistFingerprinting is enabled in the config) does not display properly, and renders part of the text unreadable.

Firefox version 85.0b5
MacOS catalina

Didn't like the theme, uninstalling it has trashed Firefox

When trying to install, the error below is generated and the theme is not in Firefox's addons.

Installing theme in /home/thom/.mozilla/firefox/ymh7kuxa.default
Coping repo in /home/thom/.mozilla/firefox/ymh7kuxa.default/chrome
cp: cannot create regular file '/home/thom/.mozilla/firefox/ymh7kuxa.default/chrome/firefox-sweet-theme/.git/objects/pack/pack-73f31bc234a1c5235f50abcbb6bb5ef8e26d22d8.pack': Permission denied
cp: cannot create regular file '/home/thom/.mozilla/firefox/ymh7kuxa.default/chrome/firefox-sweet-theme/.git/objects/pack/pack-73f31bc234a1c5235f50abcbb6bb5ef8e26d22d8.idx': Permission denied
Set configuration user.js file
ln: failed to create symbolic link '../user.js': File exists
Done.

The uninstallation instruction don't appear to apply either, as there is no folder chrome in the directory /home/thom/.mozilla/firefox/74y1t7h1.default-release to delete.

Bookmark icon spacing

Hi
I keep some my bookmark items in the url bar. (from customize move 'bookmark toolbar items')
With this theme they become larger and much more spaced out. If I move it to the tab bar they return to normal size. Any idea how I can fix this please?

Thank you for your design

Firefox Account icon in the dropdown menu is misaligned

I can't take a screenshot of the issue because the dropdown menu disappears when a new window opens. Sorry about that.

In the main dropdown menu (3 lines in upper right corner by default), the icon for the Firefox account (first item in the list) is misaligned, it is overlapping with the text. No other icons seem to be affected.

Firefox Nighty 80.0a1 (2020-07-25) (64-bit)
Arch Linux, with KDE Plasma (latest version)

cp: cannot copy a directory into itself

Nothing happens after running the script, tried to refresh Firefox, but that didn't help.

[raby@ThinkPad ~]$ sudo git clone https://github.com/EliverLara/firefox-sweet-theme && cd firefox-sweet-theme
[sudo] password for raby: 
Cloning into 'firefox-sweet-theme'...
remote: Enumerating objects: 192, done.
remote: Counting objects: 100% (192/192), done.
remote: Compressing objects: 100% (127/127), done.
remote: Total 192 (delta 107), reused 139 (delta 62), pack-reused 0
Receiving objects: 100% (192/192), 460.72 KiB | 685.00 KiB/s, done.
Resolving deltas: 100% (107/107), done.
[raby@ThinkPad firefox-sweet-theme]$ sudo ./scripts/install.sh -g
./scripts/install.sh: line 26: cd: /root/.mozilla/firefox//*.default: No such file or directory
Installing theme in /home/raby/firefox-sweet-theme
Coping repo in /home/raby/firefox-sweet-theme/chrome
cp: cannot copy a directory, '/home/raby/firefox-sweet-theme', into itself, '/home/raby/firefox-sweet-theme/chrome/firefox-sweet-theme'
Enabling GNOMISH extra features
Set configuration user.js file
Done.

Downloads icon not auto-hiding

The "downloads" icon is not auto-hiding.

Fresh install of theme by using script method.

  • Firefox 85.0b5 (64-bit)
  • Ubuntu 20.04 LTS

Option to change "Container Color" in tabs back to original

Hi,

I understand the use of "notification dot" for the "Container Color" is probably part of the design of the theme. Can an option be added to switch back to the original? The "notification dot" is confusing since it's mainly used to notify the user that there is something new.

Screenshot from 2021-01-07 19-56-56

Thank you.

Bookmarks menu doesn't have an icon

I noticed for a while now and it didn't bother me that much, i decided to check if the theme was updated recently and indeed, so i decided to update and oddly enough the bookmarks icon is still missing.
This is happening on my desktop and laptop, both running firefox 82 under arch linux.

Here's a screenshot of what's happening:
Screenshot_20201104_221112

Add To Instructions

You should tell users to enable Firefox's 'Dark' theme otherwise if you have Default enabled, tabs will look weird.

Window control buttons (traffic lights) missing on Mac

Hi there, loving this theme.

On the most recent macOS Catalina build, running FF 78.0.1, I have no window control buttons. I noticed in another issue that the screenshots there are missing them as well. But in Linux and Windows screenshots they appear as you'd expect them to. Is there anything I can do to get them in this theme?

image

Search/Address bar dropdown menu is divided

Hi there !

First of all, thanks for your work, your theme is by far the best I've encountered so far.

My distro is Arch Linux, DE is KDE
Extensions for Firefox are as follow :

  • DarkReader
  • Facebook Container
  • Google Container
  • Grammalecte
  • KeepassXC-browser
  • Plasma Integration
  • Tabliss
  • Ublock Origin
  • Wallabager

So, I've recently updated Firefox to 70 and ended up with the following problem with the dropbown menu for the search/address bar :
image

I've tried to reproduce with a new profile that doesn't include that theme, but the issue doesn't happen there, so I was wondering if it had anything to do with your theme ? If so, I can provide what you need for resolution. Otherwise, thanks anyway ;)

EDIT : Tried with theme and without extensions : same problem happens.

Megabar/urlbar visual glitch

In FF 77+ the new urlbar has a visual glitch where the dropdown doesn't align with the frame. You can see a large gap there at the top, the border is also slightly wider on the sides and shorter at the bottom as you can see here.
Screenshot_20200618_195302

Instructions Command Issue

When I run sed -i '1s/^/@import "firefox-sweet-theme\/userChrome.css";\n/' userChrome.css I get an error that says sed: 1: "userChrome.css": invalid command code u

I was able to work around it, but thought I'd share.

CSD causing Firefox to only draw black screen on Windows 10

Apparently Firefox (stable and nightly tested - fresh installations - both latest versions on Windows 10 x64 1909) isn't able to draw stuff properly when this exact line of code is in the csd.css

#main-window {
	-moz-appearance: -moz-window-titlebar !important;
}

This code is the first snipped of code in the csd.css (except the @namespace definition)

Upon removing those lines, everything is perfectly fine, except that the window buttons (close/maximize/minimize) are not drawn.

Screenshot of Firefox with those lines of code:
with csd code

Screenshot of Firefox without those lines of code:
without csd code

Close Current Tab button?

Hi, how do I close a tab, without having to right-click and select from the menu? Can I access a 'Close Tab' button (on the tab, like with the regular Firefox theme)?

Thanks, your theme looks great on my laptop!

Missing Icons / Mac

On the Mac, we're missing icons:

  • Tab Close
  • Find bar close
  • Right click extension icons (such as 1Password or uBar)

closebuttons
right-click

Window control buttons are large on Linux

The window control buttons are abnormally large on my system. Here's a screenshot of firefox with Dolphin immediately beneath it and all the relevant information that I can think of:

OS: Manjaro Linux x86_64
Kernel: 5.9.11-3-MANJARO
Resolution: 1920x1080, 2560x1440, 1920x1080
DE: Plasma 5.20.4
WM: KWin
WM Theme: Sweet-Mars
Theme: Kvantum [Plasma], Sweet-mars-XFCE [GTK2/3]
Icons: Sweet-Mars [Plasma], Sweet-Mars [GTK2/3]
CPU: AMD Ryzen 7 2700X (16) @ 3.700GHz
GPU: NVIDIA GeForce RTX 2070 SUPER
Memory: 7050MiB / 32127MiB

White border around the edges.

After installing the theme, I get a small, but really horrible white border around the whole window. I'm running Manjaro and Plasma, and its only an issue on Firefox, and only an issue when I instill the sweet theme. Anyone else had and solved this issue? Image below.

Imgur

Theme for Brave

Excuse me, but would you mind letting me know how to use this theme on the Brave browser or, in another case, give me instructions on how could I convert it?

Text in sidebar is unreadable (dark text on dark background)

First of all: thanks your great work, these sweet themes are really awesome. :)

Problem: The text in the sidebar (history, bookmarks) is dark, but the background is also dark, so it's almost unreadable.

screenshot

Could you please make the text color bright?

System info:

  • Windows 10 Enterprise (v 10.0.17134)
  • Firefox 79
  • Sweet-dark theme v 4.0

Titlebar merges on Firefox load

The titlebar buttons are merged back into the toolbar everytime Firefox is started. I use a global menu on my desktop panel so I prefer no titlebar buttons on application windows. This application looks really out of place with the titlebar buttons showing. Checking the 'titlebar' button in the 'customize' menu of Firefox will give me the behaviour I want, but every time I restart Firefox the button becomes unchecked. It also fixes the ugly line between the top toolbar and the bookmark bar. Can you allow the theme to respect Firefox's titlebar setting? Or provide an option for it in the theme itself? Or even perhaps just let me know how I can edit the buttons out myself?

Suggestion: Extract full-size tab code into optional css

This theme is awesome! However, I can't be the only person that doesn't like full-size tabs. The way it's coded makes it a challenge to override it without manipulating the core code in tabsbar.css. Editing the core code is obviously undesirable, as changes will be lost on update.

My modification to tabsbar.css, to shrink up tabs, was to comment out the following two blocks:

49 /* Remove tab separators /
50 /

51 .tabbrowser-tab::after,
52 .tabbrowser-tab::before {
53 border-color: transparent !important;
54 border-image: none !important;
55 }
56 /**/

234 /* Full width tabs /
235 /

236 .tabbrowser-tab:not([style^="max-width"]):not([pinned]),
237 .tabbrowser-tab[style^="max-width: 100px !important;"]:not([pinned]) {
238 max-width: 100% !important;
239 }
240 /**/

Missing LICENSE file

Hey, can you please add a LICENSE file?

Edit: I've realized you state:

Feel free to use any parts of my code to develop your own themes, I don't force any specific license on your code.

Perhaps you should use the same Unlicense that Gnome Theme project that you mention uses?

.

.

misplaced titlebar buttons

After a recent update with firefox, the titlebar buttons joined the tabs bar. I also tested this using a macOS theme of firefox and still the problem persists.

Screenshot from 2019-12-13 17-47-33

"restart firefox" in readme

i installed the theme then restarted firefox by closing and opening it. This didn't load the theme. I had to restart firefox with the button in about:profiles

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.