diff --git a/frontend/angular.json b/frontend/angular.json
index 46cc3f667..190982225 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -181,6 +181,11 @@
"bundleName": "wiz",
"inject": false
},
+ {
+ "input": "src/theme-bukele.scss",
+ "bundleName": "bukele",
+ "inject": false
+ },
"node_modules/@fortawesome/fontawesome-svg-core/styles.css"
],
"vendorChunk": true,
diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.html b/frontend/src/app/components/theme-selector/theme-selector.component.html
index 9bacaa08b..ecb96a99c 100644
--- a/frontend/src/app/components/theme-selector/theme-selector.component.html
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.html
@@ -3,5 +3,6 @@
+
diff --git a/frontend/src/app/components/theme-selector/theme-selector.component.ts b/frontend/src/app/components/theme-selector/theme-selector.component.ts
index 57cbee865..be207910c 100644
--- a/frontend/src/app/components/theme-selector/theme-selector.component.ts
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts
@@ -11,7 +11,7 @@ import { Subscription } from 'rxjs';
})
export class ThemeSelectorComponent implements OnInit {
themeForm: UntypedFormGroup;
- themes = ['default', 'contrast', 'wiz'];
+ themes = ['default', 'contrast', 'wiz', 'bukele'];
themeSubscription: Subscription;
constructor(
diff --git a/frontend/src/theme-bukele.scss b/frontend/src/theme-bukele.scss
new file mode 100644
index 000000000..e9124194e
--- /dev/null
+++ b/frontend/src/theme-bukele.scss
@@ -0,0 +1,106 @@
+/* Theme */
+$bg: #1c1e4d;
+$active-bg: #313945;
+$hover-bg: #E5E5E5;
+$fg: #FFFFFF;
+$title-fg: #c9a892;
+
+$taproot: #eba814;
+$taproot-light: #d5a90a;
+$taproot-dark: #9d7c05;
+
+/* Bootstrap */
+$body-bg: $bg;
+$body-color: $fg;
+$gray-800: $bg;
+$gray-700: $fg;
+
+$nav-tabs-link-active-bg: $active-bg;
+
+$primary: #343992;
+$secondary: #32345e;
+$tertiary: #a08674;
+$success: #009900;
+$info: #e4d3c8;
+
+$h5-font-size: 1.15rem !default;
+
+$pagination-bg: $body-bg;
+$pagination-border-color: $gray-800;
+$pagination-disabled-bg: $fg;
+$pagination-disabled-border-color: $bg;
+$pagination-active-color: $fg;
+$pagination-active-bg: $tertiary;
+$pagination-hover-bg: $hover-bg;
+$pagination-hover-border-color: $bg;
+$pagination-disabled-bg: $bg;
+
+$custom-select-indicator-color: $fg;
+
+.input-group-text {
+ background-color: #1c2031 !important;
+ border: 1px solid #20263e !important;
+}
+
+$link-color: $info;
+$link-decoration: none !default;
+$link-hover-color: darken($link-color, 15%) !default;
+$link-hover-decoration: underline !default;
+
+$dropdown-bg: $bg;
+$dropdown-link-color: $fg;
+
+$dropdown-link-hover-color: $fg;
+$dropdown-link-hover-bg: $active-bg;
+
+$dropdown-link-active-color: $fg;
+$dropdown-link-active-bg: $active-bg;
+
+:root {
+ --bg: #{$bg};
+ --active-bg: #{$active-bg};
+ --hover-bg: #{$hover-bg};
+ --fg: #{$fg};
+ --title-fg: #{$title-fg};
+
+ --primary: #{$primary};
+ --secondary: #{$secondary};
+ --tertiary: #{$tertiary};
+ --success: #{$success};
+ --info: #{$info};
+ --link-color: #{$link-color};
+ --link-hover-color: #{$link-hover-color};
+ --icon: #f1f1f1;
+ --skeleton-bg: #2e324e;
+ --skeleton-bg-light: #5d6182;
+
+ --box-bg: #15173a;
+ --stat-box-bg: #0e0f28;
+ --alert-bg: #3a1c61;
+ --navbar-bg: #212121;
+ --transparent-fg: #ffffffbb;
+ --fade-out-box-bg-start: rgba(23, 28, 42, 0);
+ --fade-out-box-bg-end: rgba(23, 28, 42, 1);
+ --opacity: 0.7;
+
+ --testnet: #1d486f;
+ --signet: #6f1d5d;
+ --liquid: #116761;
+ --liquidtestnet: #494a4a;
+
+ --mainnet-alt: #a08674;
+ --testnet-alt: #183550;
+ --signet-alt: #471850;
+ --liquidtestnet-alt: #272e46;
+
+ --taproot: #eba814;
+ --taproot-light: #d5a90a;
+ --taproot-dark: #9d7c05;
+
+ --green: #83fd00;
+ --red: #ff3d00;
+ --yellow: #fff000;
+ --grey: #7e7e7e;
+ --tooltip-grey: #b1b1b1;
+ --orange: #ff9f00;
+}