custom-css.el - Style Emacs’s GTK widgets with custom CSS

Style the GTK widgets (menu bar, scroll bars, tool bar, context menus) in your Emacs with custom CSS snippets. Works with GTK only.

This is experimental and hacky. Expect breaking changes.

Installation

Clone the repository and put the path in your load path. Then, require custom-css in your init file:

(add-to-list 'load-path "/path/to/custom-css")
(require 'custom-css)

Or use use-package:

(use-package custom-css
  :load-path "path/to/custom-css")

The package needs a native C module to be compiled and loaded into Emacs. The package will try to build the module when loading. This needs GTK, a C compiler, make, and pkg-config to be installed. Currently, this has only been tested on GNU/Linux.

Usage

Use custom-css-load to load a custom CSS snippet. Every CSS snippet is associated with a symbol to identify it. Use it to unload it via custom-css-unload.

You can inspect Emacs’s GTK widgets and experiment with CSS via: M-x and (x-gtk-debug)

Customizing the Scroll-Bar Appearance

Customizing the scroll bar is a bit tricky because the width is not only determined by CSS. The minor mode custom-css-scroll-bar-mode simplifies modifying the scroll-bar appearance.

Customize custom-css-scroll-bar-css and custom-css-scroll-bar-width.

Optionally, use on-demand-scroll-bar-mode to show the scroll bar only when needed: https://github.com/florommel/on-demand-scroll-bar

Alternatives

You can write custom CSS into $HOME/.config/gtk-3.0/gtk.css. Use window#Emacs in all your CSS selectors to target Emacs only.