Omarchy GTK Theme

October 10, 2025 ยท View on GitHub

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.

https://github.com/user-attachments/assets/8e303c25-ec9b-4026-ac5c-f580e9f0c865

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

Author

Created by @iamdothash