Support Dark mode

Remove specified text colour from most elements so that a page wide dark setting can override it Specify input and select text colour in dark mode due to light background Specify diagram tooltip colour in dark mode due to light background Specify diagram legend colour in dark mode due to dark background
ScottLogic · Jun 21, 2024 · 1df89c1 · 1df89c1
1 parent 9de79bc
commit 1df89c1
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 20 deletions.
diff --git a/src/app/carbon-estimation/carbon-estimation.component.css b/src/app/carbon-estimation/carbon-estimation.component.css
@@ -38,3 +38,9 @@
 ::ng-deep .cell-tower-logo {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath style='fill:white' d='M196-276q-57-60-86.5-133T80-560q0-78 29.5-151T196-844l48 48q-48 48-72 110.5T148-560q0 63 24 125.5T244-324l-48 48Zm96-96q-39-39-59.5-88T212-560q0-51 20.5-100t59.5-88l48 48q-30 27-45 64t-15 76q0 36 15 73t45 67l-48 48ZM280-80l135-405q-16-14-25.5-33t-9.5-42q0-42 29-71t71-29q42 0 71 29t29 71q0 23-9.5 42T545-485L680-80h-80l-26-80H387l-27 80h-80Zm133-160h134l-67-200-67 200Zm255-132-48-48q30-27 45-64t15-76q0-36-15-73t-45-67l48-48q39 39 58 88t22 100q0 51-20.5 100T668-372Zm96 96-48-48q48-48 72-110.5T812-560q0-63-24-125.5T716-796l48-48q57 60 86.5 133T880-560q0 78-28 151t-88 133Z'/%3E%3C/svg%3E");
 }
+
+@media (prefers-color-scheme: dark) {
+  ::ng-deep .apexcharts-legend-text {
+    @apply !tce-text-slate-50
+  }
+}
diff --git a/src/app/carbon-estimation/carbon-estimation.constants.ts b/src/app/carbon-estimation/carbon-estimation.constants.ts
@@ -24,7 +24,7 @@ const customTooltip = ({
   const initialSeries = w.globals.initialSeries[seriesIndex];
   const data = initialSeries.data[dataPointIndex];
 
-  return `<div class="tce-rounded tce-flex tce-max-w-40 md:tce-max-w-none">
+  return `<div class="tce-rounded tce-flex tce-max-w-40 md:tce-max-w-none tce-text-slate-600">
   <div class="tce-p-1 md:tce-p-2 tce-flex" style="background-color:${initialSeries.color}"><div class="${data.meta.svg} tce-m-auto tce-size-4 md:tce-size-8"></div></div>
     <div class="tce-p-1 md:tce-p-2">
     <div class="tce-text-wrap">${data.meta.parent}:</div>

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.html b/src/app/carbon-estimator-form/carbon-estimator-form.component.html
@@ -4,9 +4,7 @@
 
     <div class="tce-flex tce-flex-col tce-gap-4">
       <div class="tce-flex tce-flex-col tce-gap-2">
-        <label class="tce-text-sm tce-text-slate-600" for="headCount"
-          >How many employees are in the organisation?
-        </label>
+        <label class="tce-text-sm" for="headCount">How many employees are in the organisation? </label>
         <input
           id="headCount"
           class="tce-border tce-border-slate-400 tce-rounded"
@@ -24,7 +22,7 @@
       </div>
 
       <div class="tce-flex tce-flex-col tce-gap-2">
-        <label for="desktopPercentage" class="tce-text-sm tce-text-slate-600">
+        <label for="desktopPercentage" class="tce-text-sm">
           What percentage of those employee devices are desktops or laptops?
         </label>
         <input
@@ -37,7 +35,7 @@
           max="100"
           step="5"
           [attr.aria-valuetext]="'Desktops ' + desktopPercentage + '%, Laptops ' + laptopPercentage + '%'" />
-        <div class="tce-flex tce-justify-between tce-text-sm tce-text-slate-600">
+        <div class="tce-flex tce-justify-between tce-text-sm">
           <span>Desktops {{ desktopPercentage }}%</span><span>Laptops {{ laptopPercentage }}%</span>
         </div>
       </div>
@@ -73,7 +71,7 @@
       }
 
       <div class="tce-flex tce-flex-col tce-gap-2">
-        <label class="tce-text-sm tce-text-slate-600" for="numberOfServers">Number of Servers:</label>
+        <label class="tce-text-sm" for="numberOfServers">Number of Servers:</label>
         <input
           id="numberOfServers"
           class="tce-border tce-border-slate-400 tce-rounded disabled:tce-bg-gray-200 disabled:tce-text-slate-400 disabled:tce-cursor-not-allowed"
@@ -102,7 +100,7 @@
 
       @if (!noCloudServices) {
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <label for="cloudPercentage" class="tce-text-sm tce-text-slate-600"
+          <label for="cloudPercentage" class="tce-text-sm"
             >What percentage of your servers are cloud services vs on-premise?</label
           >
           <input
@@ -115,7 +113,7 @@
             max="100"
             step="5"
             [attr.aria-valuetext]="'Cloud ' + cloudPercentage + '%, On-premise' + onPremisePercentage + '%'" />
-          <div class="tce-flex tce-justify-between tce-text-sm tce-text-slate-600">
+          <div class="tce-flex tce-justify-between tce-text-sm">
             <span>Cloud {{ cloudPercentage }}%</span>
             <span>On-premise {{ onPremisePercentage }}%</span>
           </div>
@@ -130,7 +128,7 @@
         </div>
 
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <label for="monthlyCloudBill" class="tce-text-sm tce-text-slate-600">What is your monthly cloud bill?</label>
+          <label for="monthlyCloudBill" class="tce-text-sm">What is your monthly cloud bill?</label>
           <select
             id="monthlyCloudBill"
             class="tce-border tce-border-slate-400 tce-rounded disabled:tce-bg-gray-200 disabled:tce-text-slate-400 disabled:tce-cursor-not-allowed tce-px-3 tce-py-2"
@@ -165,13 +163,13 @@
           <expansion-panel [configOverride]="questionPanelConfig">
             <div header>
               <div class="tce-flex">
-                <label for="purposeOfSite" class="tce-text-sm tce-text-slate-600"
+                <label for="purposeOfSite" class="tce-text-sm"
                   >What's the primary purpose of your digital services?</label
                 >
               </div>
             </div>
             <div content>
-              <p class="tce-text-sm tce-text-slate-600">
+              <p class="tce-text-sm">
                 The purpose of your digital services is used to determine the typical amount of time a user might spend
                 on them and the amount of data that may be transferred. This can affect the amount of energy used by end
                 user devices and how much energy from network traffic is attributable to your organisation
@@ -193,7 +191,7 @@
         <ng-container *ngTemplateOutlet="locationInput; context: formContext.downstream"></ng-container>
 
         <div class="tce-flex tce-flex-col tce-gap-2">
-          <label for="monthlyActiveUsers" class="tce-text-sm tce-text-slate-600">
+          <label for="monthlyActiveUsers" class="tce-text-sm">
             How many monthly active users do your digital services have?
           </label>
           <input
@@ -219,13 +217,13 @@
           <expansion-panel [configOverride]="questionPanelConfig">
             <div header>
               <div class="tce-flex">
-                <label for="mobilePercentage" class="tce-text-sm tce-text-slate-600">
+                <label for="mobilePercentage" class="tce-text-sm">
                   What percentage of your end-users are mobile or personal computer users?
                 </label>
               </div>
             </div>
             <div content>
-              <p class="tce-text-sm tce-text-slate-600">
+              <p class="tce-text-sm">
                 The percentage of mobile users will affect the energy used by end user devices and network
                 infrastructure. While the power demand of mobile devices is often much lower, the use of mobile networks
                 can increase the power used when transferring data.
@@ -241,7 +239,7 @@
             max="100"
             step="5"
             [attr.aria-valuetext]="'Mobile ' + mobilePercentage + '%, Computer' + computerPercentage + '%'" />
-          <div class="tce-flex tce-justify-between tce-text-sm tce-text-slate-600">
+          <div class="tce-flex tce-justify-between tce-text-sm">
             <span>Mobile {{ mobilePercentage }}%</span>
             <span>Computer {{ computerPercentage }}%</span>
           </div>
@@ -272,11 +270,11 @@
       <expansion-panel [configOverride]="questionPanelConfig">
         <div header>
           <div class="tce-flex">
-            <label for="{{ formControlName }}" class="tce-text-sm tce-text-slate-600">{{ label }} </label>
+            <label for="{{ formControlName }}" class="tce-text-sm">{{ label }} </label>
           </div>
         </div>
         <div content>
-          <p class="tce-text-sm tce-text-slate-600">
+          <p class="tce-text-sm">
             This will affect the average
             <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
               >Carbon Intensity</a

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts b/src/app/carbon-estimator-form/carbon-estimator-form.constants.ts
@@ -94,6 +94,6 @@ export const formContext = {
 
 export const questionPanelConfig: ExpansionPanelConfig = {
   startsExpanded: false,
-  buttonStyles: 'material-icons-outlined tce-text-base tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded',
+  buttonStyles: 'material-icons-outlined tce-text-base hover:tce-bg-slate-200 hover:tce-rounded',
   contentContainerStyles: 'tce-px-3 tce-py-2 tce-bg-slate-100 tce-border tce-border-slate-400 tce-rounded tce-text-sm',
 };
diff --git a/src/app/expansion-panel/expansion-panel.constants.ts b/src/app/expansion-panel/expansion-panel.constants.ts
@@ -6,6 +6,6 @@ export type ExpansionPanelConfig = {
 
 export const defaultConfig: ExpansionPanelConfig = {
   startsExpanded: true,
-  buttonStyles: 'material-icons-outlined tce-text tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded',
+  buttonStyles: 'material-icons-outlined tce-text hover:tce-bg-slate-200 hover:tce-rounded',
   contentContainerStyles: '',
 };
diff --git a/src/styles.css b/src/styles.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+input, select {
+  @apply dark:tce-text-slate-600
+}
+
 .tce-note {
   @apply tce-bg-sky-200 tce-border-sky-400 tce-text-slate-800
 }