diff --git a/EXAMPLE/prometheus-advanced.html b/EXAMPLE/prometheus-advanced.html
index c269008..ca8e877 100644
--- a/EXAMPLE/prometheus-advanced.html
+++ b/EXAMPLE/prometheus-advanced.html
@@ -5,113 +5,248 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>prometheus - helm chart documentation</title>
     <style>
-        html {
-            --blue: #0288d1;
-            --dark-blue: #006da8;
-            --light-blue: #E0F2FF;
-            --margin-top: 3em;
-        }
-        
-        body, html {
-            height: 100%;
-            margin: 0;
-            font-family: Arial, Helvetica, sans-serif;
-        }
+html {
+    --blue: #A8DADC;   /* Pastel Cyan */
+    --dark-blue: #457B9D;   /* Steel Blue */
+    --light-blue: #F1FAEE;  /* Honeydew */
+    --light-gray: #F8F9FA;  /* Light Gray */
+    --gray: #D8E2DC;        /* Soft Gray */
+    --dark-gray: #264653;   /* Deep Green */
+    --dark-bg: #343A40;     /* Charcoal */
+    --dark-card-bg: #495057; /* Granite */
+    --dark-text: #E9ECEF;   /* Light Gray Text for Dark Mode */
+    --darker-text: #121212; /* Dark text for Dark Mode */
+    --dark-gray-text: #264653; /* Deep Green for Dark Mode Text */
+    --dark-link: #A8DADC;   /* Pastel Cyan for Links */
+    --dark-link-hover: #81B1BD; /* Steel Blue for Hover */
+    --primary-gradient: linear-gradient(135deg, #A8DADC, #F1FAEE); /* Cyan to Honeydew */
+    --secondary-gradient: linear-gradient(135deg, #457B9D, #A8DADC); /* Steel Blue to Cyan */
+    --margin-top: 3em;
+    --border-radius: 15px;
+}
 
-        #navbar-outer {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: auto;
-            background-color: var(--dark-blue);
-            overflow-x: hidden;
-            margin-top: 0;
-        }
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: var(--light-gray);
+    color: var(--dark-gray);
+    transition: all 0.3s;
+}
 
-        #navbar, .container {
-            max-width: 80%;
-            margin: auto;
-        }
+#navbar-outer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    background: var(--secondary-gradient);
+    overflow-x: hidden;
+    margin-top: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    transition: all 0.3s;
+}
 
-        #navbar a {
-            padding: 1em;
-            text-decoration: none;
-            color: white;
-            display: inline-block;
-            height: 100%;
-        }
+#navbar, .container {
+    max-width: 80%;
+    margin: auto;
+}
 
-        #navbar a:first-child {
-            background-color: var(--blue);
-            font-weight: bold;
-        }
+#navbar a {
+    padding: 1em;
+    text-decoration: none;
+    color: var(--light-gray);
+    display: inline-block;
+    transition: background-color 0.3s, transform 0.3s;
+    border-radius: var(--border-radius);
+}
 
-        #navbar a:hover {
-            background-color: var(--blue);
-        }
+#navbar a:first-child {
+    background: var(--primary-gradient);
+    font-weight: bold;
+    color: var(--dark-gray);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
 
-        #search {
-            padding: 10px;
-            width: 90%;
-            margin: 20px auto;
-            display: block;
-        }
-        .content {
-            padding: 20px;
-            margin-top: var(--margin-top);
-        }
-        .container {
-            padding: 20px;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        
-        table {
-            border-collapse: collapse;
-            width: 100%;
-            display: block;
-            overflow: auto;
-        }
+#navbar a:hover {
+    background: var(--primary-gradient);
+    transform: translateY(-2px);
+    color: var(--dark-gray);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
 
-        td, th {
-            border: 1px solid #ddd;
-            padding: 8px;
-        }
+#search {
+    position: relative;
+    padding: 15px;
+    width: 98%;
+    margin: 20px auto;
+    display: block;
+    font-size: medium;
+    color: var(--dark-gray);
+    border: none;
+    border-radius: var(--border-radius);
+    background: var(--light-gray);
+    box-shadow: inset 6px 6px 12px #ccc, inset -6px -6px 12px #fff;
+    transition: all 0.3s;
+}
 
-        tr:nth-child(even){
-            background-color: #f2f2f2;
-        }
+#search:focus {
+    box-shadow: inset 6px 6px 12px #bbb, inset -6px -6px 12px #eee, 0 0 8px 2px rgba(248, 241, 225, 0.5);
+    outline: none;
+}
 
-        tr:hover {
-            background-color: var(--light-blue);
-        }
+.content {
+    padding: 25px;
+    margin-top: var(--margin-top);
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+    background: var(--light-gray);
+}
 
-        th {
-            padding-top: 12px;
-            padding-bottom: 12px;
-            text-align: left;
-            background-color: var(--blue);
-            color: white;
-        }
+.container {
+    padding: 25px;
+    border-radius: var(--border-radius);
+    box-shadow: 4px 4px 8px #ccc, -4px -4px 8px #fff;
+    background-color: var(--light-gray);
+    transition: all 0.3s;
+}
 
-        pre {
-            background-color: #E4E4E4;
-            padding: 0.5em;
-            border-radius: 5px;
-        }
+.table-container {
+    padding: 0 1em;
+    overflow: auto;
+}
 
-        #search {
-            width: 98%;
-            display: block;
-            overflow: auto;
-            font-size: medium;
-        }
+table {
+    border-collapse: collapse;
+    width: 100%;
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    overflow: hidden;
+    transition: all 0.3s;
+}
 
-        h1, h2, h3, h4, h5, h6 {
-            scroll-margin-top: var(--margin-top);
-        }
+td, th {
+    border: 1px solid var(--gray);
+    padding: 12px;
+    transition: background-color 0.3s;
+}
+
+tr:nth-child(even) {
+    background-color: #E9ECEF; /* Soft Light Gray */
+}
+
+tr:hover {
+    background-color: #D8E2DC; /* Very Soft Gray */
+}
+
+th {
+    padding-top: 14px;
+    padding-bottom: 14px;
+    text-align: left;
+    background: var(--secondary-gradient);
+    color: var(--light-gray);
+}
+
+pre {
+    background-color: #E4E4E4;
+    padding: 15px;
+    border-radius: var(--border-radius);
+    overflow-x: auto;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    scroll-margin-top: var(--margin-top);
+    color: var(--dark-gray);
+    transition: color 0.3s;
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+    body, html {
+        background-color: var(--dark-bg);
+        color: var(--dark-text);
+    }
+
+    #navbar-outer {
+        background: var(--primary-gradient);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+    }
+
+    #navbar a {
+        color: var(--dark-gray-text); /* Make navbar links text darker */
+    }
+
+    #navbar a:first-child {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #navbar a:hover {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #search {
+        background: var(--dark-card-bg);
+        color: var(--dark-text);
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a;
+    }
+
+    #search:focus {
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a, 0 0 8px 2px rgba(168, 218, 220, 0.5);
+    }
+
+    .content, .container {
+        background: var(--dark-card-bg);
+        box-shadow: 4px 4px 8px #292d31, -4px -4px 8px #5a616a;
+    }
+
+    table {
+        background-color: var(--dark-card-bg);
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+    }
+
+    td, th {
+        border: 1px solid #555;
+    }
+
+    tr:nth-child(even) {
+        background-color: #42474d; /* Dark Granite */
+    }
+
+    tr:hover {
+        background-color: #3c3f41; /* Slightly lighter dark granite */
+    }
+
+    th {
+        background: var(--primary-gradient);
+        color: var(--dark-gray-text); /* Make table header text darker */
+    }
+
+    pre {
+        background-color: #333;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        color: var(--light-blue);
+    }
+
+    a {
+        color: var(--dark-link);
+        transition: color 0.3s;
+    }
+
+    a:hover {
+        color: var(--dark-link-hover);
+    }
+}
     </style>
 </head>
 <body>
diff --git a/EXAMPLE/prometheus.html b/EXAMPLE/prometheus.html
index 80d708b..56fe7e3 100644
--- a/EXAMPLE/prometheus.html
+++ b/EXAMPLE/prometheus.html
@@ -6,41 +6,247 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
   <title>prometheus - helm chart documentation</title>
   <style type="text/css" media="screen">
-    body {
-  font-family: sans-serif;
-  margin: auto;
-  padding: 10px;
-  max-width: 80%;
+    html {
+    --blue: #A8DADC;   /* Pastel Cyan */
+    --dark-blue: #457B9D;   /* Steel Blue */
+    --light-blue: #F1FAEE;  /* Honeydew */
+    --light-gray: #F8F9FA;  /* Light Gray */
+    --gray: #D8E2DC;        /* Soft Gray */
+    --dark-gray: #264653;   /* Deep Green */
+    --dark-bg: #343A40;     /* Charcoal */
+    --dark-card-bg: #495057; /* Granite */
+    --dark-text: #E9ECEF;   /* Light Gray Text for Dark Mode */
+    --darker-text: #121212; /* Dark text for Dark Mode */
+    --dark-gray-text: #264653; /* Deep Green for Dark Mode Text */
+    --dark-link: #A8DADC;   /* Pastel Cyan for Links */
+    --dark-link-hover: #81B1BD; /* Steel Blue for Hover */
+    --primary-gradient: linear-gradient(135deg, #A8DADC, #F1FAEE); /* Cyan to Honeydew */
+    --secondary-gradient: linear-gradient(135deg, #457B9D, #A8DADC); /* Steel Blue to Cyan */
+    --margin-top: 3em;
+    --border-radius: 15px;
+}
+
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: var(--light-gray);
+    color: var(--dark-gray);
+    transition: all 0.3s;
+}
+
+#navbar-outer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    background: var(--secondary-gradient);
+    overflow-x: hidden;
+    margin-top: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    transition: all 0.3s;
+}
+
+#navbar, .container {
+    max-width: 80%;
+    margin: auto;
+}
+
+#navbar a {
+    padding: 1em;
+    text-decoration: none;
+    color: var(--light-gray);
+    display: inline-block;
+    transition: background-color 0.3s, transform 0.3s;
+    border-radius: var(--border-radius);
+}
+
+#navbar a:first-child {
+    background: var(--primary-gradient);
+    font-weight: bold;
+    color: var(--dark-gray);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+#navbar a:hover {
+    background: var(--primary-gradient);
+    transform: translateY(-2px);
+    color: var(--dark-gray);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+#search {
+    position: relative;
+    padding: 15px;
+    width: 98%;
+    margin: 20px auto;
+    display: block;
+    font-size: medium;
+    color: var(--dark-gray);
+    border: none;
+    border-radius: var(--border-radius);
+    background: var(--light-gray);
+    box-shadow: inset 6px 6px 12px #ccc, inset -6px -6px 12px #fff;
+    transition: all 0.3s;
+}
+
+#search:focus {
+    box-shadow: inset 6px 6px 12px #bbb, inset -6px -6px 12px #eee, 0 0 8px 2px rgba(248, 241, 225, 0.5);
+    outline: none;
+}
+
+.content {
+    padding: 25px;
+    margin-top: var(--margin-top);
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+    background: var(--light-gray);
+}
+
+.container {
+    padding: 25px;
+    border-radius: var(--border-radius);
+    box-shadow: 4px 4px 8px #ccc, -4px -4px 8px #fff;
+    background-color: var(--light-gray);
+    transition: all 0.3s;
+}
+
+.table-container {
+    padding: 0 1em;
+    overflow: auto;
 }
 
 table {
-  font-family: Arial, Helvetica, sans-serif;
-  border-collapse: collapse;
-  display: block;
-  overflow-x: auto;
+    border-collapse: collapse;
+    width: 100%;
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    overflow: hidden;
+    transition: all 0.3s;
 }
 
 td, th {
-  border: 1px solid #ddd;
-  padding: 8px;
+    border: 1px solid var(--gray);
+    padding: 12px;
+    transition: background-color 0.3s;
 }
 
-tr:nth-child(even){background-color: #f2f2f2;}
+tr:nth-child(even) {
+    background-color: #E9ECEF; /* Soft Light Gray */
+}
 
-tr:hover {background-color: #E0F2FF;}
+tr:hover {
+    background-color: #D8E2DC; /* Very Soft Gray */
+}
 
 th {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  text-align: left;
-  background-color: #0288d1;
-  color: white;
+    padding-top: 14px;
+    padding-bottom: 14px;
+    text-align: left;
+    background: var(--secondary-gradient);
+    color: var(--light-gray);
 }
 
 pre {
     background-color: #E4E4E4;
-    padding: 0.5em;
-    border-radius: 5px;
+    padding: 15px;
+    border-radius: var(--border-radius);
+    overflow-x: auto;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    scroll-margin-top: var(--margin-top);
+    color: var(--dark-gray);
+    transition: color 0.3s;
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+    body, html {
+        background-color: var(--dark-bg);
+        color: var(--dark-text);
+    }
+
+    #navbar-outer {
+        background: var(--primary-gradient);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+    }
+
+    #navbar a {
+        color: var(--dark-gray-text); /* Make navbar links text darker */
+    }
+
+    #navbar a:first-child {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #navbar a:hover {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #search {
+        background: var(--dark-card-bg);
+        color: var(--dark-text);
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a;
+    }
+
+    #search:focus {
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a, 0 0 8px 2px rgba(168, 218, 220, 0.5);
+    }
+
+    .content, .container {
+        background: var(--dark-card-bg);
+        box-shadow: 4px 4px 8px #292d31, -4px -4px 8px #5a616a;
+    }
+
+    table {
+        background-color: var(--dark-card-bg);
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+    }
+
+    td, th {
+        border: 1px solid #555;
+    }
+
+    tr:nth-child(even) {
+        background-color: #42474d; /* Dark Granite */
+    }
+
+    tr:hover {
+        background-color: #3c3f41; /* Slightly lighter dark granite */
+    }
+
+    th {
+        background: var(--primary-gradient);
+        color: var(--dark-gray-text); /* Make table header text darker */
+    }
+
+    pre {
+        background-color: #333;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        color: var(--light-blue);
+    }
+
+    a {
+        color: var(--dark-link);
+        transition: color 0.3s;
+    }
+
+    a:hover {
+        color: var(--dark-link-hover);
+    }
 }
 
   </style>
diff --git a/EXAMPLE/style.css b/EXAMPLE/style.css
index cd2131f..706d3bd 100644
--- a/EXAMPLE/style.css
+++ b/EXAMPLE/style.css
@@ -1,36 +1,242 @@
-body {
-  font-family: sans-serif;
-  margin: auto;
-  padding: 10px;
-  max-width: 80%;
+html {
+    --blue: #A8DADC;   /* Pastel Cyan */
+    --dark-blue: #457B9D;   /* Steel Blue */
+    --light-blue: #F1FAEE;  /* Honeydew */
+    --light-gray: #F8F9FA;  /* Light Gray */
+    --gray: #D8E2DC;        /* Soft Gray */
+    --dark-gray: #264653;   /* Deep Green */
+    --dark-bg: #343A40;     /* Charcoal */
+    --dark-card-bg: #495057; /* Granite */
+    --dark-text: #E9ECEF;   /* Light Gray Text for Dark Mode */
+    --darker-text: #121212; /* Dark text for Dark Mode */
+    --dark-gray-text: #264653; /* Deep Green for Dark Mode Text */
+    --dark-link: #A8DADC;   /* Pastel Cyan for Links */
+    --dark-link-hover: #81B1BD; /* Steel Blue for Hover */
+    --primary-gradient: linear-gradient(135deg, #A8DADC, #F1FAEE); /* Cyan to Honeydew */
+    --secondary-gradient: linear-gradient(135deg, #457B9D, #A8DADC); /* Steel Blue to Cyan */
+    --margin-top: 3em;
+    --border-radius: 15px;
+}
+
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: var(--light-gray);
+    color: var(--dark-gray);
+    transition: all 0.3s;
+}
+
+#navbar-outer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    background: var(--secondary-gradient);
+    overflow-x: hidden;
+    margin-top: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    transition: all 0.3s;
+}
+
+#navbar, .container {
+    max-width: 80%;
+    margin: auto;
+}
+
+#navbar a {
+    padding: 1em;
+    text-decoration: none;
+    color: var(--light-gray);
+    display: inline-block;
+    transition: background-color 0.3s, transform 0.3s;
+    border-radius: var(--border-radius);
+}
+
+#navbar a:first-child {
+    background: var(--primary-gradient);
+    font-weight: bold;
+    color: var(--dark-gray);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+#navbar a:hover {
+    background: var(--primary-gradient);
+    transform: translateY(-2px);
+    color: var(--dark-gray);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+#search {
+    position: relative;
+    padding: 15px;
+    width: 98%;
+    margin: 20px auto;
+    display: block;
+    font-size: medium;
+    color: var(--dark-gray);
+    border: none;
+    border-radius: var(--border-radius);
+    background: var(--light-gray);
+    box-shadow: inset 6px 6px 12px #ccc, inset -6px -6px 12px #fff;
+    transition: all 0.3s;
+}
+
+#search:focus {
+    box-shadow: inset 6px 6px 12px #bbb, inset -6px -6px 12px #eee, 0 0 8px 2px rgba(248, 241, 225, 0.5);
+    outline: none;
+}
+
+.content {
+    padding: 25px;
+    margin-top: var(--margin-top);
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+    background: var(--light-gray);
+}
+
+.container {
+    padding: 25px;
+    border-radius: var(--border-radius);
+    box-shadow: 4px 4px 8px #ccc, -4px -4px 8px #fff;
+    background-color: var(--light-gray);
+    transition: all 0.3s;
+}
+
+.table-container {
+    padding: 0 1em;
+    overflow: auto;
 }
 
 table {
-  font-family: Arial, Helvetica, sans-serif;
-  border-collapse: collapse;
-  display: block;
-  overflow-x: auto;
+    border-collapse: collapse;
+    width: 100%;
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    overflow: hidden;
+    transition: all 0.3s;
 }
 
 td, th {
-  border: 1px solid #ddd;
-  padding: 8px;
+    border: 1px solid var(--gray);
+    padding: 12px;
+    transition: background-color 0.3s;
 }
 
-tr:nth-child(even){background-color: #f2f2f2;}
+tr:nth-child(even) {
+    background-color: #E9ECEF; /* Soft Light Gray */
+}
 
-tr:hover {background-color: #E0F2FF;}
+tr:hover {
+    background-color: #D8E2DC; /* Very Soft Gray */
+}
 
 th {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  text-align: left;
-  background-color: #0288d1;
-  color: white;
+    padding-top: 14px;
+    padding-bottom: 14px;
+    text-align: left;
+    background: var(--secondary-gradient);
+    color: var(--light-gray);
 }
 
 pre {
     background-color: #E4E4E4;
-    padding: 0.5em;
-    border-radius: 5px;
+    padding: 15px;
+    border-radius: var(--border-radius);
+    overflow-x: auto;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    scroll-margin-top: var(--margin-top);
+    color: var(--dark-gray);
+    transition: color 0.3s;
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+    body, html {
+        background-color: var(--dark-bg);
+        color: var(--dark-text);
+    }
+
+    #navbar-outer {
+        background: var(--primary-gradient);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+    }
+
+    #navbar a {
+        color: var(--dark-gray-text); /* Make navbar links text darker */
+    }
+
+    #navbar a:first-child {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #navbar a:hover {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #search {
+        background: var(--dark-card-bg);
+        color: var(--dark-text);
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a;
+    }
+
+    #search:focus {
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a, 0 0 8px 2px rgba(168, 218, 220, 0.5);
+    }
+
+    .content, .container {
+        background: var(--dark-card-bg);
+        box-shadow: 4px 4px 8px #292d31, -4px -4px 8px #5a616a;
+    }
+
+    table {
+        background-color: var(--dark-card-bg);
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+    }
+
+    td, th {
+        border: 1px solid #555;
+    }
+
+    tr:nth-child(even) {
+        background-color: #42474d; /* Dark Granite */
+    }
+
+    tr:hover {
+        background-color: #3c3f41; /* Slightly lighter dark granite */
+    }
+
+    th {
+        background: var(--primary-gradient);
+        color: var(--dark-gray-text); /* Make table header text darker */
+    }
+
+    pre {
+        background-color: #333;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        color: var(--light-blue);
+    }
+
+    a {
+        color: var(--dark-link);
+        transition: color 0.3s;
+    }
+
+    a:hover {
+        color: var(--dark-link-hover);
+    }
 }
diff --git a/README.md b/README.md
index 481eb92..7f632f5 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ It supports simple templating, so custom templates for output can be used as
 well. Will read metadata such as `Chart.yaml`, `values.yaml` or the present
 templates and generate a Markdown or HTML documentation from that data.
 
-## Example
+## Example 
 
 For an example output when running `stella` for the
 [prometheus](https://github.com/prometheus-community/helm-charts/tree/main/charts/prometheus)
@@ -30,7 +30,7 @@ helm chart, follow these links:
 
 ## Usage
 
-### Docker Image
+### 🐳 Docker Image
 
 <!-- markdownlint-disable MD013 -->
 |    | Note                                                                                                                                                                                                           |
@@ -46,7 +46,7 @@ docker run -v ${full_path_to_host_chart_dir}:/tmp/chart ghcr.io/very-doge-wow/st
 ```
 <!-- markdownlint-enable MD013 -->
 
-### Installation
+### 🛠 Installation
 
 To run it natively on your machine using pipenv:
 
@@ -66,7 +66,7 @@ pip install pyyaml markdown
 python stella.py --help
 ```
 
-### General Usage
+### 📚 General Usage
 
 <!-- markdownlint-disable MD013 -->
 ```text
@@ -94,7 +94,7 @@ additional functionality which would break when using custom CSS. It will
 create a static html site with dynamic navbar and a search for the chart's
 values.
 
-## Adding `stella` Docstrings to your Chart
+## ⎈ Adding `stella` Docstrings to your Chart
 
 Metadata is read from the present files of your chart.
 Additionally, you should also document the options given
@@ -155,7 +155,7 @@ Will yield the output:
 <!-- markdownlint-enable MD013 -->
 <!-- markdownlint-enable MD033 -->
 
-## Custom Templating
+## 📄 Custom Templating
 
 To specify a custom template, create a text/markdown file, then pass it to
 stella using the config parameter.
@@ -172,14 +172,14 @@ You can use the following fields inside your template:
 * `{{ stella.objects }}`
 * `{{ stella.values }}`
 
-## Contributing to `stella`
+## 💫 Contributing to `stella`
 
 You want to contribute? Awesome!
 Feel free to propose changes, report bugs or request features and
 improvements. But first, please read the
 [contribution guidelines](https://github.com/very-doge-wow/stella/blob/main/CONTRIBUTING.md).
 
-## Why `stella`?
+## 💭 Why `stella`?
 
 `stella` is named after
 [Tilemann Stella](https://de.wikipedia.org/wiki/Tilemann_Stella),
@@ -187,3 +187,24 @@ a scholar from the Renaissance era.
 He is most famously known for being a cartographer and for creating
 multiple waterways, which is fitting when considering the tool should
 create helm chart docs.
+
+## 🧑‍💻 Development 
+<details>
+<summary>Expand for more info</summary>
+
+### Running Unit Tests
+
+```shell
+pipenv install -d
+pipenv run pytest -vv --cov --cov-report=xml
+```
+
+### Updating Example Outputs
+
+```
+pipenv install
+pipenv run python stella.py -fh -css EXAMPLE/style.css -hcp EXAMPLE/prometheus -o EXAMPLE/prometheus.html
+pipenv run python stella.py -fh --advanced-html -hcp EXAMPLE/prometheus -o EXAMPLE/prometheus-advanced.html
+```
+
+</details>
\ No newline at end of file
diff --git a/writer/doc_writer.py b/writer/doc_writer.py
index cf309eb..fe705c5 100644
--- a/writer/doc_writer.py
+++ b/writer/doc_writer.py
@@ -113,113 +113,248 @@ def write(output: str, doc: dict, template: str, format_html: bool, advanced_htm
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>REPLACE_STRING_TITLE</title>
     <style>
-        html {
-            --blue: #0288d1;
-            --dark-blue: #006da8;
-            --light-blue: #E0F2FF;
-            --margin-top: 3em;
-        }
-        
-        body, html {
-            height: 100%;
-            margin: 0;
-            font-family: Arial, Helvetica, sans-serif;
-        }
-
-        #navbar-outer {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: auto;
-            background-color: var(--dark-blue);
-            overflow-x: hidden;
-            margin-top: 0;
-        }
-
-        #navbar, .container {
-            max-width: 80%;
-            margin: auto;
-        }
-
-        #navbar a {
-            padding: 1em;
-            text-decoration: none;
-            color: white;
-            display: inline-block;
-            height: 100%;
-        }
-
-        #navbar a:first-child {
-            background-color: var(--blue);
-            font-weight: bold;
-        }
-
-        #navbar a:hover {
-            background-color: var(--blue);
-        }
-
-        #search {
-            padding: 10px;
-            width: 90%;
-            margin: 20px auto;
-            display: block;
-        }
-        .content {
-            padding: 20px;
-            margin-top: var(--margin-top);
-        }
-        .container {
-            padding: 20px;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        
-        table {
-            border-collapse: collapse;
-            width: 100%;
-            display: block;
-            overflow: auto;
-        }
-
-        td, th {
-            border: 1px solid #ddd;
-            padding: 8px;
-        }
-
-        tr:nth-child(even){
-            background-color: #f2f2f2;
-        }
-
-        tr:hover {
-            background-color: var(--light-blue);
-        }
-
-        th {
-            padding-top: 12px;
-            padding-bottom: 12px;
-            text-align: left;
-            background-color: var(--blue);
-            color: white;
-        }
-
-        pre {
-            background-color: #E4E4E4;
-            padding: 0.5em;
-            border-radius: 5px;
-        }
-
-        #search {
-            width: 98%;
-            display: block;
-            overflow: auto;
-            font-size: medium;
-        }
-
-        h1, h2, h3, h4, h5, h6 {
-            scroll-margin-top: var(--margin-top);
-        }
+html {
+    --blue: #A8DADC;   /* Pastel Cyan */
+    --dark-blue: #457B9D;   /* Steel Blue */
+    --light-blue: #F1FAEE;  /* Honeydew */
+    --light-gray: #F8F9FA;  /* Light Gray */
+    --gray: #D8E2DC;        /* Soft Gray */
+    --dark-gray: #264653;   /* Deep Green */
+    --dark-bg: #343A40;     /* Charcoal */
+    --dark-card-bg: #495057; /* Granite */
+    --dark-text: #E9ECEF;   /* Light Gray Text for Dark Mode */
+    --darker-text: #121212; /* Dark text for Dark Mode */
+    --dark-gray-text: #264653; /* Deep Green for Dark Mode Text */
+    --dark-link: #A8DADC;   /* Pastel Cyan for Links */
+    --dark-link-hover: #81B1BD; /* Steel Blue for Hover */
+    --primary-gradient: linear-gradient(135deg, #A8DADC, #F1FAEE); /* Cyan to Honeydew */
+    --secondary-gradient: linear-gradient(135deg, #457B9D, #A8DADC); /* Steel Blue to Cyan */
+    --margin-top: 3em;
+    --border-radius: 15px;
+}
+
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: var(--light-gray);
+    color: var(--dark-gray);
+    transition: all 0.3s;
+}
+
+#navbar-outer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    background: var(--secondary-gradient);
+    overflow-x: hidden;
+    margin-top: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    transition: all 0.3s;
+}
+
+#navbar, .container {
+    max-width: 80%;
+    margin: auto;
+}
+
+#navbar a {
+    padding: 1em;
+    text-decoration: none;
+    color: var(--light-gray);
+    display: inline-block;
+    transition: background-color 0.3s, transform 0.3s;
+    border-radius: var(--border-radius);
+}
+
+#navbar a:first-child {
+    background: var(--primary-gradient);
+    font-weight: bold;
+    color: var(--dark-gray);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+#navbar a:hover {
+    background: var(--primary-gradient);
+    transform: translateY(-2px);
+    color: var(--dark-gray);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+#search {
+    position: relative;
+    padding: 15px;
+    width: 98%;
+    margin: 20px auto;
+    display: block;
+    font-size: medium;
+    color: var(--dark-gray);
+    border: none;
+    border-radius: var(--border-radius);
+    background: var(--light-gray);
+    box-shadow: inset 6px 6px 12px #ccc, inset -6px -6px 12px #fff;
+    transition: all 0.3s;
+}
+
+#search:focus {
+    box-shadow: inset 6px 6px 12px #bbb, inset -6px -6px 12px #eee, 0 0 8px 2px rgba(248, 241, 225, 0.5);
+    outline: none;
+}
+
+.content {
+    padding: 25px;
+    margin-top: var(--margin-top);
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+    background: var(--light-gray);
+}
+
+.container {
+    padding: 25px;
+    border-radius: var(--border-radius);
+    box-shadow: 4px 4px 8px #ccc, -4px -4px 8px #fff;
+    background-color: var(--light-gray);
+    transition: all 0.3s;
+}
+
+.table-container {
+    padding: 0 1em;
+    overflow: auto;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    overflow: hidden;
+    transition: all 0.3s;
+}
+
+td, th {
+    border: 1px solid var(--gray);
+    padding: 12px;
+    transition: background-color 0.3s;
+}
+
+tr:nth-child(even) {
+    background-color: #E9ECEF; /* Soft Light Gray */
+}
+
+tr:hover {
+    background-color: #D8E2DC; /* Very Soft Gray */
+}
+
+th {
+    padding-top: 14px;
+    padding-bottom: 14px;
+    text-align: left;
+    background: var(--secondary-gradient);
+    color: var(--light-gray);
+}
+
+pre {
+    background-color: #E4E4E4;
+    padding: 15px;
+    border-radius: var(--border-radius);
+    overflow-x: auto;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    scroll-margin-top: var(--margin-top);
+    color: var(--dark-gray);
+    transition: color 0.3s;
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+    body, html {
+        background-color: var(--dark-bg);
+        color: var(--dark-text);
+    }
+
+    #navbar-outer {
+        background: var(--primary-gradient);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+    }
+
+    #navbar a {
+        color: var(--dark-gray-text); /* Make navbar links text darker */
+    }
+
+    #navbar a:first-child {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #navbar a:hover {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #search {
+        background: var(--dark-card-bg);
+        color: var(--dark-text);
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a;
+    }
+
+    #search:focus {
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a, 0 0 8px 2px rgba(168, 218, 220, 0.5);
+    }
+
+    .content, .container {
+        background: var(--dark-card-bg);
+        box-shadow: 4px 4px 8px #292d31, -4px -4px 8px #5a616a;
+    }
+
+    table {
+        background-color: var(--dark-card-bg);
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+    }
+
+    td, th {
+        border: 1px solid #555;
+    }
+
+    tr:nth-child(even) {
+        background-color: #42474d; /* Dark Granite */
+    }
+
+    tr:hover {
+        background-color: #3c3f41; /* Slightly lighter dark granite */
+    }
+
+    th {
+        background: var(--primary-gradient);
+        color: var(--dark-gray-text); /* Make table header text darker */
+    }
+
+    pre {
+        background-color: #333;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        color: var(--light-blue);
+    }
+
+    a {
+        color: var(--dark-link);
+        transition: color 0.3s;
+    }
+
+    a:hover {
+        color: var(--dark-link-hover);
+    }
+}
     </style>
 </head>
 <body>
diff --git a/writer/doc_writer_test.py b/writer/doc_writer_test.py
index 3352022..d990cb7 100644
--- a/writer/doc_writer_test.py
+++ b/writer/doc_writer_test.py
@@ -487,113 +487,248 @@ def test_writer_advanced_html():
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>unittest - helm chart documentation</title>
     <style>
-        html {
-            --blue: #0288d1;
-            --dark-blue: #006da8;
-            --light-blue: #E0F2FF;
-            --margin-top: 3em;
-        }
-        
-        body, html {
-            height: 100%;
-            margin: 0;
-            font-family: Arial, Helvetica, sans-serif;
-        }
+html {
+    --blue: #A8DADC;   /* Pastel Cyan */
+    --dark-blue: #457B9D;   /* Steel Blue */
+    --light-blue: #F1FAEE;  /* Honeydew */
+    --light-gray: #F8F9FA;  /* Light Gray */
+    --gray: #D8E2DC;        /* Soft Gray */
+    --dark-gray: #264653;   /* Deep Green */
+    --dark-bg: #343A40;     /* Charcoal */
+    --dark-card-bg: #495057; /* Granite */
+    --dark-text: #E9ECEF;   /* Light Gray Text for Dark Mode */
+    --darker-text: #121212; /* Dark text for Dark Mode */
+    --dark-gray-text: #264653; /* Deep Green for Dark Mode Text */
+    --dark-link: #A8DADC;   /* Pastel Cyan for Links */
+    --dark-link-hover: #81B1BD; /* Steel Blue for Hover */
+    --primary-gradient: linear-gradient(135deg, #A8DADC, #F1FAEE); /* Cyan to Honeydew */
+    --secondary-gradient: linear-gradient(135deg, #457B9D, #A8DADC); /* Steel Blue to Cyan */
+    --margin-top: 3em;
+    --border-radius: 15px;
+}
 
-        #navbar-outer {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: auto;
-            background-color: var(--dark-blue);
-            overflow-x: hidden;
-            margin-top: 0;
-        }
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    background-color: var(--light-gray);
+    color: var(--dark-gray);
+    transition: all 0.3s;
+}
 
-        #navbar, .container {
-            max-width: 80%;
-            margin: auto;
-        }
+#navbar-outer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+    background: var(--secondary-gradient);
+    overflow-x: hidden;
+    margin-top: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+    transition: all 0.3s;
+}
 
-        #navbar a {
-            padding: 1em;
-            text-decoration: none;
-            color: white;
-            display: inline-block;
-            height: 100%;
-        }
+#navbar, .container {
+    max-width: 80%;
+    margin: auto;
+}
 
-        #navbar a:first-child {
-            background-color: var(--blue);
-            font-weight: bold;
-        }
+#navbar a {
+    padding: 1em;
+    text-decoration: none;
+    color: var(--light-gray);
+    display: inline-block;
+    transition: background-color 0.3s, transform 0.3s;
+    border-radius: var(--border-radius);
+}
 
-        #navbar a:hover {
-            background-color: var(--blue);
-        }
+#navbar a:first-child {
+    background: var(--primary-gradient);
+    font-weight: bold;
+    color: var(--dark-gray);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
 
-        #search {
-            padding: 10px;
-            width: 90%;
-            margin: 20px auto;
-            display: block;
-        }
-        .content {
-            padding: 20px;
-            margin-top: var(--margin-top);
-        }
-        .container {
-            padding: 20px;
-            border: 1px solid #ccc;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        
-        table {
-            border-collapse: collapse;
-            width: 100%;
-            display: block;
-            overflow: auto;
-        }
+#navbar a:hover {
+    background: var(--primary-gradient);
+    transform: translateY(-2px);
+    color: var(--dark-gray);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
 
-        td, th {
-            border: 1px solid #ddd;
-            padding: 8px;
-        }
+#search {
+    position: relative;
+    padding: 15px;
+    width: 98%;
+    margin: 20px auto;
+    display: block;
+    font-size: medium;
+    color: var(--dark-gray);
+    border: none;
+    border-radius: var(--border-radius);
+    background: var(--light-gray);
+    box-shadow: inset 6px 6px 12px #ccc, inset -6px -6px 12px #fff;
+    transition: all 0.3s;
+}
 
-        tr:nth-child(even){
-            background-color: #f2f2f2;
-        }
+#search:focus {
+    box-shadow: inset 6px 6px 12px #bbb, inset -6px -6px 12px #eee, 0 0 8px 2px rgba(248, 241, 225, 0.5);
+    outline: none;
+}
 
-        tr:hover {
-            background-color: var(--light-blue);
-        }
+.content {
+    padding: 25px;
+    margin-top: var(--margin-top);
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+    background: var(--light-gray);
+}
 
-        th {
-            padding-top: 12px;
-            padding-bottom: 12px;
-            text-align: left;
-            background-color: var(--blue);
-            color: white;
-        }
+.container {
+    padding: 25px;
+    border-radius: var(--border-radius);
+    box-shadow: 4px 4px 8px #ccc, -4px -4px 8px #fff;
+    background-color: var(--light-gray);
+    transition: all 0.3s;
+}
 
-        pre {
-            background-color: #E4E4E4;
-            padding: 0.5em;
-            border-radius: 5px;
-        }
+.table-container {
+    padding: 0 1em;
+    overflow: auto;
+}
 
-        #search {
-            width: 98%;
-            display: block;
-            overflow: auto;
-            font-size: medium;
-        }
+table {
+    border-collapse: collapse;
+    width: 100%;
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+    overflow: hidden;
+    transition: all 0.3s;
+}
 
-        h1, h2, h3, h4, h5, h6 {
-            scroll-margin-top: var(--margin-top);
-        }
+td, th {
+    border: 1px solid var(--gray);
+    padding: 12px;
+    transition: background-color 0.3s;
+}
+
+tr:nth-child(even) {
+    background-color: #E9ECEF; /* Soft Light Gray */
+}
+
+tr:hover {
+    background-color: #D8E2DC; /* Very Soft Gray */
+}
+
+th {
+    padding-top: 14px;
+    padding-bottom: 14px;
+    text-align: left;
+    background: var(--secondary-gradient);
+    color: var(--light-gray);
+}
+
+pre {
+    background-color: #E4E4E4;
+    padding: 15px;
+    border-radius: var(--border-radius);
+    overflow-x: auto;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    scroll-margin-top: var(--margin-top);
+    color: var(--dark-gray);
+    transition: color 0.3s;
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+    body, html {
+        background-color: var(--dark-bg);
+        color: var(--dark-text);
+    }
+
+    #navbar-outer {
+        background: var(--primary-gradient);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
+    }
+
+    #navbar a {
+        color: var(--dark-gray-text); /* Make navbar links text darker */
+    }
+
+    #navbar a:first-child {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #navbar a:hover {
+        background: var(--secondary-gradient);
+        color: var(--light-gray);
+    }
+
+    #search {
+        background: var(--dark-card-bg);
+        color: var(--dark-text);
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a;
+    }
+
+    #search:focus {
+        box-shadow: inset 6px 6px 12px #292d31, inset -6px -6px 12px #5a616a, 0 0 8px 2px rgba(168, 218, 220, 0.5);
+    }
+
+    .content, .container {
+        background: var(--dark-card-bg);
+        box-shadow: 4px 4px 8px #292d31, -4px -4px 8px #5a616a;
+    }
+
+    table {
+        background-color: var(--dark-card-bg);
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+    }
+
+    td, th {
+        border: 1px solid #555;
+    }
+
+    tr:nth-child(even) {
+        background-color: #42474d; /* Dark Granite */
+    }
+
+    tr:hover {
+        background-color: #3c3f41; /* Slightly lighter dark granite */
+    }
+
+    th {
+        background: var(--primary-gradient);
+        color: var(--dark-gray-text); /* Make table header text darker */
+    }
+
+    pre {
+        background-color: #333;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        color: var(--light-blue);
+    }
+
+    a {
+        color: var(--dark-link);
+        transition: color 0.3s;
+    }
+
+    a:hover {
+        color: var(--dark-link-hover);
+    }
+}
     </style>
 </head>
 <body>