diff --git a/build.ts b/build.ts
index 50b4b01..a83e8c4 100644
--- a/build.ts
+++ b/build.ts
@@ -11,7 +11,7 @@ import { toWindowsTerminalTheme } from "./exporters/windowsTerminal.ts";
 import { toCss } from "./exporters/css.ts";
 import { toVscodeTheme } from "./exporters/vscode.ts";
 import { toHelixTheme } from "./exporters/helix.ts";
-import { toGtkTheme } from "./exporters/gtk.ts";
+import { toGtk3Theme, toGtk4Theme } from "./exporters/gtk.ts";
 
 const { "vsce-path": vscePath } = parseArgs(
   Deno.args,
@@ -69,8 +69,14 @@ const buildSingleThemes = async (theme: Theme, type: string) => {
   const helix = await toHelixTheme(theme);
   await Deno.writeTextFile(`build/${pathType}/helix.toml`, helix);
 
-  const gtk = await toGtkTheme(theme);
-  await Deno.writeTextFile(`build/${pathType}/gtk.css`, gtk);
+  const gtk3 = await toGtk3Theme(theme);
+  await Deno.writeTextFile(`build/${pathType}/gtk-3.css`, gtk3);
+
+  const gtk4 = await toGtk4Theme(theme);
+  const gtkTheme = `${gtk4}
+
+${gtk3}`;
+  await Deno.writeTextFile(`build/${pathType}/gtk-4.css`, gtkTheme);
 
   const css = toCss(theme);
   await Deno.writeTextFile(`build/${pathType}/kleur.css`, css);
diff --git a/build/dark/gtk-3.css b/build/dark/gtk-3.css
new file mode 100644
index 0000000..764bd9a
--- /dev/null
+++ b/build/dark/gtk-3.css
@@ -0,0 +1,102 @@
+@define-color accent_color #9287e4;
+@define-color accent_bg_color #9287e4;
+@define-color accent_fg_color #1d1a36;
+
+@define-color destructive_color #fa5f54;
+@define-color destructive_bg_color #fa5f54;
+@define-color destructive_fg_color #430203;
+
+@define-color success_color #00a94f;
+@define-color success_bg_color #00a94f;
+@define-color success_fg_color #00240a;
+
+@define-color warning_color #ca8400;
+@define-color warning_bg_color #ca8400;
+@define-color warning_fg_color #2d1900;
+
+@define-color error_color #fa5f54;
+@define-color error_bg_color #fa5f54;
+@define-color error_fg_color #430203;
+
+@define-color window_bg_color #070710;
+@define-color window_fg_color #c6c6ca;
+
+@define-color view_bg_color #070710;
+@define-color view_fg_color #dfe0e1;
+
+@define-color headerbar_bg_color #0c0c16;
+@define-color headerbar_fg_color #c6c6ca;
+@define-color headerbar_border_color rgba(12, 12, 22, 0.7);
+@define-color headerbar_backdrop_color @window_bg_color;
+@define-color headerbar_shade_color rgba(0, 0, 0, 0.07);
+@define-color headerbar_darker_shade_color rgba(0, 0, 0, 0.07);
+
+@define-color sidebar_bg_color #0c0c16;
+@define-color sidebar_fg_color #c6c6ca;
+@define-color sidebar_backdrop_color @window_bg_color;
+@define-color sidebar_shade_color rgba(0, 0, 0, 0.07);
+
+@define-color secondary_sidebar_bg_color @sidebar_bg_color;
+@define-color secondary_sidebar_fg_color @sidebar_fg_color;
+@define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
+@define-color secondary_sidebar_shade_color @sidebar_shade_color;
+
+@define-color card_bg_color #0c0c16;
+@define-color card_fg_color #c6c6ca;
+@define-color card_shade_color rgba(0, 0, 0, 0.07);
+
+@define-color dialog_bg_color #0c0c16;
+@define-color dialog_fg_color #c6c6ca;
+
+@define-color popover_bg_color #0c0c16;
+@define-color popover_fg_color #c6c6ca;
+@define-color popover_shade_color rgba(0, 0, 0, 0.07);
+
+@define-color shade_color rgba(0, 0, 0, 0.07);
+@define-color scrollbar_outline_color #15151f;
+
+@define-color blue_1 #004f71;
+@define-color blue_2 #006791;
+@define-color blue_3 #0080b2;
+@define-color blue_4 #009dd7;
+@define-color blue_5 #00b8f7;
+@define-color green_1 #005622;
+@define-color green_2 #00702f;
+@define-color green_3 #008b3d;
+@define-color green_4 #00a94f;
+@define-color green_5 #00c562;
+@define-color yellow_1 #694100;
+@define-color yellow_2 #885500;
+@define-color yellow_3 #885500;
+@define-color yellow_4 #a86b00;
+@define-color yellow_5 #ca8400;
+@define-color orange_1 #694100;
+@define-color orange_2 #885500;
+@define-color orange_3 #a86b00;
+@define-color orange_4 #ca8400;
+@define-color orange_5 #e99c00;
+@define-color red_1 #931415;
+@define-color red_2 #ba2523;
+@define-color red_3 #dd3b36;
+@define-color red_4 #fa5f54;
+@define-color red_5 #ff8b7e;
+@define-color purple_1 #4a427a;
+@define-color purple_2 #60589c;
+@define-color purple_3 #60589c;
+@define-color purple_4 #776dbe;
+@define-color purple_5 #9287e4;
+@define-color brown_1 #ca8400;
+@define-color brown_2 #ca8400;
+@define-color brown_3 #ca8400;
+@define-color brown_4 #ca8400;
+@define-color brown_5 #ca8400;
+@define-color light_1 #15151f;
+@define-color light_2 #15151f;
+@define-color light_3 #15151f;
+@define-color light_4 #15151f;
+@define-color light_5 #15151f;
+@define-color dark_1 #0c0c16;
+@define-color dark_2 #0c0c16;
+@define-color dark_3 #0c0c16;
+@define-color dark_4 #0c0c16;
+@define-color dark_5 #0c0c16;
diff --git a/build/dark/gtk.css b/build/dark/gtk-4.css
similarity index 92%
rename from build/dark/gtk.css
rename to build/dark/gtk-4.css
index 36b8137..b83818a 100644
--- a/build/dark/gtk.css
+++ b/build/dark/gtk-4.css
@@ -69,49 +69,64 @@
   --scrollbar-outline-color: #15151f;
 }
 
+
 @define-color accent_color #9287e4;
-@define-color accent_bg_color #1d1a36;
-@define-color accent_fg_color #9287e4;
+@define-color accent_bg_color #9287e4;
+@define-color accent_fg_color #1d1a36;
+
 @define-color destructive_color #fa5f54;
-@define-color destructive_bg_color #430203;
-@define-color destructive_fg_color #fa5f54;
+@define-color destructive_bg_color #fa5f54;
+@define-color destructive_fg_color #430203;
+
 @define-color success_color #00a94f;
-@define-color success_bg_color #00240a;
-@define-color success_fg_color #00a94f;
+@define-color success_bg_color #00a94f;
+@define-color success_fg_color #00240a;
+
 @define-color warning_color #ca8400;
-@define-color warning_bg_color #2d1900;
-@define-color warning_fg_color #ca8400;
+@define-color warning_bg_color #ca8400;
+@define-color warning_fg_color #2d1900;
+
 @define-color error_color #fa5f54;
-@define-color error_bg_color #430203;
-@define-color error_fg_color #fa5f54;
+@define-color error_bg_color #fa5f54;
+@define-color error_fg_color #430203;
+
 @define-color window_bg_color #070710;
 @define-color window_fg_color #c6c6ca;
+
 @define-color view_bg_color #070710;
 @define-color view_fg_color #dfe0e1;
+
 @define-color headerbar_bg_color #0c0c16;
 @define-color headerbar_fg_color #c6c6ca;
 @define-color headerbar_border_color rgba(12, 12, 22, 0.7);
 @define-color headerbar_backdrop_color @window_bg_color;
 @define-color headerbar_shade_color rgba(0, 0, 0, 0.07);
 @define-color headerbar_darker_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color sidebar_bg_color #0c0c16;
 @define-color sidebar_fg_color #c6c6ca;
 @define-color sidebar_backdrop_color @window_bg_color;
 @define-color sidebar_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color secondary_sidebar_bg_color @sidebar_bg_color;
 @define-color secondary_sidebar_fg_color @sidebar_fg_color;
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_shade_color @sidebar_shade_color;
+
 @define-color card_bg_color #0c0c16;
 @define-color card_fg_color #c6c6ca;
 @define-color card_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color dialog_bg_color #0c0c16;
 @define-color dialog_fg_color #c6c6ca;
+
 @define-color popover_bg_color #0c0c16;
 @define-color popover_fg_color #c6c6ca;
 @define-color popover_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color shade_color rgba(0, 0, 0, 0.07);
 @define-color scrollbar_outline_color #15151f;
+
 @define-color blue_1 #004f71;
 @define-color blue_2 #006791;
 @define-color blue_3 #0080b2;
diff --git a/build/light/gtk-3.css b/build/light/gtk-3.css
new file mode 100644
index 0000000..26b0af2
--- /dev/null
+++ b/build/light/gtk-3.css
@@ -0,0 +1,102 @@
+@define-color accent_color #006088;
+@define-color accent_bg_color #006088;
+@define-color accent_fg_color #72e4ff;
+
+@define-color destructive_color #af201f;
+@define-color destructive_bg_color #af201f;
+@define-color destructive_fg_color #ffc7be;
+
+@define-color success_color #00682b;
+@define-color success_bg_color #00682b;
+@define-color success_fg_color #5cf090;
+
+@define-color warning_color #804f00;
+@define-color warning_bg_color #804f00;
+@define-color warning_fg_color #ffcd6d;
+
+@define-color error_color #af201f;
+@define-color error_bg_color #af201f;
+@define-color error_fg_color #ffc7be;
+
+@define-color window_bg_color #eff0f6;
+@define-color window_fg_color #121315;
+
+@define-color view_bg_color #eff0f6;
+@define-color view_fg_color #000000;
+
+@define-color headerbar_bg_color #ebecf2;
+@define-color headerbar_fg_color #121315;
+@define-color headerbar_border_color rgba(235, 236, 242, 0.7);
+@define-color headerbar_backdrop_color @window_bg_color;
+@define-color headerbar_shade_color rgba(0, 0, 0, 0.07);
+@define-color headerbar_darker_shade_color rgba(0, 0, 0, 0.07);
+
+@define-color sidebar_bg_color #ebecf2;
+@define-color sidebar_fg_color #121315;
+@define-color sidebar_backdrop_color @window_bg_color;
+@define-color sidebar_shade_color rgba(0, 0, 0, 0.07);
+
+@define-color secondary_sidebar_bg_color @sidebar_bg_color;
+@define-color secondary_sidebar_fg_color @sidebar_fg_color;
+@define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
+@define-color secondary_sidebar_shade_color @sidebar_shade_color;
+
+@define-color card_bg_color #ebecf2;
+@define-color card_fg_color #121315;
+@define-color card_shade_color rgba(0, 0, 0, 0.07);
+
+@define-color dialog_bg_color #ebecf2;
+@define-color dialog_fg_color #121315;
+
+@define-color popover_bg_color #ebecf2;
+@define-color popover_fg_color #121315;
+@define-color popover_shade_color rgba(0, 0, 0, 0.07);
+
+@define-color shade_color rgba(0, 0, 0, 0.07);
+@define-color scrollbar_outline_color #e7e8ee;
+
+@define-color blue_1 #009bd3;
+@define-color blue_2 #007bab;
+@define-color blue_3 #006088;
+@define-color blue_4 #004665;
+@define-color blue_5 #003047;
+@define-color green_1 #00a74e;
+@define-color green_2 #00853a;
+@define-color green_3 #00682b;
+@define-color green_4 #004d1d;
+@define-color green_5 #003512;
+@define-color yellow_1 #c78200;
+@define-color yellow_2 #a16600;
+@define-color yellow_3 #a16600;
+@define-color yellow_4 #804f00;
+@define-color yellow_5 #5f3900;
+@define-color orange_1 #c78200;
+@define-color orange_2 #a16600;
+@define-color orange_3 #804f00;
+@define-color orange_4 #5f3900;
+@define-color orange_5 #422700;
+@define-color red_1 #f85b51;
+@define-color red_2 #d53631;
+@define-color red_3 #af201f;
+@define-color red_4 #850f11;
+@define-color red_5 #600507;
+@define-color purple_1 #9085e1;
+@define-color purple_2 #7269b7;
+@define-color purple_3 #7269b7;
+@define-color purple_4 #5a5192;
+@define-color purple_5 #423b6e;
+@define-color brown_1 #804f00;
+@define-color brown_2 #804f00;
+@define-color brown_3 #804f00;
+@define-color brown_4 #804f00;
+@define-color brown_5 #804f00;
+@define-color light_1 #e7e8ee;
+@define-color light_2 #e7e8ee;
+@define-color light_3 #e7e8ee;
+@define-color light_4 #e7e8ee;
+@define-color light_5 #e7e8ee;
+@define-color dark_1 #ebecf2;
+@define-color dark_2 #ebecf2;
+@define-color dark_3 #ebecf2;
+@define-color dark_4 #ebecf2;
+@define-color dark_5 #ebecf2;
diff --git a/build/light/gtk.css b/build/light/gtk-4.css
similarity index 92%
rename from build/light/gtk.css
rename to build/light/gtk-4.css
index f94c3e2..d12efd8 100644
--- a/build/light/gtk.css
+++ b/build/light/gtk-4.css
@@ -69,49 +69,64 @@
   --scrollbar-outline-color: #e7e8ee;
 }
 
+
 @define-color accent_color #006088;
-@define-color accent_bg_color #72e4ff;
-@define-color accent_fg_color #006088;
+@define-color accent_bg_color #006088;
+@define-color accent_fg_color #72e4ff;
+
 @define-color destructive_color #af201f;
-@define-color destructive_bg_color #ffc7be;
-@define-color destructive_fg_color #af201f;
+@define-color destructive_bg_color #af201f;
+@define-color destructive_fg_color #ffc7be;
+
 @define-color success_color #00682b;
-@define-color success_bg_color #5cf090;
-@define-color success_fg_color #00682b;
+@define-color success_bg_color #00682b;
+@define-color success_fg_color #5cf090;
+
 @define-color warning_color #804f00;
-@define-color warning_bg_color #ffcd6d;
-@define-color warning_fg_color #804f00;
+@define-color warning_bg_color #804f00;
+@define-color warning_fg_color #ffcd6d;
+
 @define-color error_color #af201f;
-@define-color error_bg_color #ffc7be;
-@define-color error_fg_color #af201f;
+@define-color error_bg_color #af201f;
+@define-color error_fg_color #ffc7be;
+
 @define-color window_bg_color #eff0f6;
 @define-color window_fg_color #121315;
+
 @define-color view_bg_color #eff0f6;
 @define-color view_fg_color #000000;
+
 @define-color headerbar_bg_color #ebecf2;
 @define-color headerbar_fg_color #121315;
 @define-color headerbar_border_color rgba(235, 236, 242, 0.7);
 @define-color headerbar_backdrop_color @window_bg_color;
 @define-color headerbar_shade_color rgba(0, 0, 0, 0.07);
 @define-color headerbar_darker_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color sidebar_bg_color #ebecf2;
 @define-color sidebar_fg_color #121315;
 @define-color sidebar_backdrop_color @window_bg_color;
 @define-color sidebar_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color secondary_sidebar_bg_color @sidebar_bg_color;
 @define-color secondary_sidebar_fg_color @sidebar_fg_color;
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_shade_color @sidebar_shade_color;
+
 @define-color card_bg_color #ebecf2;
 @define-color card_fg_color #121315;
 @define-color card_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color dialog_bg_color #ebecf2;
 @define-color dialog_fg_color #121315;
+
 @define-color popover_bg_color #ebecf2;
 @define-color popover_fg_color #121315;
 @define-color popover_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color shade_color rgba(0, 0, 0, 0.07);
 @define-color scrollbar_outline_color #e7e8ee;
+
 @define-color blue_1 #009bd3;
 @define-color blue_2 #007bab;
 @define-color blue_3 #006088;
diff --git a/build/vscode/kleur-code-0.3.0.vsix b/build/vscode/kleur-code-0.3.0.vsix
index bdbc2fe..068526c 100644
Binary files a/build/vscode/kleur-code-0.3.0.vsix and b/build/vscode/kleur-code-0.3.0.vsix differ
diff --git a/exporters/gtk.ts b/exporters/gtk.ts
index 88fa54b..ba48e6e 100644
--- a/exporters/gtk.ts
+++ b/exporters/gtk.ts
@@ -1,7 +1,12 @@
 import { Theme } from "../palettes.ts";
 import { toMustache } from "./mustache.ts";
 
-export const toGtkTheme = async (theme: Theme) => {
-  const template = await Deno.readTextFile("templates/gtk.mustache");
+export const toGtk3Theme = async (theme: Theme) => {
+  const template = await Deno.readTextFile("templates/gtk-3.mustache");
+  return toMustache(theme, template);
+};
+
+export const toGtk4Theme = async (theme: Theme) => {
+  const template = await Deno.readTextFile("templates/gtk-4.mustache");
   return toMustache(theme, template);
 };
diff --git a/templates/gtk.mustache b/templates/gtk-3.mustache
similarity index 56%
rename from templates/gtk.mustache
rename to templates/gtk-3.mustache
index 235ff36..57c427d 100644
--- a/templates/gtk.mustache
+++ b/templates/gtk-3.mustache
@@ -1,117 +1,60 @@
-:root {
-  --accent-blue: #{{blue-hex}};
-  --accent-teal: #{{teal-hex}};
-  --accent-green: #{{green-hex}};
-  --accent-yellow: #{{orange-hex}};
-  --accent-orange: #{{orange-hex}};
-  --accent-red: #{{red-hex}};
-  --accent-pink: #{{purple-hex}};
-  --accent-purple: #{{purple-hex}};
-  --accent-slate: #{{overlay-hex}};
-
-  --accent-color: #{{primary-hex}};
-  --accent-bg-color: #{{primary-hex}};
-  --accent-fg-color: #{{primary-100-hex}};
-
-  --destructive-color: #{{red-hex}};
-  --destructive-bg-color: #{{red-hex}};
-  --destructive-fg-color: #{{red-100-hex}};
-
-  --success-color: #{{green-hex}};
-  --success-bg-color: #{{green-hex}};
-  --success-fg-color: #{{green-100-hex}};
-
-  --warning-color: #{{orange-hex}};
-  --warning-bg-color: #{{orange-hex}};
-  --warning-fg-color: #{{orange-100-hex}};
-
-  --error-color: #{{red-hex}};
-  --error-bg-color: #{{red-hex}};
-  --error-fg-color: #{{red-100-hex}};
-
-  --window-bg-color: #{{background-hex}};
-  --window-fg-color: #{{base07-hex}};
-
-  --view-bg-color: #{{background-hex}};
-  --view-fg-color: #{{base-800-hex}};
-
-  --headerbar-bg-color: #{{surface-hex}};
-  --headerbar-fg-color: #{{base07-hex}};
-  --headerbar-border-color: #{{surface-hex}};
-  --headerbar-backdrop-color: #{{background-hex}};
-  --headerbar-shade-color: var(--shade-color);
-  --headerbar-darker-shade-color: var(--shade-color);
-
-  --sidebar-bg-color: #{{surface-hex}};
-  --sidebar-fg-color: #{{base07-hex}};
-  --sidebar-backdrop-color: #{{background-hex}};
-  --sidebar-border-color: #{{surface-hex}};
-  /* --sidebar-shade-color: var(--shade-color); see https://gitlab.gnome.org/GNOME/libadwaita/-/issues/910 */
-
-  --secondary-sidebar-bg-color: var(--sidebar-bg-color);
-  --secondary-sidebar-fg-color: var(--sidebar-fg-color);
-  --secondary-sidebar-backdrop-color: var(--sidebar-backdrop-color);
-  --secondary-sidebar-border-color: var(--sidebar-border-color);
-  --secondary-sidebar-shade-color: var(--sidebar-shade-color);
-
-  --card-bg-color: #{{surface-hex}};
-  --card-fg-color: #{{base07-hex}};
-  --card-shade-color: var(--shade-color);
-
-  --dialog-bg-color: #{{overlay-hex}};
-  --dialog-fg-color: #{{base07-hex}};
-
-  --popover-bg-color: #{{surface-hex}};
-  --popover-fg-color: #{{base07-hex}};
-  --popover-shade-color: var(--shade-color);
-
-  --shade-color: rgba(0, 0, 0, 0.07);
-  --scrollbar-outline-color: #{{overlay-hex}};
-}
-
 @define-color accent_color #{{primary-hex}};
-@define-color accent_bg_color #{{primary-100-hex}};
-@define-color accent_fg_color #{{primary-hex}};
+@define-color accent_bg_color #{{primary-hex}};
+@define-color accent_fg_color #{{primary-100-hex}};
+
 @define-color destructive_color #{{red-hex}};
-@define-color destructive_bg_color #{{red-100-hex}};
-@define-color destructive_fg_color #{{red-hex}};
+@define-color destructive_bg_color #{{red-hex}};
+@define-color destructive_fg_color #{{red-100-hex}};
+
 @define-color success_color #{{green-hex}};
-@define-color success_bg_color #{{green-100-hex}};
-@define-color success_fg_color #{{green-hex}};
+@define-color success_bg_color #{{green-hex}};
+@define-color success_fg_color #{{green-100-hex}};
+
 @define-color warning_color #{{orange-hex}};
-@define-color warning_bg_color #{{orange-100-hex}};
-@define-color warning_fg_color #{{orange-hex}};
+@define-color warning_bg_color #{{orange-hex}};
+@define-color warning_fg_color #{{orange-100-hex}};
+
 @define-color error_color #{{red-hex}};
-@define-color error_bg_color #{{red-100-hex}};
-@define-color error_fg_color #{{red-hex}};
+@define-color error_bg_color #{{red-hex}};
+@define-color error_fg_color #{{red-100-hex}};
+
 @define-color window_bg_color #{{background-hex}};
 @define-color window_fg_color #{{base07-hex}};
+
 @define-color view_bg_color #{{background-hex}};
 @define-color view_fg_color #{{base-800-hex}};
+
 @define-color headerbar_bg_color #{{surface-hex}};
 @define-color headerbar_fg_color #{{base07-hex}};
 @define-color headerbar_border_color rgba({{surface-dec-r}}, {{surface-dec-g}}, {{surface-dec-b}}, 0.7);
 @define-color headerbar_backdrop_color @window_bg_color;
 @define-color headerbar_shade_color rgba(0, 0, 0, 0.07);
 @define-color headerbar_darker_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color sidebar_bg_color #{{surface-hex}};
 @define-color sidebar_fg_color #{{base07-hex}};
 @define-color sidebar_backdrop_color @window_bg_color;
 @define-color sidebar_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color secondary_sidebar_bg_color @sidebar_bg_color;
 @define-color secondary_sidebar_fg_color @sidebar_fg_color;
 @define-color secondary_sidebar_backdrop_color @sidebar_backdrop_color;
 @define-color secondary_sidebar_shade_color @sidebar_shade_color;
+
 @define-color card_bg_color #{{surface-hex}};
 @define-color card_fg_color #{{base07-hex}};
 @define-color card_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color dialog_bg_color #{{surface-hex}};
 @define-color dialog_fg_color #{{base07-hex}};
+
 @define-color popover_bg_color #{{surface-hex}};
 @define-color popover_fg_color #{{base07-hex}};
 @define-color popover_shade_color rgba(0, 0, 0, 0.07);
+
 @define-color shade_color rgba(0, 0, 0, 0.07);
 @define-color scrollbar_outline_color #{{overlay-hex}};
+
 @define-color blue_1 #{{blue-200-hex}};
 @define-color blue_2 #{{blue-300-hex}};
 @define-color blue_3 #{{blue-400-hex}};
diff --git a/templates/gtk-4.mustache b/templates/gtk-4.mustache
new file mode 100644
index 0000000..088c546
--- /dev/null
+++ b/templates/gtk-4.mustache
@@ -0,0 +1,70 @@
+:root {
+  --accent-blue: #{{blue-hex}};
+  --accent-teal: #{{teal-hex}};
+  --accent-green: #{{green-hex}};
+  --accent-yellow: #{{orange-hex}};
+  --accent-orange: #{{orange-hex}};
+  --accent-red: #{{red-hex}};
+  --accent-pink: #{{purple-hex}};
+  --accent-purple: #{{purple-hex}};
+  --accent-slate: #{{overlay-hex}};
+
+  --accent-color: #{{primary-hex}};
+  --accent-bg-color: #{{primary-hex}};
+  --accent-fg-color: #{{primary-100-hex}};
+
+  --destructive-color: #{{red-hex}};
+  --destructive-bg-color: #{{red-hex}};
+  --destructive-fg-color: #{{red-100-hex}};
+
+  --success-color: #{{green-hex}};
+  --success-bg-color: #{{green-hex}};
+  --success-fg-color: #{{green-100-hex}};
+
+  --warning-color: #{{orange-hex}};
+  --warning-bg-color: #{{orange-hex}};
+  --warning-fg-color: #{{orange-100-hex}};
+
+  --error-color: #{{red-hex}};
+  --error-bg-color: #{{red-hex}};
+  --error-fg-color: #{{red-100-hex}};
+
+  --window-bg-color: #{{background-hex}};
+  --window-fg-color: #{{base07-hex}};
+
+  --view-bg-color: #{{background-hex}};
+  --view-fg-color: #{{base-800-hex}};
+
+  --headerbar-bg-color: #{{surface-hex}};
+  --headerbar-fg-color: #{{base07-hex}};
+  --headerbar-border-color: #{{surface-hex}};
+  --headerbar-backdrop-color: #{{background-hex}};
+  --headerbar-shade-color: var(--shade-color);
+  --headerbar-darker-shade-color: var(--shade-color);
+
+  --sidebar-bg-color: #{{surface-hex}};
+  --sidebar-fg-color: #{{base07-hex}};
+  --sidebar-backdrop-color: #{{background-hex}};
+  --sidebar-border-color: #{{surface-hex}};
+  /* --sidebar-shade-color: var(--shade-color); see https://gitlab.gnome.org/GNOME/libadwaita/-/issues/910 */
+
+  --secondary-sidebar-bg-color: var(--sidebar-bg-color);
+  --secondary-sidebar-fg-color: var(--sidebar-fg-color);
+  --secondary-sidebar-backdrop-color: var(--sidebar-backdrop-color);
+  --secondary-sidebar-border-color: var(--sidebar-border-color);
+  --secondary-sidebar-shade-color: var(--sidebar-shade-color);
+
+  --card-bg-color: #{{surface-hex}};
+  --card-fg-color: #{{base07-hex}};
+  --card-shade-color: var(--shade-color);
+
+  --dialog-bg-color: #{{overlay-hex}};
+  --dialog-fg-color: #{{base07-hex}};
+
+  --popover-bg-color: #{{surface-hex}};
+  --popover-fg-color: #{{base07-hex}};
+  --popover-shade-color: var(--shade-color);
+
+  --shade-color: rgba(0, 0, 0, 0.07);
+  --scrollbar-outline-color: #{{overlay-hex}};
+}