#585 - fixed light theme

src/main/resources/static/css/charts.css

@@ -3,11 +3,16 @@
 }
 
 .quick-date {
-    color: #BDFF3F;
+    color: var(--color-blue);
     text-align: center;
     padding: 0 0 10px 0;
 }
 
+[data-theme="dark"]  .quick-date {
+    color: #BDFF3F;
+}
+
+
 .quick-date:hover {
     cursor: pointer;
     text-decoration: underline var(--color-blue);
@@ -36,6 +41,14 @@
     font-size: 1.2rem;
 }
 
+.chart-preview {
+    background-color: var(--color-grey-ccc);
+}
+
+[data-theme="dark"] .chart-preview {
+    background-color: var(--color-grey-dark);
+}
+
 .chart-preview:hover {
     cursor: pointer;
 }
@@ -47,6 +60,16 @@
     padding: 1rem;
 }
 
+[data-theme="dark"] .button-display-type,
+[data-theme="dark"] .button-group-type {
+    background-color: var(--color-grey) !important;
+}
+
+.button-display-type,
+.button-group-type {
+    background-color: var(--color-grey-ccc) !important;
+}
+
 .button-display-type.active {
     background-color: var(--color-green) !important;
 }
@@ -60,7 +83,11 @@
 }
 
 #chart-date-card {
-    background-color: var(--color-grey-dark-almost-transparent);
+    background-color: var(--color-white);
+}
+
+[data-theme="dark"] #chart-date-card {
+    background-color: var(--color-background-light);
 }
 
 #filterActiveBadge {

src/main/resources/static/css/colors.css

@@ -19,6 +19,7 @@
     --color-grey: #696969;
     --color-grey-dark: rgba(0, 0, 0, 0.25);
     --color-grey-dark-almost-transparent: rgba(0, 0, 0, 0.08);
+    --color-grey-ccc: #CCCCCC;
     --color-black: rgba(0, 0, 0, 0.87);
 
     --color-text: #212121;
@@ -34,7 +35,7 @@
     --color-blue-light: rgba(80, 115, 146, 0.8);
     --color-yellow: #E9C46A;
     --color-grey-light: #333333;
-    --color-grey: #CCCCCC;
+    --color-grey: var(--color-grey-ccc);
     --color-grey-dark: rgba(255, 255, 255, 0.5);
     --color-grey-dark-almost-transparent: rgba(255, 255, 255, 0.125);
 

src/main/resources/templates/charts/charts.ftl

@@ -133,7 +133,7 @@
 <#macro chartTypeButton item buttonClass initialItem>
     <#assign isInitialItem=item.name()==initialItem.name()/>
 
-    <a class="waves-effect waves-light btn-large background-grey text-black ${buttonClass} <#if isInitialItem>active</#if>" data-value="${item.name()}">
+    <a class="waves-effect waves-light btn-large text-black ${buttonClass} <#if isInitialItem>active</#if>" data-value="${item.name()}">
         <#if item.hasFontAwesomeIcon()>
             <i class="${item.getIcon()} left"></i> ${locale.getString(item.getLocalizationKey())}
         <#else>
@@ -144,7 +144,7 @@
 
 <#macro chartPreview chart>
     <div class="col s6 m4 l3 center-align chart-preview-column hidden" data-display-type="${chart.getDisplayType()}" data-group-type="${chart.getGroupType()}" data-id="${chart.getID()?c}">
-        <div class="card chart-preview background-grey-dark">
+        <div class="card chart-preview">
             <div class="card-image">
                 <img src="<@s.url '/images/charts/' + chart.getPreviewImageFileName()!"placeholder.png"/>">
             </div>