Introduction to GNOME Customization
GNOME Shell is the default desktop environment for Ubuntu (since 17.10) and provides a modern, clean interface. However, its customization options are limited out of the box. This guide covers the essential tools and techniques for customizing GNOME's appearance, including themes, icons, extensions, and system-wide visual elements.
Understanding GNOME Architecture
GNOME uses several key technologies for theming:
- GTK (GIMP Toolkit): Framework for creating graphical user interfaces, handles application window theming
- GNOME Shell Theme: Controls the appearance of the top bar, activities overview, and system elements
- Icon Theme: Defines system-wide icon appearance across applications and file managers
- Cursor Theme: Customizes mouse pointer appearance
Installing Essential Tools
GNOME Shell Extension Manager
The Extension Manager is the modern, user-friendly tool for managing GNOME Shell extensions. It replaces the older browser-based extension management and provides a native application experience.
1sudo apt install gnome-shell-extension-managerTechnical Note: Extension Manager uses the GNOME Extensions API to safely install, enable, and disable extensions. It automatically handles compatibility checking with your GNOME Shell version.
GNOME Shell Extensions Package
This package provides the base infrastructure for running GNOME Shell extensions. Extensions are JavaScript-based plugins that modify or extend GNOME Shell functionality.
1sudo apt install gnome-shell-extensionsWhat this package includes:
- Core extension system libraries
- Several pre-installed extensions (window list, places menu, applications menu)
- DBus service for extension management
- Schema files for extension settings
Official Resources
1sudo apt install gnome-shell-extensionsExtension Repositories:
https://gitlab.gnome.org/GNOME/gnome-shell-extensions https://extensions.gnome.org/extension/19/user-themes/
Important Extension: User Themes - The User Themes extension is essential for applying custom GNOME Shell themes. Without it, you can only customize GTK application themes, not the shell itself (top bar, overview, etc.).
Theming System Overview
Theme Installation Locations
GNOME looks for themes in two primary directories:
- System-wide:
/usr/share/themes/- Available to all users, requires sudo - User-specific:
~/.themes/or~/.local/share/themes/- Per-user themes
Icons follow a similar pattern:
- System-wide:
/usr/share/icons/ - User-specific:
~/.icons/or~/.local/share/icons/
Theme Structure
A complete GTK theme typically contains:
ThemeName/
├── gtk-2.0/ # GTK2 applications
├── gtk-3.0/ # GTK3 applications (most current apps)
├── gtk-4.0/ # GTK4 applications (newer apps)
├── gnome-shell/ # GNOME Shell theme
├── metacity-1/ # Window manager decorations
└── index.theme # Theme metadata
Install WhiteSur Theme
WhiteSur is a macOS Big Sur-like theme for GNOME/GTK desktop environments. It provides a polished, modern look inspired by Apple's design language.
Repository: https://github.com/vinceliuice/WhiteSur-gtk-theme
Features:
- Full GTK3/GTK4 theme support
- GNOME Shell theme variants
- Multiple color schemes (Light, Dark)
- Firefox, Flatpak, and Snap application support
- Customizable panel opacity and height
Clone the Repository
1git clone https://github.com/vinceliuice/WhiteSur-gtk-themeInstallation Options
After cloning, navigate to the directory and run the install script:
1cd WhiteSur-gtk-theme2./install.shAdvanced Installation Examples:
1# Install with specific color variants2./install.sh -c Light # Light variant only3./install.sh -c Dark # Dark variant only4
5# Install with custom panel opacity6./install.sh -o solid # Solid panel7./install.sh -o normal # Normal transparency8
9# Install with alt variant (alternative style)10./install.sh -a alt11
12# Install to system directory (all users)13sudo ./install.sh -d /usr/share/themes/14
15# Combine options16./install.sh -c Dark -o solid -a altInstall script parameters:
-d [DIR]: Destination directory (default:~/.themes)-n [NAME]: Theme name (default: WhiteSur)-o [OPACITY]: Panel opacity - solid/normal (default: normal)-c [COLOR]: Color variant - Light/Dark (default: All)-a [ALT]: Alternative style variant-t [THEME]: Theme color - default/blue/purple/pink/red/orange/yellow/green/grey-p [PANEL]: Panel size - default/smaller/bigger-s [SIZE]: Sidebar size - default/220/240/260/280-i [ICON]: Icon variant - default/gnome/ubuntu/arch/manjaro/fedora/debian-h: Display help
1git clone https://github.com/vinceliuice/WhiteSur-gtk-themeApplying the Theme
After installation, activate the theme using GNOME Tweaks or command line:
Using GNOME Tweaks:
- Open GNOME Tweaks (
gnome-tweaks) - Navigate to "Appearance"
- Select WhiteSur from "Applications" dropdown
- Select WhiteSur from "Shell" dropdown (requires User Themes extension)
Using Command Line (gsettings):
1# Set GTK theme2gsettings set org.gnome.desktop.interface gtk-theme 'WhiteSur-Dark'3
4# Set Shell theme (requires User Themes extension)5gsettings set org.gnome.shell.extensions.user-theme name 'WhiteSur-Dark'6
7# Set icon theme (after installing WhiteSur icons)8gsettings set org.gnome.desktop.interface icon-theme 'WhiteSur-dark'9
10# View current theme settings11gsettings get org.gnome.desktop.interface gtk-themeIcons
WhiteSur Icon Theme - Complements the WhiteSur GTK theme with macOS-style icons.
Repository: https://github.com/vinceliuice/WhiteSur-icon-theme
Installation:
1# Clone the repository2git clone https://github.com/vinceliuice/WhiteSur-icon-theme.git3cd WhiteSur-icon-theme4
5# Install for current user6./install.sh7
8# Install specific variants9./install.sh -a # Install all variants10./install.sh -b # Install bold variant11./install.sh -d /usr/share/icons/ # System-wide installationIcon Theme Structure: Icon themes contain different sizes and contexts:
IconTheme/
├── 16x16/ # Small icons
├── 22x22/
├── 24x24/
├── 32x32/
├── 48x48/
├── scalable/ # SVG icons
├── symbolic/ # Monochrome symbolic icons
└── index.theme # Icon theme metadata
Verify Installation:
1# List installed icon themes2ls ~/.local/share/icons/3ls /usr/share/icons/4
5# Apply icon theme6gsettings set org.gnome.desktop.interface icon-theme 'WhiteSur-dark'Cursor
Bibata Modern Ice - A modern, smooth cursor theme with excellent visibility.
Download: https://www.gnome-look.org/p/1197198
Manual Installation:
1# Create cursors directory if it doesn't exist2mkdir -p ~/.local/share/icons3
4# Extract downloaded cursor theme5cd ~/.local/share/icons6tar -xvf ~/Downloads/Bibata-Modern-Ice.tar.gz7
8# Verify installation9ls ~/.local/share/icons/Bibata-Modern-Ice/10
11# Apply cursor theme12gsettings set org.gnome.desktop.interface cursor-theme 'Bibata-Modern-Ice'Alternative: Install via Package Manager (if available):
1# Some distributions include Bibata in repos2sudo apt search bibataCursor Theme Technical Details:
- Format: X11 cursor format (Xcursor)
- Sizes: Multiple resolutions (24px, 32px, 48px, etc.) for HiDPI support
- Hot spot: Defined click point for each cursor state
- Animated cursors: Frame-based animation support
Creating Cursor Symlinks (for applications that need absolute paths):
1# Link to system directory for compatibility2sudo ln -s ~/.local/share/icons/Bibata-Modern-Ice /usr/share/icons/Complete Setup for Ubuntu with GNOME 49+
For modern GNOME versions (49 and later), this comprehensive package installation includes all necessary tools for customization.
1sudo apt install gnome-shell-extensions gnome-tweaks gnome-shell-extension-manager chrome-gnome-shell git unzip chrome-gnome-shellPackage Breakdown:
| Package | Purpose | Key Features |
|---|---|---|
gnome-shell-extensions | Core extensions bundle | Base extensions, system integration |
gnome-tweaks | GUI customization tool | Advanced settings, theme management |
gnome-shell-extension-manager | Modern extension manager | Browse, install, manage extensions |
chrome-gnome-shell | Browser integration | Install extensions from extensions.gnome.org |
git | Version control | Clone theme repositories |
unzip | Archive extraction | Extract downloaded themes/icons |
Post-Installation Steps:
-
Enable Browser Integration:
- Install the GNOME Shell Integration browser extension for Chrome/Edge
- Or install GNOME Shell Integration for Firefox
-
Restart GNOME Shell:
bash1# On X112killall -3 gnome-shell34# On Wayland (logout and login required)5# Or press Alt+F2, type 'r', and press Enter -
Verify Installation:
bash1# Check GNOME Shell version2gnome-shell --version34# List installed extensions5gnome-extensions list67# Check extension status8gnome-extensions info [extension-name]
Advanced Customization Techniques
Using GNOME Tweaks
GNOME Tweaks provides access to advanced settings:
1# Launch GNOME Tweaks2gnome-tweaksKey Customization Areas:
- Appearance: Themes, background, icons, cursor
- Extensions: Enable/disable extensions
- Fonts: System fonts, scaling, hinting
- Keyboard & Mouse: Additional input settings
- Power: Laptop lid settings, power button behavior
- Startup Applications: Auto-start programs
- Top Bar: Clock format, calendar, battery percentage
- Window Titlebars: Titlebar buttons, actions
- Windows: Window focus, edge tiling, center new windows
Managing Extensions via Command Line
1# List all extensions2gnome-extensions list3
4# Enable an extension5gnome-extensions enable [email protected]6
7# Disable an extension8gnome-extensions disable [email protected]9
10# Show extension info11gnome-extensions info [email protected]12
13# Uninstall an extension14gnome-extensions uninstall [email protected]15
16# List enabled extensions only17gnome-extensions list --enabled18
19# Create new extension (for developers)20gnome-extensions create --name="My Extension" --uuid="[email protected]"GNOME Shell CSS Customization
For advanced users, GNOME Shell appearance can be customized via CSS:
Location: ~/.local/share/gnome-shell/extensions/[extension-name]/stylesheet.css
Example Custom CSS Tweaks:
1/* Customize panel (top bar) */2#panel {3 background-color: rgba(0, 0, 0, 0.8);4 height: 32px;5}6
7/* Customize panel text */8#panel .panel-button {9 color: #ffffff;10 font-weight: bold;11}12
13/* Customize workspace switcher */14.workspace-thumbnail {15 border: 2px solid #3584e4;16}17
18/* Overview background */19.workspace-background {20 background-color: #2e3436;21}DConf Editor for Deep System Settings
For even deeper customization, use DConf Editor:
1# Install dconf-editor2sudo apt install dconf-editor3
4# Launch5dconf-editor6
7# Or use gsettings from command line8# List all schemas9gsettings list-schemas | grep gnome10
11# Get all keys in a schema12gsettings list-keys org.gnome.desktop.interface13
14# Set a value15gsettings set org.gnome.desktop.interface enable-animations false16
17# Reset to default18gsettings reset org.gnome.desktop.interface enable-animationsUseful GSettings Paths:
org.gnome.desktop.interface- Interface settings (theme, icons, fonts)org.gnome.desktop.wm.preferences- Window manager preferencesorg.gnome.shell- Shell settingsorg.gnome.shell.extensions.*- Extension-specific settingsorg.gnome.desktop.peripherals- Input device settings
Troubleshooting
Extension Not Working After GNOME Update
1# Disable and re-enable extension2gnome-extensions disable [email protected]3gnome-extensions enable [email protected]4
5# Check extension compatibility6gnome-extensions info [email protected] | grep -i version7
8# View extension errors9journalctl -f -o cat /usr/bin/gnome-shellTheme Not Applying
1# Check theme directory permissions2ls -la ~/.themes/3ls -la ~/.local/share/themes/4
5# Ensure User Themes extension is enabled6gnome-extensions enable [email protected]7
8# Reset theme settings9gsettings reset org.gnome.desktop.interface gtk-theme10gsettings reset org.gnome.shell.extensions.user-theme nameClear Extension Cache
1# Remove extension cache2rm -rf ~/.cache/gnome-shell/3
4# Restart GNOME Shell (X11)5killall -3 gnome-shellAdditional Resources
Popular GNOME Extensions:
- Dash to Dock: macOS-like dock
- AppIndicator Support: Tray icons support
- Blur My Shell: Blur effects for shell elements
- Clipboard Indicator: Clipboard manager
- Desktop Icons NG: Icons on desktop
- ArcMenu: Alternative application menu
- Vitals: System monitoring in top bar
- GSConnect: KDE Connect integration
Theme Resources:
- GNOME Look - Themes, icons, cursors
- GNOME Extensions - Official extension repository
- Pling Store - Theme marketplace
- GTK Theme Development - Official GTK CSS documentation
Command Reference:
1# System information2gnome-shell --version3echo $XDG_CURRENT_DESKTOP4echo $XDG_SESSION_TYPE # wayland or x115
6# Theme directories7echo $XDG_DATA_HOME # ~/.local/share8echo $XDG_DATA_DIRS # /usr/local/share:/usr/share9
10# Reload GNOME settings11dconf update12
13# Export current settings14dconf dump / > gnome-settings-backup.txt15
16# Import settings17dconf load / < gnome-settings-backup.txt