Omarchy GTK Theme

A comprehensive GTK4 theme featuring Tokyo Night colors with sharp, Hyprland-inspired corners. This showcase application demonstrates the theme across all GTK4 and Adwaita widgets.

omarchy_gtk_theme.mp4

Universal Theme - Works with Any GTK Binding

The src/style.css file is language-agnostic and works with ANY GTK4 binding, not just JavaScript. You can use this theme in your projects regardless of your programming language:

Python (PyGObject)

import gi
gi.require_version('Gtk', '4.0')
from gi.repository import Gtk, Gdk

css_provider = Gtk.CssProvider()
css_provider.load_from_path('style.css')
Gtk.StyleContext.add_provider_for_display(
    Gdk.Display.get_default(),
    css_provider,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
)

Rust (gtk4-rs)

use gtk4::prelude::*;
use gtk4::{CssProvider, StyleContext};

let provider = CssProvider::new();
provider.load_from_path("style.css");
StyleContext::add_provider_for_display(
    &gdk4::Display::default().expect("display"),
    &provider,
    gtk4::STYLE_PROVIDER_PRIORITY_APPLICATION,
);

C (GTK4)

GtkCssProvider *provider = gtk_css_provider_new();
gtk_css_provider_load_from_path(provider, "style.css");
gtk_style_context_add_provider_for_display(
    gdk_display_get_default(),
    GTK_STYLE_PROVIDER(provider),
    GTK_STYLE_PROVIDER_PRIORITY_APPLICATION
);

Vala

var provider = new Gtk.CssProvider();
provider.load_from_path("style.css");
Gtk.StyleContext.add_provider_for_display(
    Gdk.Display.get_default(),
    provider,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
);

Simply copy src/style.css to your project and load it using the appropriate method for your language binding.

Features

• Complete Widget Coverage: Showcases all major GTK4 and Adwaita components
• Community Links: Direct access to YouTube video, manual, GitHub, Discord, and website
• Tokyo Night Theme: Beautiful dark theme with sharp corners (Hyprland-inspired)
• Custom Styling: Complete CSS override with Tokyo Night color palette
• Universal CSS: Works with any GTK binding (Python, Rust, C, Vala, JavaScript, etc.)
• Sharp Corners: Zero border-radius throughout for a modern, tiling WM aesthetic
• Organized Categories: Components grouped by type for easy browsing
  • Buttons (standard, toggle, icon, split buttons)
  • Text Inputs (entries, text views, search, password)
  • Lists & Trees (list boxes, flow boxes, action rows, expander rows)
  • Containers (boxes, frames, paned, notebook, stack, carousel)
  • Dialogs & Popovers (message dialogs, popovers, toasts, info bars)
  • Miscellaneous (progress bars, spinners, calendars, avatars)
• Interactive Examples: All components are functional and interactive
• Modern Architecture: Built with ES6 modules and GObject introspection

Requirements

• GJS (GNOME JavaScript)
• GTK 4.0
• libadwaita 1.0
• Node.js and npm (for development)

Note: The CSS theme file (src/style.css) has no dependencies and works with any GTK4 binding.

Installation

Installing Dependencies (Ubuntu/Debian)

sudo apt install gjs libgtk-4-dev libadwaita-1-dev

Installing Dependencies (Fedora)

sudo dnf install gjs gtk4-devel libadwaita-devel

Installing Dependencies (Arch Linux)

sudo pacman -S gjs gtk4 libadwaita

Running the Application

Using npm

npm start

Using GJS directly

gjs -m src/main.js

Making it executable

chmod +x src/main.js
./src/main.js

Theme Customization

The application uses a custom Tokyo Night theme with sharp corners. You can customize the colors by editing src/style.css:

Tokyo Night Color Variables

The theme defines the following color variables based on Tokyo Night:

@define-color background #1a1b26; /* Main background */
@define-color foreground #c0caf5; /* Main text color */
@define-color color0 #15161e; /* Black */
@define-color color1 #f7768e; /* Red */
@define-color color2 #9ece6a; /* Green */
@define-color color3 #e0af68; /* Yellow */
@define-color color4 #7aa2f7; /* Blue */
@define-color color5 #bb9af7; /* Magenta */
@define-color color6 #7dcfff; /* Cyan */
@define-color color7 #a9b1d6; /* White */
@define-color color8 #414868; /* Bright black */

Adwaita Color Mappings

These colors are mapped to Adwaita's semantic colors:

• accent_bg_color: Blue (color4) - Used for primary actions
• accent_color: Cyan (color6) - Used for highlights
• destructive_bg_color: Red (color1) - Used for destructive actions
• success_bg_color: Green (color2) - Used for success states
• warning_bg_color: Yellow (color3) - Used for warnings

Sharp Corners

All widgets have border-radius: 0 applied for a clean, tiling window manager aesthetic inspired by Hyprland. This affects:

• Windows and dialogs
• Buttons and entries
• Cards and containers
• Popovers and menus
• All other UI elements

Development

This project uses ES6 modules with GJS. Each component is organized into separate files for maintainability.

Components Demonstrated

Buttons

• Standard buttons (normal, suggested, destructive, pill)
• Toggle buttons and check buttons
• Icon buttons (normal, circular, flat)
• Split buttons
• Menu buttons
• Link buttons
• Switch widgets

Text Inputs

• Entry widgets
• Password entries with peek icon
• Search entries
• Entry rows (Adwaita)
• Multi-line text views
• Editable labels
• Spin buttons
• Combo boxes and dropdowns

Lists

• List boxes with selection
• Action rows with icons and suffixes
• Expander rows with sub-items
• Flow boxes for grid layouts
• List boxes with checkboxes

Containers

• Boxes (horizontal and vertical)
• Frames
• Paned containers with resizable splits
• Notebooks with tabs
• Stacks with sidebar/switcher
• Carousels with indicators
• Clamps for responsive layouts
• Bins

Dialogs & Overlays

• Message dialogs
• Alert dialogs
• Popovers
• Toast notifications
• About windows
• Info bars (info, warning, error)
• Banners

Miscellaneous

• Progress bars (determinate and indeterminate)
• Level bars
• Spinners
• Separators
• Images and pictures
• Calendars
• Status pages
• Avatars
• View switchers
• Window titles
• Button content (icon + label)

Use Cases

• Universal Theme: Copy src/style.css to any GTK4 application (Python, Rust, C, Vala, JavaScript)
• Theme Development: Test how your GTK theme looks with all widgets
• Application Development: Reference for implementing GTK/Adwaita components
• Design: Visual reference for GNOME HIG patterns
• Learning: Educational tool for GTK4 and Adwaita

Resources

• GTK Documentation
• Adwaita Documentation
• GNOME Human Interface Guidelines
• GJS Guide

Author

Created by @iamdothash