diff --git a/BTCPayServer/wwwroot/main/themes/default-dark.css b/BTCPayServer/wwwroot/main/themes/default-dark.css index 5f1900686..557873ff6 100644 --- a/BTCPayServer/wwwroot/main/themes/default-dark.css +++ b/BTCPayServer/wwwroot/main/themes/default-dark.css @@ -3,30 +3,9 @@ /* Dark theme overrides */ :root { --btcpay-color-neutral-950: #222222; + --btcpay-color-primary-text: var(--btcpay-color-white); --btcpay-color-primary-backdrop: #389725; - - --btcpay-bg-dark: var(--btcpay-color-neutral-950); - --btcpay-header-bg: var(--btcpay-bg-dark); - --btcpay-header-color-link-active: var(--btcpay-color-primary); - - --btcpay-body-bg: var(--btcpay-color-neutral-900); - --btcpay-body-color: var(--btcpay-color-white); - - --btcpay-wizard-bg: var(--btcpay-body-bg); - --btcpay-wizard-color: var(--btcpay-body-color); - - --btcpay-footer-bg: var(--btcpay-bg-dark); - --btcpay-footer-color: var(--btcpay-color-neutral-600); - - --btcpay-nav-color-link: var(--btcpay-color-neutral-500); - --btcpay-nav-color-link-accent: var(--btcpay-color-neutral-300); - --btcpay-nav-color-link-active: var(--btcpay-color-white); - - --btcpay-bg-tile: var(--btcpay-bg-dark); - - --btcpay-border-color-light: var(--btcpay-color-neutral-600); - --btcpay-border-color-medium: var(--btcpay-color-neutral-700); - + --btcpay-color-secondary-accent: var(--btcpay-color-neutral-300); --btcpay-color-light: var(--btcpay-color-neutral-800); --btcpay-color-light-backdrop: var(--btcpay-color-neutral-800); --btcpay-color-light-accent: var(--btcpay-color-black); @@ -35,6 +14,39 @@ --btcpay-color-dark-backdrop: var(--btcpay-color-neutral-200); --btcpay-color-dark-accent: var(--btcpay-color-neutral-400); --btcpay-color-dark-text: var(--btcpay-color-neutral-800); + + --btcpay-bg-dark: var(--btcpay-color-neutral-950); + --btcpay-bg-tile: var(--btcpay-bg-dark); + + --btcpay-body-bg: var(--btcpay-color-neutral-900); + --btcpay-body-color: var(--btcpay-color-white); + --btcpay-body-color-link: var(--btcpay-color-primary); + --btcpay-body-color-link-accent: var(--btcpay-color-primary); + + --btcpay-header-bg: var(--btcpay-bg-dark); + --btcpay-header-color: var(--btcpay-body-color); + --btcpay-header-color-link: var(--btcpay-header-color); + --btcpay-header-color-link-accent: var(--btcpay-header-color); + --btcpay-header-color-link-active: var(--btcpay-color-primary); + + --btcpay-wizard-bg: var(--btcpay-body-bg); + --btcpay-wizard-color: var(--btcpay-body-color); + + --btcpay-nav-color-link: var(--btcpay-color-neutral-500); + --btcpay-nav-color-link-accent: var(--btcpay-color-neutral-300); + --btcpay-nav-color-link-active: var(--btcpay-color-white); + + --btcpay-footer-bg: var(--btcpay-bg-dark); + --btcpay-footer-color: var(--btcpay-color-neutral-600); + --btcpay-footer-color-link: var(--btcpay-color-neutral-600); + --btcpay-footer-color-link-accent: var(--btcpay-color-neutral-300); + + --btcpay-code-bg: var(--btcpay-bg-dark); + + --btcpay-bg-color-light: var(--btcpay-color-neutral-800); + --btcpay-bg-color-medium: var(--btcpay-color-neutral-700); + --btcpay-border-color-light: var(--btcpay-color-neutral-600); + --btcpay-border-color-medium: var(--btcpay-color-neutral-700); } .social-logo { diff --git a/BTCPayServer/wwwroot/main/themes/default.css b/BTCPayServer/wwwroot/main/themes/default.css index 5a1f8063b..5c24ea1ba 100644 --- a/BTCPayServer/wwwroot/main/themes/default.css +++ b/BTCPayServer/wwwroot/main/themes/default.css @@ -53,13 +53,10 @@ --btcpay-color-dark-text: var(--btcpay-color-neutral-200); /* Color definitions for specific sections - try to reuse colors defined above */ - --btcpay-bg-dark: var(--btcpay-brand-dark); --btcpay-bg-tile: var(--btcpay-color-white); + --btcpay-bg-dark: var(--btcpay-brand-dark); --btcpay-bg-cta: var(--btcpay-brand-dark); - --btcpay-border-color-light: var(--btcpay-color-neutral-200); - --btcpay-border-color-medium: var(--btcpay-color-neutral-300); - --btcpay-body-bg: var(--btcpay-color-neutral-100); --btcpay-body-color: var(--btcpay-color-neutral-900); --btcpay-body-color-link: var(--btcpay-color-primary); @@ -67,15 +64,31 @@ --btcpay-header-bg: var(--btcpay-color-white); --btcpay-header-color: var(--btcpay-body-color); - --btcpay-header-color-link: var(--btcpay-body-color); - --btcpay-header-color-link-accent: var(--btcpay-color-primary); + --btcpay-header-color-link: var(--btcpay-header-color); + --btcpay-header-color-link-accent: var(--btcpay-header-color); --btcpay-header-color-link-active: var(--btcpay-color-primary-accent); + --btcpay-nav-color-link: var(--btcpay-color-neutral-600); + --btcpay-nav-color-link-accent: var(--btcpay-color-neutral-700); + --btcpay-nav-color-link-active: var(--btcpay-color-neutral-900); + --btcpay-wizard-bg: var(--btcpay-color-white); --btcpay-wizard-color: var(--btcpay-body-color); --btcpay-footer-bg: var(--btcpay-brand-dark); --btcpay-footer-color: var(--btcpay-color-neutral-400); + --btcpay-footer-color-link: var(--btcpay-color-neutral-400); + --btcpay-footer-color-link-accent: var(--btcpay-color-neutral-100); + + --btcpay-code-color: var(--btcpay-body-color); + --btcpay-code-bg: var(--btcpay-color-neutral-200); + --btcpay-pre-color: var(--btcpay-color-white); + --btcpay-pre-bg: var(--btcpay-color-neutral-950); + + --btcpay-bg-color-light: var(--btcpay-color-white); + --btcpay-bg-color-medium: var(--btcpay-color-neutral-300); + --btcpay-border-color-light: var(--btcpay-color-neutral-200); + --btcpay-border-color-medium: var(--btcpay-color-neutral-300); --btcpay-font-size-base: 14px; --btcpay-font-family-head: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;