Giter VIP home page Giter VIP logo

whitesur-gtk-theme's Introduction

WhiteSur GTK Theme


A macOS like theme for Linux GTK Desktops


Donate

If you like my project, you can buy me a coffee:

PayPal donate button

Installation is easy!

Required dependencies (click to open)

"Install from source" deps

  • sassc
  • libglib2.0-dev-bin ubuntu 20.04
  • libglib2.0-dev ubuntu 18.04 debian 10.03 linux mint 19
  • libxml2-utils ubuntu 18.04 debian 10.03 linux mint 19
  • glib2-devel Fedora Redhat

Misc deps

  • imagemagick (optional for GDM theme tweak)
  • dialog (optional for installation in dialog mode)
  • optipng (optional for asset rendering)
  • inkscape (optional for asset rendering)

Don't worry, WhiteSur installer already provides all of those dependencies.

Recommended GNOME Shell extensions (click to open)

Quick install

Installing from source

  1. Run git clone https://github.com/vinceliuice/WhiteSur-gtk-theme.git --depth=1

  2. Run ./install.sh to install the default WhiteSur GTK theme pack.

Uninstall

For example: (click to open)
  • uninstall Gtk themes: ./install.sh -r

  • uninstall GDM theme: sudo ./tweaks.sh -g -r

  • uninstall Firefox theme: ./tweaks.sh -f -r

  • uninstall Dash-to-dock theme: ./tweaks.sh -d -r

  • uninstall Flatpak Gtk themes: ./tweaks.sh -F -r

  • uninstall Snap Gtk themes: ./tweaks.sh -s -r

There's so many customizations you can do!

Usage: ./install.sh [OPTIONS...]

Options (click to open)
  -d, --dest DIR
 Set destination directory. Default is '/home/vince/.themes'

  -n, --name NAME
 Set theme name. Default is 'WhiteSur'

  -o, --opacity [normal|solid]
 Set theme opacity variants. Repeatable. Default is all variants

  -c, --color [Light|Dark]
 Set theme color variants. Repeatable. Default is all variants

  -a, --alt [normal|alt|all]
 Set window control buttons variant. Repeatable. Default is 'normal'

  -t, --theme [default|blue|purple|pink|red|orange|yellow|green|grey|all]
 Set theme accent color. Repeatable. Default is BigSur-like theme

  -p, --panel-opacity [default|30|45|60|75]
 Set panel transparency. Default is 15%

  -P, --panel-size [default|smaller|bigger]
 Set Gnome shell panel height size. Default is 32px

  -s, --size [default|180|220|240|260|280]
 Set Nautilus sidebar minimum width. Default is 200px

  -i, --icon [apple|simple|gnome|ubuntu|tux|arch|manjaro|fedora|debian|void|opensuse|popos|mxlinux|zorin]
 Set 'Activities' icon. Default is 'standard'

  -b, --background [default|blank|IMAGE_PATH]
 Set gnome-shell background image. Default is BigSur-like wallpaper

  -m, --monterey
 Set to MacOS Monterey style.

  -N, --nautilus-style [stable|normal|mojave|glassy]
 Set Nautilus style. Default is BigSur-like style (stabled sidebar)

  -l, --libadwaita
 Install theme into gtk4.0 config for libadwaita. Default is dark version

  -HD, --highdefinition
 Set to High Definition size. Default is laptop size

  --normal, --normalshowapps
 Set gnome-shell show apps button style to normal. Default is bigsur

  --round, --roundedmaxwindow
 Set maximized window to rounded. Default is square

  --right, --rightplacement
 Set Nautilus titlebutton placement to right. Default is left

  --black, --blackfont
 Set panel font color to black. Default is white

  --darker, --darkercolor
 Install darker 'WhiteSur' dark themes.

  --nord, --nordcolor
 Install 'WhiteSur' Nord ColorScheme themes.

  --dialog, --interactive
 Run this installer interactively, with dialogs.

  --silent-mode
 Meant for developers: ignore any confirm prompt and params become more strict.

  -r, --remove, -u, --uninstall
 Remove all installed WhiteSur themes.

  -h, --help
 Show this help.

Fix for libadwaita (not perfect)

Details (click to open)

Since the release of Gnome 43.0, more and more built-in apps use libadwaita now, and libadwaita does not support custom themes, which means we cannot change the appearance of app using libadwaita through gnome-tweaks or dconf-editor. For users who love custom themes, it’s really sucks!

Anyway if anybody who still want to custom themes we can only do this way:

that is to use the theme file to overwrite the gtk-4.0 configuration file. The result is that only Fixed making all gtk4 apps use one theme and cannot be switched (even can not switch to dark mode) If you want to change a theme, you can only re-overwrite the gtk-4.0 configuration file with a new theme, I know this method is not perfect, But at the moment it is only possible to continue using themes for libadwaita's apps ...

Run this command to install WhiteSur into gtk-4.0 configuration folder ($HOME/.config/gtk-4.0)

./install.sh -l                # Default is the normal dark theme
./install.sh -l -c Light       # install light theme for libadwaita

Connect WhiteSur theme to Flatpak (Snap not support)

Parameter: --flatpak -F

Example: ./tweaks.sh -F

Fix for Flatpak gtk-4.0 app:

sudo flatpak override --filesystem=xdg-config/gtk-4.0

Change theme color and accent

Install theme color

Parameter: --color -c (repeatable)

Example:

./install.sh -c Light          # install light theme color only
./install.sh -c Dark -c Light  # install dark and light theme colors

Install theme accent

Parameter: --theme -t (repeatable)

Example:

./install.sh -t red            # install red theme accent only
./install.sh -t red -t green   # install red and green theme accents
./install.sh -t all            # install all available theme accents

Change Nautilus style

Parameter: --nautilus-style -N

Example: ./install.sh -N mojave

Explore more customization features!

You can run ./install.sh -h to explore more customization features we have like changing panel opacity, theme opacity (normal and solid variant), window control button variant, etc.

Let's tweak!

Usage: ./tweaks.sh [OPTIONS...]

Options (click to open)
  -g, --gdm [default|x2]
 Install 'WhiteSur' theme for GDM (scaling: 100%/200%, default is 100%). Requires to run this shell as root

  -o, --opacity [normal|solid]
 Set 'WhiteSur' GDM theme opacity variants. Default is 'normal'

  -c, --color [Light|Dark]
 Set 'WhiteSur' GDM and Dash to Dock theme color variants. Default is 'light'

  -t, --theme [default|blue|purple|pink|red|orange|yellow|green|grey]
 Set 'WhiteSur' GDM theme accent color. Default is BigSur-like theme

  -N, --no-darken
 Don't darken 'WhiteSur' GDM theme background image.

  -n, --no-blur
 Don't blur 'WhiteSur' GDM theme background image.

  -b, --background [default|blank|IMAGE_PATH]
 Set 'WhiteSur' GDM theme background image. Default is BigSur-like wallpaper

  -p, --panel-opacity [default|30|45|60|75]
 Set 'WhiteSur' GDM (GNOME Shell) theme panel transparency. Default is 15%

  -P, --panel-size [default|smaller|bigger]
 Set 'WhiteSur' Gnome shell panel height size. Default is 32px

  -i, --icon [standard|simple|gnome|ubuntu|tux|arch|manjaro|fedora|debian|void|opensuse|popos|mxlinux|zorin]
 Set 'WhiteSur' GDM (GNOME Shell) 'Activities' icon. Default is 'standard'

  --nord, --nordcolor
 Install 'WhiteSur' Nord ColorScheme themes.

  -f, --firefox [default|monterey|alt]
 Install 'WhiteSur|Monterey|Alt' theme for Firefox and connect it to the current Firefox profiles. Default is WhiteSur

  -e, --edit-firefox
 Edit 'WhiteSur' theme for Firefox settings and also connect the theme to the current Firefox profiles.

  -F, --flatpak
 Connect 'WhiteSur' theme to Flatpak.

  -d, --dash-to-dock
 Fixed Dash to Dock theme issue.

  -r, --remove, --revert
 Revert to the original themes, do the opposite things of install and connect.

  --silent-mode
 Meant for developers: ignore any confirm prompt and params become more strict.

  -h, --help
 Show this help.

There's more themes you can try!

Install and edit Firefox theme

Parameter: --firefox -f

Example: ./tweaks.sh -f

Edit Firefox theme

Parameter: --edit-firefox -e

Example:

./tweaks.sh -e           # edit the installed Firefox theme
./tweaks.sh -f -r        # remove installed Firefox theme
./tweaks.sh -f monterey  # install Monterey Firefox theme

Install and customize GDM theme

Install GDM theme

Parameter: --gdm -g (requires to be run as root)

Example: sudo ./tweaks.sh -g

Change the background

Parameter: --background -b

Example:

sudo ./tweaks.sh -g -b "my picture.jpg" # use the custom background
sudo ./tweaks.sh -g -b default          # use the default background
sudo ./tweaks.sh -g -b blank            # make it blank

Don't darken the background

Parameter: --no-darken -N

Example:

sudo ./tweaks.sh -g -N                          # darken the default background
sudo ./tweaks.sh -g -N -b "wallpapers/snow.jpg" # darken the custom background

Don't blur the background

Parameter: --no-blur -n

Example:

sudo ./tweaks.sh -g -n                           # don't blur the default background
sudo ./tweaks.sh -g -n -b "wallpapers/rocks.jpg" # don't blur the custom background

Do more GDM customizations

You can do the similar customization features in ./install.sh like changing theme color (dark and light variant) and accent, GNOME Shell 'Activities' icon, etc. related to GDM. Run ./tweaks.sh -h to explore!

Other recommended stuff

WhiteSur Icon Theme



WhiteSur Wallpapers



Technical details and getting involved

Please go read CONTRIBUTING.md for more info

whitesur-gtk-theme's People

Contributors

aargar1 avatar adamxweb avatar bluemancz avatar bornunique911 avatar ciricode avatar dhra avatar fredcw avatar getsnoopy avatar ging-dev avatar harukeyua avatar ibnishak avatar itskruistz avatar jianzhengluo avatar kitty-panics avatar lucaswagler avatar michaelkolesidis avatar nicolas-oliveira avatar peterwu avatar puenka avatar s-ahmad461 avatar s4ch avatar saadulkh avatar samlane-ma avatar sciroccogti avatar stormbeforesunsetbee avatar syndek avatar vidurb avatar vinceliuice avatar xlebpushek avatar yuri6037 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  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

whitesur-gtk-theme's Issues

Decrease the corner radius

Hey, I've been trying to decrease a little the corner radius, changed the sass file and parsing, but nothing change.
Can someone please tell me the variable name to change it?

Border radius

6px vs 14px comparison.
Thanks.

Apple icon in topbar shell theme

How to remove the apple icon in the topbar all the way to the left when using the shell theme? Where does the svg/png live in this repo?

Text overflowing in nautilus sidebar

Hey there,

currently, the text is overflowing in the nautilus sidebar when the bookmarks have a too long name.

Screenshot from 2020-09-19 22-39-04

I tried debugging it with the GTK debugger, but honestly I have no idea how CSS works in GTK. I tried manipulating the width/height and looked at the docs but I have no idea what I'm doing.

screenshot-with-borders

When looking at the layout borders in the GTK debugger, it seems as if the rows themselves are too wide and that the sidebar's width is too small and actually overflowing everywhere.

How would you fix an issue like that? I'd love to make a PR but I have no clue on how to even start, never made a GTK theme in the past.

Bug - Rename edit mode in (Nemo) file manager has black and white overlapped, offset, text

Using Cinnamon DE on Linux Mint, (with Nemo, its default file manager). If I use WhiteSur-light for the Controls part of my theme, and try to rename a file by right-clicking it, click "Rename" then click on the file name, it looks like it overlaps one version of the file name with black text, (as it looks before being selected) with another version of the file name with white text, (as it looks when being selected) on top of each other, but slightly offset, so that it's very hard to actually read the filename any more.

Tried doing a regular screenshot of, but afraid screenshotting knocks me out of the rename edit mode, so had to try to taking a picture of with my phone, so the quality of the screenshot is poor, but hopefully good enough that you can see what I'm talking about.

IMG_0273

Note: The issue definitely seems to be localized to just this theme as, if I switch the Controls portion of the theme back to Orchis-light, (which I was using before this) there is no problem with the rename text, but when you click "Rename" with Orchis-light, the text of the filename to be renamed definitely does shift to the left as soon as "Rename" is clicked, and the text stays to the left after being clicked to edit. It's perfectly readable, but it definitely moves slightly to the left when I right-click>Rename with Orchis-light, while it moves slightly to the right when I right-click>Rename with WhiteSur-light, (and part of the first letter of the filename - in this case, the vertical line of the lower-case "b" seems to double up horizontally.

(Edit: In case you're curious, the filename you're trying to read above is "bug_fixes_and_improvements.txt").

一些小问题

首先十分感谢您优秀的主题。

GTK和icon有以下的问题:

  1. Nautilus左边列表的大小无法和标题一起调整。(这个问题能修么?)
  2. Gnome Shell的状态栏图表大小不一。(或许是上游问题?)

问题截图:
Screenshot from 2020-09-12 17-50-51

Firefex: When headerbar is disabled, close/minimize/maximize buttons are too large, then go missing

Hi!

First and foremost, thanks for this great theme. This is currently the only issue I'm running into, and I'm very impressed.

Basically, the close/minimize/maximize buttons are coming in at twice the size. I am using KDE with 200% scaling, so that is likely why.

On top of that, when tabbing from another program into Firefox again, the buttons will completely disappear, leaving an empty space where they were supposed to be.

This happens regardless of whether the userChrome.css is installed or not since I installed it. It wasn't happening beforehand, however.

Anyone know what's going on?

[Request]Dark Titlebars for light themes

As title says, could you make a variation of the theme that has dark titlebars, like how other themes like arc do, with the arc-darker theme?
BTW, thank you, I'm loving this theme.

Lollipop rounding bottom corners

Screenshot from 2020-08-20 00-22-59
i have found the code that rounds the bottom corners of Lollypop.
Could anyone guide where and how exactly to put it in the css files?
The code is:
.view{border-radius:0px 0px 14px 14px;} .sidebar{border-radius:0px 0px 0px 14px;}

Thanks

GDM build fails

 ~/Repos/WhiteSur-gtk-theme   master  sudo ./install.sh --icon manjaro --gdm
Installing '/usr/share/themes/WhiteSur-light'...
Installing '/usr/share/themes/WhiteSur-light-alt'...
Installing '/usr/share/themes/WhiteSur-dark'...
Installing '/usr/share/themes/WhiteSur-dark-alt'...
Installing '/usr/share/themes/WhiteSur-light-solid'...
Installing '/usr/share/themes/WhiteSur-light-solid-alt'...
Installing '/usr/share/themes/WhiteSur-dark-solid'...
Installing '/usr/share/themes/WhiteSur-dark-solid-alt'...

Installing WhiteSur-dark gdm theme...
Installing '/usr/share/gnome-shell/gnome-shell-theme.gresource'...
/home/zepar/Repos/WhiteSur-gtk-theme/src/main/gnome-shell/gnome-shell-theme.gresource.xml: »assets/background.png« konnte in keinem Quellordner gefunden werden.

last line translated from german means that assets/background.png could not be found in any source directory

Budgie Panel Transparency

Great theme! Thanks for your awesome work..
I've tried to change the budgie panel transparency (make it more transparent), but it did not seem to work properly.
Is it possible to make the budgie top panel more transparent?

Manjaro | Gnome | When using File utility in Gnome desktop the Text in navigation and search appears corrupt or dithered when application is maximized

When using the Gnome File utility maximized with the Whitesur theme I noticed the text looks dithered or corrupted in:

  • Left Navigation
  • Search field

Gnome File Maximized Example
image

Window mode (no issue in this mode
image

Font Configuration:
image

Environment Details

System: Kernel: 5.4.64-1-MANJARO x86_64 bits: 64 compiler: gcc v: 10.2.0 parameters: BOOT_IMAGE=/boot/vmlinuz-5.4-x86_64 root=UUID=85ccbb8b-086b-4c3b-a6c8-a45951356c8e rw apparmor=1 security=apparmor usbcore.autosuspend=-1 Desktop: GNOME 3.36.6 tk: GTK 3.24.23 wm: gnome-shell dm: GDM 3.36.3 Distro: Manjaro Linux

Graphics: Device-1: Intel 3rd Gen Core processor Graphics vendor: Lenovo driver: i915 v: kernel bus ID: 00:02.0 chip ID: 8086:0166 Display: x11 server: X.Org 1.20.8 compositor: gnome-shell driver: intel display ID: :1 screens: 1 Screen-1: 0 s-res: 1366x768 s-dpi: 96 s-size: 361x203mm (14.2x8.0") s-diag: 414mm (16.3") Monitor-1: LVDS1 res: 1366x768 hz: 60 dpi: 124 size: 280x160mm (11.0x6.3") diag: 322mm (12.7") OpenGL: renderer: Mesa DRI Intel HD Graphics 4000 (IVB GT2) v: 4.2 Mesa 20.1.7 compat-v: 3.0 direct render: Yes

Weird glitches can't login

Once I installed the themes (Pop!_OS), my screen glitched a little and I was sent to the login screen, where I can't do much, because when trying to login I get the same behavior.

Metacity icons are showing unfocused one

I applied this theme and when i maximize with the pixel saver the metacity icons are shown of unfocused window even when the window is in focus.
This problem is not with Ant theme. So particularly, how can I fix this issue.
I am trying to solve this issue by adding similar styling and building the theme as mentioned in the HACKING doc. but the issue isn't resolved.
As per guided from budgie-pixel-saver member on issue and styling applying as per pocillo-gtk-theme

Budgie pixel saver 1
Budguie Pixel Saver 2

Black Border around Windows is problematic in fullscreen

grafik
here is a screenshot of 2 windows maximized side by side, you can see where the black borders end / where the corners would be rounded

grafik
issue is there too for just a single window, the black outline stops just short of the edge of the screen

Corner content spill-over

Noticed on Solus Budgie, fully updated stable branch:

Screenshot from 2020-07-16 17-58-48_edit

Nautilus has some elements which write-out over the corners and into empty space.

Screenshot from 2020-07-16 17-59-38

Some applications, such as Tilix, render fully square bottom corners while the lower part of the GTK border and underlying shadow appear rounded.

Skin is looking great so far! As always, I appreciate that your themes properly apply to raven panel and Budgie's dock. Hopefully these issues aren't too much of a hassle to work with, I know GTK can be quite constraining when doing anything outside-of-the-box.

Problem with Firefox and Gnome Tweaks

I am using Gnome 3.36.2 on Manjaro.

The problem is in Firefox corners, they don't render correctly
Screenshot from 2020-07-16 17-43-18

Also in Gnome Tweak tool, disregarding the header bar problem which repeats on several themes except adwaita, the corner renders incorrectly too:
Screenshot from 2020-07-16 17-44-48
Screenshot from 2020-07-16 17-44-57

Is a compact version for small notebooks possible?

Really nice theme for Shell

is it possible, however, a compact version with a smaller calendar and white gtk theme?
Schermata da 2020-07-29 15-08-35

Su monitor 1366x768 decisamente stona calendario e andrebbe un pò ottimizzato spazio...se possibile!!!

Rounded Dash to Dock

Hi,

I love this theme so much! Thank you! I am wondering how you are getting your dash to dock to round its bottom corners up in the screenshots?

Thank you so much!

Linux Mint 20 - glib-compile-resources: not found

Hello community, I'm trying to install the theme but when executing the command, it presents the error below:

Installing '/usr/share/themes/WhiteSur-light'... 
./install.sh: linha 145: glib-compile-resources: not found

I'm using linux mint 20 xfce x64 bits.

Gnome weather bottom corners (fix included)

There seems to be some overflow in Gnome weather. Adding the css below to gtk-dark.css fixed it for the light theme.

#weather-page,
#weekly-forecast-frame {
	border-bottom-right-radius: 14px;
}

#weather-page-content-view {
	border-bottom-right-radius: 14px;	
	border-bottom-left-radius: 14px;
}

Before
Screenshot from 2020-07-22 22-19-25

After
Screenshot from 2020-07-22 22-19-53

Elementary files (file browser) search bar

I love this theme. I use it in elementary and have found a little bug in the file browser (at least in the dark variant). The search icon overlaps the text.

Captura de pantalla 2020-09-01 a las 18 28 11

There are also some details that are lost from the original elementary theme. But it is a personal preference. Like the back toolbar button border.

Captura de pantalla 2020-09-01 a las 18 36 22

Captura de pantalla 2020-09-01 a las 18 36 09

Or the breadcrumbs divider.

Captura de pantalla 2020-09-01 a las 18 37 50

Captura de pantalla 2020-09-01 a las 18 38 08

As I said those are personal preferences, so yo can ignore me hehehe.

Thank you. Nice work :)

[REQUEST][NO-DE][i3] Integration for desktops without desktop environment

Hey there,

WhiteSur is a great theme and looks absolutely fantastic. I wonder whether it is possible to fully support environments like mine where only i3-gaps is installed, and no GNOME or KDE is present. The GTK theme works, sort of, but I'm lacking the transparency and some "modernity". Is this a GTK2 / GTK3 thing? I wonder because it just looks a bit old and nothing like the pictures in the README.

Thanks in advance for the feedback!

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.