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; +}