Add and update theme colors

This commit is contained in:
Dennis Reimann 2021-04-19 16:21:33 +02:00
parent 8ca0be5a4d
commit 35f47bdfb7
No known key found for this signature in database
GPG key ID: 5009E1797F03F8D0
2 changed files with 54 additions and 29 deletions

View file

@ -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 {

View file

@ -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;