Add dark mode with bootstrap

src/pages/codeofconduct.jsx

@@ -16,7 +16,7 @@ const CodeofconductPage = ({ data }) => {
       <Seo />
       <Hero />
       <main>
-        <section id='' style={{ color: "black" }}>
+        <section id='' className='text-body'>
           <Container className='py-5'>
             <h2 style={{ textTransform: "uppercase" }}>Code of Conduct</h2>
             <h3 className='pt-3'>Versione Italiana</h3>

src/pages/schedule.jsx

@@ -47,15 +47,15 @@ const Talks = ({
       icon={
         starredTalksForYear?.includes(title)
           ? icon({
-            name: "star",
-            family: "classic",
-            style: "solid",
-          })
+              name: "star",
+              family: "classic",
+              style: "solid",
+            })
           : icon({
-            name: "star",
-            family: "classic",
-            style: "regular",
-          })
+              name: "star",
+              family: "classic",
+              style: "regular",
+            })
       }
       onClick={(e) => handleStarClick(title, e)}
     />
@@ -180,10 +180,12 @@ const Talks = ({
                       </Col>
                       <Col className='align-bottom text-center'>{t.room}</Col>
                       <Col className='d-flex gap-1 justify-content-end'>
-                        <Button variant='warning'
-                          onClick={(e) => handleStarClick(t.title, e)}>
-                            <StarToggle title={t.title} />
-                            </Button>
+                        <Button
+                          variant='warning'
+                          onClick={(e) => handleStarClick(t.title, e)}
+                        >
+                          <StarToggle title={t.title} />
+                        </Button>
                       </Col>
                     </Row>
                   </div>
@@ -244,7 +246,7 @@ const Page = ({ data }) => {
       <Seo title='Programma' />
       <main id='index'>
         <Hero />
-        <section id='calendar' style={{ color: "black" }}>
+        <section id='calendar' className='text-body'>
           <Container>
             <div className='d-flex flex-column flex-md-row justify-content-between align-items-center align-middle mb-5'>
               <h2 className='text-md-left text-center'>
@@ -273,7 +275,7 @@ const Page = ({ data }) => {
                           onClick={() => {
                             navigate(
                               typeof window !== "undefined" &&
-                              window.location.pathname + "?year=" + s.year
+                                window.location.pathname + "?year=" + s.year
                             );
                             setSchedData(allSchedules[i]);
                           }}

src/styles/base.scss

@@ -50,3 +50,10 @@ a.anchor {
 .event:hover {
   background-color: #d7d7d7;
 }
+
+@media (prefers-color-scheme: dark) {
+  .event:hover {
+    background-color: #454545;
+  }
+
+}

src/styles/main.scss

@@ -1,5 +1,6 @@
 @import "node_modules/@fortawesome/fontawesome-svg-core/styles";
 @import "values";
+$color-mode-type: media-query;
 @import "bootstrap/scss/bootstrap.scss";
 @import "base";