first pass at dark mode color scheme

diff --git a/src/components/head/base.astro b/src/components/head/base.astro
index 475c2fb..4e6480d 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 a4e9fed..47ccdad 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 e3fbe30..05e317a 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 cfaf2fb..fab88a4 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 28aaad9..eae7fc6 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 9c20480..faab8c7 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;