diff --git a/angular.json b/angular.json
index 8592d19b..5b1b3c82 100644
--- a/angular.json
+++ b/angular.json
@@ -41,8 +41,9 @@
               "baseHref": "/sl-tech-carbon-estimator/"
             },
             "npm-package": {
+              "index": {"input": "src/package-index.html", "output": "index.html"},
               "assets": [],
-              "styles": ["src/styles.css"]
+              "styles": ["src/styles.css", "src/package-styles.css"]
             },
             "development": {
               "optimization": false,
diff --git a/src/app/carbon-estimation/carbon-estimation.constants.ts b/src/app/carbon-estimation/carbon-estimation.constants.ts
index 14650504..24c08fa3 100644
--- 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
index 1594cc93..75175f29 100644
--- 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
index 31341464..c314d2a9 100644
--- 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
index 4b7621fc..e66d6a6c 100644
--- 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/index.html b/src/index.html
index ef8de09b..98e3a66b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>tech-carbon-estimator</title>
+    <title>Technology Carbon Estimator</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
diff --git a/src/package-index.html b/src/package-index.html
new file mode 100644
index 00000000..6db8d0e0
--- /dev/null
+++ b/src/package-index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Technology Carbon Estimator</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
+  </head>
+  <body class="dark:tce-bg-slate-800 dark:tce-text-slate-50">
+    <noscript
+      >Javascript appears to be disabled - unfortunately the estimator requires it to be enabled to function.</noscript
+    >
+    <tech-carbon-estimator></tech-carbon-estimator>
+  </body>
+</html>
diff --git a/src/package-styles.css b/src/package-styles.css
new file mode 100644
index 00000000..28a35821
--- /dev/null
+++ b/src/package-styles.css
@@ -0,0 +1,9 @@
+input, select {
+  @apply dark:tce-text-slate-600
+}
+
+@media (prefers-color-scheme: dark) {
+  .apexcharts-legend-text {
+    @apply !tce-text-slate-50
+  }
+}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index eacd2545..bcd5f382 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -12,4 +12,4 @@
 
 .tce-button-reset, .tce-button-assumptions {
   @apply tce-bg-slate-200 tce-text-slate-800 hover:tce-bg-slate-300 tce-rounded
-}
\ No newline at end of file
+}