Skip to content

Commit

Permalink
fix: fix gtk theme to support gtk3 again
Browse files Browse the repository at this point in the history
  • Loading branch information
@Suya1671
Suya1671 committed Jul 23, 2024
1 parent 3a16aaa commit c97d485
Show file tree
Hide file tree
Showing 9 changed files with 364 additions and 106 deletions.
12 changes: 9 additions & 3 deletions build.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down
102 changes: 102 additions & 0 deletions build/dark/gtk-3.css
View file
Original file line number Diff line number Diff line change
@@ -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;
35 changes: 25 additions & 10 deletions build/dark/gtk.css → build/dark/gtk-4.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
102 changes: 102 additions & 0 deletions build/light/gtk-3.css
View file
Original file line number Diff line number Diff line change
@@ -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;
35 changes: 25 additions & 10 deletions build/light/gtk.css → build/light/gtk-4.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Binary file modified build/vscode/kleur-code-0.3.0.vsix
View file
Binary file not shown.
9 changes: 7 additions & 2 deletions exporters/gtk.ts
View file
Original file line number Diff line number Diff line change
@@ -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);
};
Loading

0 comments on commit c97d485

Please sign in to comment.