first pass at dark mode color scheme

diff --git a/src/components/head/base.astro b/src/components/head/base.astro
index 475c2fb28c3912feea4206344d651b8e13e2cdde..4e6480dfc076fab0097aa1fa8558e0e40eb5207f 100644 (file)
--- a/src/components/head/base.astro
+++ b/src/components/head/base.astro
@@ -21,6 +21,7 @@ const { title, description } = Astro.props;
 <meta charset="utf-8" />
 <link rel="icon" type="image/x-icon" href={favIcon.src} />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="color-scheme" content="light dark" />
 <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; frame-src youtube.com www.youtube.com youtube-noocookie.com www.youtube-nocookie.com" /> -->
 <meta name="title" property="og:title" content={`${title} | ${SiteMetadata.title}`} />
 <meta name="description" property="og:description" content={description} />

diff --git a/src/components/heading.astro b/src/components/heading.astro
index a4e9fed0cf7d836a69a74fa20a1306dc1716bd13..47ccdad3bb4198d3266d14c8af2576a09524021b 100644 (file)
--- a/src/components/heading.astro
+++ b/src/components/heading.astro
@@ -6,7 +6,7 @@ import Navigation from '@components/navigation.astro';
 
 <style>
     a {
-        color: #000000;
+        color: light-dark(#000000, #ffffff);
     }
     a:hover {
         text-decoration: none;

diff --git a/src/components/ratingdistribution/chart.tsx b/src/components/ratingdistribution/chart.tsx
index e3fbe309b7d71720061232d6a631c0337f447145..05e317affb568d6773830b21d55e05f031170278 100644 (file)
--- a/src/components/ratingdistribution/chart.tsx
+++ b/src/components/ratingdistribution/chart.tsx
@@ -7,8 +7,13 @@ export default function Chart({ chartData }) {
                 <CartesianGrid strokeDasharray="3 3" />
                 <XAxis dataKey="name" />
                 <YAxis />
-                <Tooltip />
-                <Bar dataKey="count" />
+                <Tooltip          
+                    contentStyle={{ color: "light-dark(#000000, #000000)" }}
+                    itemStyle={{ color: "light-dark(#000000, #000000)" }}
+                    labelStyle={{ color: "light-dark(#000000, #000000)" }}
+                    wrapperStyle={{ color: "light-dark(#000000, #000000)" }}
+                />
+                <Bar dataKey="count" fill="light-dark(#000000, #ffffff)" />
             </BarChart>
         </ResponsiveContainer>
     )

diff --git a/src/components/ui/callout.astro b/src/components/ui/callout.astro
index cfaf2fb9f53f5a4af70ec386df0b927a0b53a398..fab88a45d3611599cce3b6592dc45b0119f00392 100644 (file)
--- a/src/components/ui/callout.astro
+++ b/src/components/ui/callout.astro
@@ -35,24 +35,24 @@ if (label == null) {
         border-left: 0.2rem solid;
     }
     .callout-info {
-        border-left: 0.2rem solid #086ddd;
+        border-left: 0.2rem solid light-dark(#086ddd, #398ae3);
     }
     .callout-info > .callout-label {
-        color: #086ddd;
+        color: light-dark(#086ddd, #398ae3);
         font-weight: 700;
     }
     .callout-warn {
-        border-left: 0.2rem solid #ec7500;
+        border-left: 0.2rem solid light-dark(#ec7500, #f19e4c);
     }
     .callout-warn > .callout-label {
-        color: #ec7500;
+        color: light-dark(#ec7500, #f19e4c);
         font-weight: 700;
     }
     .callout-error {
-        border-left: 0.2rem solid #e93147;
+        border-left: 0.2rem solid light-dark(#e93147, #ef6e7e);
     }
     .callout-error > .callout-label {
-        color: #e93147;
+        color: light-dark(#e93147, #ef6e7e);
         font-weight: 700;
     }
 </style>
\ No newline at end of file

diff --git a/src/components/ui/spoiler.astro b/src/components/ui/spoiler.astro
index 28aaad94dd287217b9846f4173ee360320c001a5..eae7fc644a542b503ddb9d76d618cb2061f3c03a 100644 (file)
--- a/src/components/ui/spoiler.astro
+++ b/src/components/ui/spoiler.astro
@@ -5,8 +5,8 @@
 
 <style>
     details.spoiler {
-        color: #ffffff;
-        background-color: #000000;
+        color: light-dark(#ffffff, #000000);
+        background-color: light-dark(#000000, #ffffff);
         margin-bottom: 1rem;
         padding: 0.5rem;
         &[open] {

diff --git a/src/styles/style.css b/src/styles/style.css
index 9c20480925e5e94a329c4fd01cfbefade453b4a7..faab8c7cdc5bd7d7cbbcd10be4e5f42d9b7ca105 100644 (file)
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -1,10 +1,14 @@
+:root {
+  color-scheme: light dark;
+}
+
 @view-transition {
   navigation: auto;
 }
 
 html {
-  background-color: #ffffff;
-  color: #000000;
+  background-color: light-dark(#ffffff, #000000);
+  color: light-dark(#000000, #ffffff);
   font-family: "Public Sans Variable", sans-serif;
   font-feature-settings: "kern" 1, "kern";
   font-kerning: normal;
@@ -31,7 +35,7 @@ p {
 }
 a {
   text-decoration: none;
-  color: #086ddd;
+  color: light-dark(#086ddd, #398ae3);
 }
 a:hover {
   text-decoration: underline;