1 files changed, 79 insertions, 0 deletions
diff --git a/talermerchantdemos/static/theme.css b/talermerchantdemos/static/theme.css
new file mode 100644
index 0000000..ea89011
--- /dev/null
+++ b/talermerchantdemos/static/theme.css
@@ -0,0 +1,79 @@
+/* This file contains colour-scheme- & theme-related stuffs */
+
+/* Light Theme (Default) */
+:root {
+  /* Common Green (treat as private vars if possible) */
+  --green-0: #233a13;
+  --green-1: #385723;
+  --green-2: #457a22;
+  --green-3: #568636;
+
+  /* Black/Grey/White */
+  --grey-0: #000000;
+  --grey-1: #1a1a1a;
+  --grey-2: #2b2b2b;
+  --grey-3: #4a4a4a;
+  --grey-4: #6d6d6d;
+  --grey-5: #8e8e8e;
+  --grey-6: #a0a0a0;
+  --grey-7: #b3b3b3;
+  --grey-8: #e4e4e4;
+  --grey-9: #ffffff;
+  --black: var(--grey-0);
+  --white: var(--grey-9);
+  
+  /* Demo Commons */
+  --demo-common-dark-blue: #1e2739;
+  --demo-common-blue: #0042b2;
+  --demo-common-highlight-blue: #3daee9;
+
+  /* Navigation Bar */
+  --navbar-foreground: var(--white);
+  --navbar-background: var(--green-1);
+  --navbar-button-selected: var(--green-0);
+  --navbar-button-hovering: var(--green-3);
+
+  /* Main Content */
+  --main-text-colour: var(--black);
+  --main-background-colour: var(--white);
+
+  /* Misc */
+  --default-link-colour: var(--black);
+  --quote-background-colour: var(--grey-8);
+
+  /* Buttons */
+  --button-confirm-background: var(--green-2);
+  --button-confirm-foreground: var(--white);
+  --button-confirm-hovering-background: var(--green-1);
+  --button-confirm-hovering-foreground: var(--white);
+  --button-confirm-active-background: var(--green-1);
+  --button-confirm-active-foreground: var(--white);
+
+  /* Info Icon */
+  --license-info-icon-filter: none;
+}
+
+/* Dark Theme Overwrites (UA can choose to enable this selector if it wants) */
+@media (prefers-color-scheme: dark) {
+  /* Modify core colour scheme */
+  html:not([data-force-light-theme]) {
+    /* Link-related */
+    --default-link-colour: var(--white);
+    
+    /* Main Content */
+    --main-background-colour: var(--grey-2);
+    --main-text-colour: var(--grey-8);
+
+    /* Misc */
+    --quote-background-colour: var(--grey-3);
+
+    /* Info Icon */
+    --license-info-icon-filter: invert() hue-rotate(180deg);
+  }
+}
+
+/* Universal theming, keep this minimal! */
+html {
+  background: var(--main-background-colour);
+  color: var(--main-text-colour);
+}