Merge pull request #14 from penguineer/color-scheme

Set a dark, gardening-inspired color scheme
penguineer · Jul 19, 2024 · aa76713 · aa76713
2 parents 5b95c63 + cb29ba1
commit aa76713
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/frontend/themes/gartenplus/styles.css b/frontend/themes/gartenplus/styles.css
@@ -1,5 +1,16 @@
 /* GartenPlus theme */
 
+html[theme="dark"] {
+    --lumo-primary-color: #4AAE50;
+    --lumo-secondary-color: #8D6E63;
+    --lumo-tertiary-color: #324A5F;
+    --lumo-base-color: #303030;
+    --lumo-header-color: var(--lumo-tertiary-color);
+    --lumo-body-text-color: #E0E0E0;
+    --lumo-primary-text-color: #AED9A5;
+    --lumo-error-color: #D32F2F;
+}
+
 vaadin-menu-bar-button[theme="icon"] {
     background: unset;
     color: var(--lumo-base-color) !important;
@@ -16,4 +27,8 @@ vaadin-button.login-button {
     font-size: 48px;
     width: 768px;
     height: 128px;
+}
+
+vaadin-grid::part(header-cell) {
+    background-color: var(--lumo-tint-5pct);
 }
diff --git a/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusHeader.java b/src/main/java/com/penguineering/gartenplus/ui/appframe/GartenplusHeader.java
@@ -26,7 +26,7 @@ public GartenplusHeader(Supplier<UserDTO> currentUser) {
         headerLayout.getStyle()
                 .set("gap", "32px")
                 .set("padding", "16px 16px 8px 16px")
-                .set("background-color", "var(--lumo-base-color)")
+                .set("background-color", "var(--lumo-header-color)")
                 .set("border-bottom", "1px solid var(--lumo-contrast-20pct)");
 
         headerLayout.add(new GartenplusLogo());