Port to GTK 3.24 and recolour to the film palette

The GTK3 sheets targeted GTK 3.18 and broke at 3.20, when the CSS class
model was replaced by element nodes. On 3.24 they parsed but matched almost
nothing: buttons, entries, tabs, scales and scrollbars rendered as bare
rectangles. Rewritten against the node model.

gtk-3.0/
  gtk.css       colour definitions only - recolour the theme here
  widgets.css   all widget rules, node-selector based
  mate.css      MATE panel, applets, window list, Caja, terminal
  gtk-dark.css  alias of gtk.css (the theme is already dark)
  legacy/       the original 3.18 sheets, moved aside for reference

Palette retargeted to the WAR10CK window in Live Free or Die Hard:
bg #23425E, accent #BA6A07. Supporting shades derived with the original
theme's own ratios (raised x1.42, recessed x0.72). Text had to be lifted -
the old #868A8E scores 3.0:1 on #23425E, so normal text is #B4C4D2
(5.85:1) and bright text #E8F0F7 (9.06:1).

metacity-1/ pixmaps remapped by projecting each pixel onto the segment
between its two nearest source anchors and re-blending against the new
ones, so antialiased edges stay clean. Titlebar is ~7px taller, its text
is centred and no longer a hardcoded #6d7379 for both focus states, and
the idle window-button glyphs are white instead of a dim orange that
turned to mud on the lighter bar.

Scrollbars are deliberately not accent-coloured; @scrollbar_slider
(#454F5A) keeps them quiet at rest and findable on hover.

Fixes a transparent-body bug: GtkDialog and GtkAssistant do not use the
`window` CSS node in 3.20+, so every dialog, About box and file chooser
rendered as a hole through to the desktop.

Attribution and the GPL-3.0 modification notice added to README.md,
index.theme and metacity-theme-1.xml. Licence unchanged.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
zavage
2026-09-18 05:58:09 -06:00
co-authored by Claude Opus 5
parent 22e271b0ee
commit d56294b00f
37 changed files with 1830 additions and 28 deletions
+128
View File
@@ -1,6 +1,16 @@
# Diehard4
GTK3 Theme
> **This is a modified version of Diehard4.**
> Original theme by **obscurant** (2016). Modified in **September 2026** by
> **zavage**: the GTK3 sheets were rewritten for the post-3.20 CSS node model
> (the originals target GTK 3.18 and render almost nothing on 3.24), and the
> palette was retargeted to the on-screen colours from *Live Free or Die Hard*.
> See the sections at the end of this file for the full list of changes.
>
> Licensed GPL-3.0, same as the original. Original copyright is retained in
> `LICENSE` and in `metacity-1/metacity-theme-1.xml`.
![screenshot](http://i.imgur.com/7yelOkR.png)
Full rewrite of the gtk2/gtk3 themes. Includes themes for cinnamon, openbox, xfwm, pekwm and tint2. Unity support is included, but it's not so great.
@@ -31,3 +41,121 @@ v1.2
• gtk2 input padding
• gtk2 progress bar height
• Added style for Reddit Reader desklet in Cinnamon theme
---
## GTK3 port (v2.0, 2026-09-18)
The GTK3 half of this theme was written for GTK 3.18 and stopped working when
GTK 3.20 replaced the CSS class model with element nodes. On GTK 3.24 the old
sheets parsed but matched almost nothing, so buttons, entries, tabs, scales and
scrollbars rendered as bare rectangles.
`gtk-3.0/` has been rewritten against the current node model:
| file | contents |
|---|---|
| `gtk.css` | colour definitions only — recolour the theme here |
| `widgets.css` | all widget rules, node-selector based |
| `mate.css` | MATE panel, applets, window list, Caja, terminal |
| `gtk-dark.css` | alias of `gtk.css` (the theme is already dark) |
| `legacy/` | the original 3.18 sheets, unmodified, for reference |
Palette, metrics and design language are unchanged. Deliberate deviations,
all made because the original value no longer reads on 3.24:
* `trough_border_color` was `#111B25`, within one step of the window
background — scale, progressbar and switch troughs were invisible. Now
`@light_color`, the same border entries already used.
* Keyboard focus draws a faint dashed outline. The original set
`-GtkWidget-focus-line-width: 0`, which on 3.24 leaves no focus cue at all.
* Entries take an accent-coloured border on focus.
* `GtkSwitch` is new — it barely existed in MATE in 2016 and the original
never styled it.
* Notebook tab padding is `3px 10px` rather than `1px 8px`; the old value
is below the minimum tab height GTK now enforces.
Do not put `gtk-application-prefer-dark-theme` in `gtk-3.0/settings.ini`.
It makes GTK reload the theme, which re-reads the file, and applications hang
on startup. The theme ships without a `settings.ini` for that reason.
The GTK2 sheet (`gtk-2.0/gtkrc`) is untouched and still correct — GTK2 never
changed under it. It needs the `gtk2` and `gtk-engines` packages installed to
have any effect.
Window decorations come from `metacity-1/`, which Marco (MATE) reads directly.
Emerald is not required and has not been maintained since the Compiz Fusion
era.
### Screen-accurate recolour (2026-09-18)
Palette retargeted to the WAR10CK window in *Live Free or Die Hard*:
* `bg_color` `#23425E` — window and titlebar
* `selected_bg_color` `#BA6A07` — the orange edge bars and accents
Supporting shades are derived from those two with the original theme's own
ratios (raised `x1.42`, recessed `x0.72`). Text had to be lifted: the old
`#868A8E` scores only 3.0:1 on `#23425E`, so normal text is now `#B4C4D2`
(5.85:1) and bright text `#E8F0F7` (9.06:1).
The `metacity-1/` pixmaps were remapped the same way — each pixel is
projected onto the segment between its two nearest source anchors
(`#9F440D` orange, `#0D151D` navy, `#C5CBD1` glyph) and re-blended against
the new anchors, so antialiased edges stay clean. Originals are in
`metacity-1.orig/`.
Titlebar is taller: `title_vertical_pad` 0 -> 4 and `title_border` top/bottom
5/0 -> 2/2, roughly +7px. The titlebar pixmaps are drawn with
`height="height"` so they stretch to fit — no art changes needed. Title text
was hardcoded `#6d7379` for both focus states; it is now `#E8F0F7` focused /
`#8CA2B6` unfocused, and vertically centred with
`y="(height - title_height) / 2"` instead of the old `y="0-3"` fudge.
GTK headerbars (CSD apps) went from `min-height: 32px` to `40px` to match.
### Why the left bar has no diagonal corner
The Emerald original cut the orange bar at 45 degrees at the bottom-left. That
was tried here and reverted — **Marco cannot reproduce it.** Recording why, so
nobody burns an afternoon rediscovering it:
* **Marco ignores per-pixel alpha in frame images.** Transparent pixels
composite onto black, not onto the desktop, so a cut-away corner renders as a
black triangle over the wallpaper. Verified by placing a magenta window behind
the corner: the cut came out black, not magenta. Marco can only shape-clip the
`rounded_*` corners, which is a binary mask and not usable for this. Emerald
drew true ARGB decorations; Marco does not.
* Filling the cut with the frame colour instead does render correctly, but it
reads as the bar tapering into the border rather than a corner cut out of it,
which is not the effect — hence the revert.
* **Do not use `max()` or `min()` in a draw_ops expression.** Marco
*segfaults* when it draws a frame using one — no parse error, no warning, the
window manager dies and every window loses its decorations. It only crashes
once a frame is actually drawn, so a WM started with no windows open looks
fine. Plain arithmetic (`height - 13`) is safe, and Marco clamps negative
results on very short windows without complaint.
`GtkDialog` and `GtkAssistant` do **not** use the `window` CSS node in 3.20+ —
they are `dialog` and `assistant`. A theme that only styles `window` leaves
every dialog, About box, file chooser, colour/font picker and app chooser with
a fully transparent body that renders as a hole through to the desktop. All
three node names are covered in the toplevel background rule.
Window buttons: the `state` attribute in `metacity-theme-1.xml` is the
**mouse** state, not window focus — `normal` is idle and `prelight` is hover,
and the draw_ops names are misleading about which is which. The idle
minimise/maximise/close glyphs were a dim orange (`#7F5A29`) that worked on
the old near-black bar and turned to mud on `#23425E`; all three are now
`#E8F0F7`, with the orange square still appearing on hover.
Scrollbars are deliberately **not** accent-coloured. An always-on-screen
element in `#BA6A07` reads as an alarm, so the slider uses
`@scrollbar_slider` (`#454F5A`) — 1.63:1 against the trough at rest, rising
to 2.49:1 on hover so it is still easy to find and grab. Change that one
token in `gtk.css` to restyle every scrollbar; hover, active and disabled
are derived from it with `shade()`.
Marco caches the metacity theme, so after editing it you must switch the
Marco theme away and back for changes to show. GTK3 reloads CSS on file
change by itself.
+2
View File
@@ -0,0 +1,2 @@
/* Diehard4 is a dark theme already — the dark variant is the theme itself. */
@import url("gtk.css");
+66 -19
View File
@@ -1,22 +1,69 @@
/* Diehard4 — GTK 3.20+ port
*
* Original theme by obscurant (2016, GTK 3.18 era).
* Ported to the post-3.20 CSS node model. Palette and design language
* unchanged: flat surfaces, 2-3px radii, burnt-orange accent.
*
* Everything below is a colour definition; widget rules live in widgets.css.
* Recolour the theme by editing this block alone.
*/
@define-color bg_color #0D151D;
@define-color pre_murrine #9F440D;
/* ---- core palette ----
* Matched to the WAR10CK window in Live Free or Die Hard: the slate the
* window and titlebar are painted in, and the orange of the edge bars.
* The two screen-accurate values are bg_color and selected_bg_color; the
* rest are derived from them using the original theme's own ratios
* (raised = bg x1.42, recessed = bg x0.72).
*/
@define-color bg_color #23425E; /* window + titlebar (screen) */
@define-color dark_color #193044; /* recessed: entries, troughs */
@define-color light_color #325E85; /* raised: buttons, headers */
@define-color fg_color #B4C4D2; /* normal text 5.85:1 */
@define-color bright_fg_color #E8F0F7; /* titles, text on accent */
@define-color selected_bg_color #BA6A07; /* the accent (screen) */
@define-color selected_fg_color #E8F0F7;
@define-color menu_color #8CA2B6; /* menubar text, dim text */
@define-color link_color #D9964A;
@define-color scrollbar_slider #454F5A; /* deliberately quiet, not accent */
@define-color trough_border_color @light_color; /* was #111B25 — invisible on 3.24 */
@define-color fg_color #868A8E;
@define-color theme_bg_color #0D151D;
@define-color theme_fg_color #ABADB0;
@define-color selected_bg_color #9F440D;
@define-color selected_fg_color #ABADB0;
@define-color link_color #A37649;
@define-color base_color #0D151D;
@define-color border_color #0D151D;
@define-color dark_color #0C1219;
@define-color light_color #131F2A;
@define-color menu_color #545C64;
/* ---- derived / status ---- */
@define-color borders @light_color;
@define-color unfocused_borders @dark_color;
@define-color insensitive_fg_color alpha(@fg_color, 0.45);
@define-color insensitive_bg_color @bg_color;
@define-color insensitive_base_color @dark_color;
@define-color warning_color #B5761F;
@define-color error_color #A33A2E;
@define-color success_color #4E7A46;
@import url("gtk-main.css");
@import url("gtk-widgets-assets.css");
@import url("gnome-applications.css");
@import url("nemo.css");
@import url("unity.css");
@import url("unity-greeter.css");
/* ---- names third-party CSS and apps expect ---- */
@define-color theme_bg_color @bg_color;
@define-color theme_fg_color @fg_color;
@define-color theme_base_color @bg_color;
@define-color theme_text_color @fg_color;
@define-color theme_selected_bg_color @selected_bg_color;
@define-color theme_selected_fg_color @selected_fg_color;
@define-color theme_unfocused_bg_color @bg_color;
@define-color theme_unfocused_fg_color @fg_color;
@define-color theme_unfocused_base_color @bg_color;
@define-color theme_unfocused_text_color @fg_color;
@define-color theme_unfocused_selected_bg_color @selected_bg_color;
@define-color theme_unfocused_selected_fg_color @selected_fg_color;
@define-color base_color @bg_color;
@define-color text_color @fg_color;
@define-color tooltip_bg_color @dark_color;
@define-color tooltip_fg_color @bright_fg_color;
@define-color content_view_bg @bg_color;
@define-color placeholder_text_color alpha(@fg_color, 0.55);
/* ---- window manager hints (GTK client-side decorations) ---- */
@define-color wm_title @bright_fg_color;
@define-color wm_unfocused_title @menu_color;
@define-color wm_bg @bg_color;
@define-color wm_border @light_color;
@define-color wm_icon_close_bg @selected_bg_color;
@define-color wm_icon_close_fg @bright_fg_color;
@import url("widgets.css");
@import url("mate.css");
+22
View File
@@ -0,0 +1,22 @@
@define-color bg_color #0D151D;
@define-color pre_murrine #9F440D;
@define-color fg_color #868A8E;
@define-color theme_bg_color #0D151D;
@define-color theme_fg_color #ABADB0;
@define-color selected_bg_color #9F440D;
@define-color selected_fg_color #ABADB0;
@define-color link_color #A37649;
@define-color base_color #0D151D;
@define-color border_color #0D151D;
@define-color dark_color #0C1219;
@define-color light_color #131F2A;
@define-color menu_color #545C64;
@import url("gtk-main.css");
@import url("gtk-widgets-assets.css");
@import url("gnome-applications.css");
@import url("nemo.css");
@import url("unity.css");
@import url("unity-greeter.css");
+169
View File
@@ -0,0 +1,169 @@
/* Diehard4 — MATE desktop specifics (panel, applets, Caja, terminal). */
/*********
* panel *
*********/
.mate-panel-menu-bar,
PanelToplevel,
PanelWidget,
panel-toplevel,
#PanelPlug {
background-color: @dark_color;
background-image: none;
color: @menu_color;
border: none;
}
.mate-panel-menu-bar menubar,
.mate-panel-menu-bar > menubar {
background-color: transparent;
color: @menu_color;
}
.mate-panel-menu-bar menubar > menuitem {
padding: 2px 8px;
color: @menu_color;
background-color: transparent;
}
.mate-panel-menu-bar menubar > menuitem:hover {
background-color: @selected_bg_color;
color: @selected_fg_color;
}
.mate-panel-menu-bar button,
#PanelApplet button,
MatePanelAppletFrameDBus button {
min-height: 16px;
min-width: 16px;
padding: 1px 4px;
border: none;
border-radius: 2px;
background-color: transparent;
background-image: none;
color: @menu_color;
box-shadow: none;
}
.mate-panel-menu-bar button:hover,
#PanelApplet button:hover {
background-color: @selected_bg_color;
color: @selected_fg_color;
}
.mate-panel-menu-bar button:checked,
.mate-panel-menu-bar button:active,
#PanelApplet button:checked {
background-color: @light_color;
color: @bright_fg_color;
}
#PanelApplet,
#PanelApplet label,
#PanelApplet image { color: @menu_color; }
.mate-panel-menu-bar .toolbar { background-color: transparent; }
/* clock / notification area separators */
.mate-panel-menu-bar separator,
#PanelApplet separator { background-color: @light_color; }
/*****************
* window list *
*****************/
#tasklist-button,
.wnck-tasklist button {
min-height: 16px;
padding: 1px 6px;
border: none;
border-radius: 2px;
background-color: transparent;
color: @menu_color;
font-weight: normal;
}
#tasklist-button:hover,
.wnck-tasklist button:hover {
background-color: @light_color;
color: @bright_fg_color;
}
#tasklist-button:checked,
#tasklist-button:active,
.wnck-tasklist button:checked {
background-color: @selected_bg_color;
color: @selected_fg_color;
}
/****************
* workspaces *
****************/
.wnck-pager {
background-color: @dark_color;
color: @light_color;
}
.wnck-pager:hover { background-color: @light_color; }
.wnck-pager:selected,
.wnck-pager:active {
background-color: @selected_bg_color;
color: @selected_fg_color;
}
/***************
* run dialog *
***************/
#mate-panel-run-dialog { background-color: @bg_color; }
/*********
* Caja *
*********/
.caja-notebook,
.caja-side-pane,
.caja-side-pane notebook { background-color: @bg_color; }
.caja-desktop-window,
.caja-desktop-window .view {
background-color: transparent;
color: @bright_fg_color;
text-shadow: 1px 1px 2px alpha(black, 0.9);
}
.caja-canvas-item:selected,
.caja-desktop-window .view:selected {
background-color: @selected_bg_color;
color: @selected_fg_color;
text-shadow: none;
}
.caja-pathbar button,
.caja-location-entry { border-radius: 2px; }
.caja-inactive-pane .view { background-color: shade(@bg_color, 0.9); }
/*******************
* mate-terminal *
*******************/
TerminalWindow notebook > header > tabs > tab,
terminal-window notebook > header > tabs > tab { padding: 4px 8px; }
TerminalScreen,
vte-terminal { background-color: @dark_color; color: @fg_color; }
/*******************
* mate-menu / brisk *
*******************/
#MintMenu,
.mintmenu { background-color: @dark_color; }
/******************
* screensaver / *
* lock dialog *
******************/
#lock-dialog {
background-color: @bg_color;
border: 1px solid @light_color;
border-radius: 3px;
color: @fg_color;
}
+1434
View File
File diff suppressed because it is too large Load Diff
+1 -1
View File
@@ -1,7 +1,7 @@
[Desktop Entry]
Type=X-GNOME-Metatheme
Name=Diehard4
Comment=It's flat and it's blue
Comment=It's flat and it's blue - Live Free or Die Hard colours, GTK3 port by zavage
Encoding=UTF-8
[X-GNOME-Metatheme]
Binary file not shown.

Before

Width:  |  Height:  |  Size: 311 B

After

Width:  |  Height:  |  Size: 243 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 311 B

After

Width:  |  Height:  |  Size: 243 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 311 B

After

Width:  |  Height:  |  Size: 243 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 312 B

After

Width:  |  Height:  |  Size: 238 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 311 B

After

Width:  |  Height:  |  Size: 243 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 312 B

After

Width:  |  Height:  |  Size: 238 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 310 B

After

Width:  |  Height:  |  Size: 227 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 308 B

After

Width:  |  Height:  |  Size: 244 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 B

After

Width:  |  Height:  |  Size: 91 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 B

After

Width:  |  Height:  |  Size: 91 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 309 B

After

Width:  |  Height:  |  Size: 225 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 316 B

After

Width:  |  Height:  |  Size: 250 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 920 B

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 101 B

After

Width:  |  Height:  |  Size: 96 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 150 B

After

Width:  |  Height:  |  Size: 91 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 150 B

After

Width:  |  Height:  |  Size: 92 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 143 B

After

Width:  |  Height:  |  Size: 72 B

+8 -8
View File
@@ -2,8 +2,8 @@
<metacity_theme>
<info>
<name>Diehard4</name>
<author>obscurant</author>
<copyright>GPL</copyright>
<author>obscurant; GTK3 port and recolour by zavage</author>
<copyright>GPL v3</copyright>
<date>7/26/11</date>
<description>Port of Diehard4 Emerald</description>
</info>
@@ -20,8 +20,8 @@
<distance name="right_titlebar_edge" value="5"/>
<distance name="button_width" value="13"/>
<distance name="button_height" value="13"/>
<distance name="title_vertical_pad" value="0"/>
<border name="title_border" left="0" right="0" top="5" bottom="0"/>
<distance name="title_vertical_pad" value="4"/>
<border name="title_border" left="0" right="0" top="2" bottom="2"/>
<border name="button_border" left="2" right="2" top="3" bottom="0"/>
</frame_geometry>
@@ -33,8 +33,8 @@
<distance name="right_titlebar_edge" value="7"/>
<distance name="button_width" value="13"/>
<distance name="button_height" value="13"/>
<distance name="title_vertical_pad" value="0"/>
<border name="title_border" left="10" right="0" top="5" bottom="0"/>
<distance name="title_vertical_pad" value="4"/>
<border name="title_border" left="10" right="0" top="2" bottom="2"/>
<border name="button_border" left="2" right="2" top="3" bottom="0"/>
</frame_geometry>
@@ -59,11 +59,11 @@
</frame_geometry>
<draw_ops name="title-text-focused">
<title color="#6d7379" x="IconTitleSpacing" y="0-3"/>
<title color="#E8F0F7" x="IconTitleSpacing" y="(height - title_height) / 2"/>
</draw_ops>
<draw_ops name="title-text-unfocused">
<title color="#6d7379" x="IconTitleSpacing" y="0-3"/>
<title color="#8CA2B6" x="IconTitleSpacing" y="(height - title_height) / 2"/>
</draw_ops>
<draw_ops name="blank">
Binary file not shown.

Before

Width:  |  Height:  |  Size: 161 B

After

Width:  |  Height:  |  Size: 111 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 110 B

After

Width:  |  Height:  |  Size: 101 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 153 B

After

Width:  |  Height:  |  Size: 96 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 158 B

After

Width:  |  Height:  |  Size: 97 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 158 B

After

Width:  |  Height:  |  Size: 97 B