Update custom-style.scss

wiobyrne · Feb 3, 2025 · d7bc3e1 · d7bc3e1
1 parent 6feb27e
commit d7bc3e1
Showing 1 changed file with 53 additions and 25 deletions.
diff --git a/src/site/styles/custom-style.scss b/src/site/styles/custom-style.scss
@@ -1,6 +1,6 @@
-// Define CSS variables for your colors.  These will be used directly in your CSS.
-:root {  // Or put these inside your body selector if you prefer
-  --link-color: #007bff; // Your default link color
+/* Define CSS variables for your colors and themes */
+:root {
+  --link-color: #007bff;
   --text-color: #333;
   --heading-color: #222;
   --bg-color: #f8f8f5;
@@ -14,14 +14,21 @@
   --scrollbar-thumb: #888;
   --scrollbar-thumb-hover: #555;
   --scrollbar-track: #f1f1f1;
+
+  /* Light/Dark mode variables */
+  --light-bg: #f8f8f5;
+  --light-text: #333;
+  --dark-bg: #111;
+  --dark-text: #eee;
 }
 
 body {
   font-family: 'Inter', sans-serif;
-  font-size: clamp(1rem, 2.5vw, 1.25rem); // Fluid typography
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
   line-height: 1.6;
   color: var(--text-color);
   background-color: var(--bg-color);
+  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -42,11 +49,11 @@ a {
   color: var(--link-color);
   text-decoration: none;
   transition: color 0.2s ease;
+}
 
-  &:hover {
-    text-decoration: underline;
-    color: color-mix(in srgb, var(--link-color) 75%, black); // Darken with color-mix
-  }
+a:hover {
+  text-decoration: underline;
+  color: color-mix(in srgb, var(--link-color) 75%, black);
 }
 
 p { margin-bottom: 1rem; }
@@ -55,10 +62,10 @@ ol, ul {
   margin-top: 1rem;
   margin-bottom: 1rem;
   padding-left: 2em;
-
-  li { margin-bottom: 0.5rem; }
 }
 
+ol li, ul li { margin-bottom: 0.5rem; } /* Combined for efficiency */
+
 blockquote {
   border-left: 4px solid var(--blockquote-border);
   padding-left: 1rem;
@@ -71,21 +78,21 @@ table {
   border-collapse: collapse;
   width: 100%;
   margin-bottom: 1rem;
+}
 
-  th, td {
-    border: 1px solid var(--table-border);
-    padding: 0.5rem;
-    text-align: left;
-  }
+table th, table td {
+  border: 1px solid var(--table-border);
+  padding: 0.5rem;
+  text-align: left;
+}
 
-  th {
-    background-color: var(--table-header-bg);
-    font-weight: bold;
-  }
+table th {
+  background-color: var(--table-header-bg);
+  font-weight: bold;
+}
 
-  tr:nth-child(even) {
-    background-color: #f9f9f9; // No variable needed for this one
-  }
+table tr:nth-child(even) {
+  background-color: #f9f9f9;
 }
 
 img {
@@ -111,10 +118,10 @@ code, pre {
   padding: 1rem;
   margin-bottom: 1rem;
   border-radius: 4px;
+}
 
-  &[data-callout="example"] {
-    border-color: var(--callout-example-border);
-  }
+.callout[data-callout="example"] {
+  border-color: var(--callout-example-border);
 }
 
 ::-webkit-scrollbar {
@@ -134,3 +141,24 @@ code, pre {
 ::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover);
 }
+
+/* Dark Mode Styles */
+body.dark-mode {
+  --bg-color: var(--dark-bg);
+  --text-color: var(--dark-text);
+}
+
+/* Toggle Button Styles */
+#dark-mode-toggle {
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-bottom: 1rem;
+}
+
+#dark-mode-toggle:hover {
+  background-color: #0056b3;
+}