diff --git a/dist/index.css b/dist/index.cjs.dark.css
similarity index 100%
rename from dist/index.css
rename to dist/index.cjs.dark.css
diff --git a/dist/index.esm.css b/dist/index.cjs.light.css
similarity index 100%
rename from dist/index.esm.css
rename to dist/index.cjs.light.css
diff --git a/dist/index.esm.dark.css b/dist/index.esm.dark.css
new file mode 100644
index 0000000..0b3873f
--- /dev/null
+++ b/dist/index.esm.dark.css
@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");.markdown{color:#d2d2d2;font-family:Inter,sans-serif;font-size:1.125rem;line-height:1.75;overflow-x:hidden}.markdown a,.markdown a>code{color:#48bb78;margin:.25rem;transition:color .15s ease-in-out}.markdown a>code{margin:-.25rem}.markdown code,.markdown pre,.markdown pre>code{color:currentColor;font-family:monospace;font-size:.875rem}.markdown code{border:1px solid rgba(64,64,64,.2);border-radius:.25rem;color:#ccc;padding:.125rem .375rem}.markdown pre>code{border:none;padding:.125rem}.markdown pre{background-color:#1a1a1a;border:1px solid rgba(64,64,64,.2);border-radius:.25rem;color:#48bb78;margin:.75rem;overflow:scroll;padding:.625rem .125rem;white-space:pre}.markdown h2>code{font-size:1.5rem;margin-top:1.5rem}.markdown h2>code,.markdown h3>code{font-family:monospace;line-height:1.25;margin-bottom:1rem}.markdown h3>code{font-size:1.25rem;margin-top:1rem}.markdown p{color:#d2d2d2;font-size:1rem;letter-spacing:.02em;line-height:1.4;margin-bottom:1.25rem;margin-top:1.25rem}.markdown strong{font-weight:700}.markdown em{font-style:italic}.markdown blockquote{background-color:rgba(96,96,96,.2);border-left:4px solid #ccc;font-style:italic;padding:.125rem .625rem}.markdown blockquote,.markdown ol,.markdown ul{font-size:1rem;margin-top:1.5rem}.markdown ul{list-style-type:disc;margin-left:1rem}.markdown ul li{padding-bottom:.25rem;padding-left:0;padding-top:.25rem}.markdown ol{list-style-type:decimal;margin-left:1rem}.markdown ol li{padding-bottom:.25rem;padding-left:0;padding-top:.25rem}.markdown hr{margin-top:2.5rem}.copy-link-h1,.copy-link-h2,.copy-link-h3,.copy-link-h4,.copy-link-h5,.copy-link-h6,.markdown h1,.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6{color:#ccc;font-weight:700;line-height:1.2;text-transform:lowercase}.copy-link-h1,.markdown h1{font-size:1.5rem;margin-bottom:.625rem;margin-top:1rem}.copy-link-h2,.markdown h2{font-size:1.25rem;margin-bottom:-.125rem;margin-top:1.25rem}.copy-link-h3,.markdown h3{font-size:1rem;margin-bottom:-.1875rem;margin-top:1rem}.copy-link-h4,.markdown h4{font-size:.875rem;margin-bottom:-.1875rem;margin-top:1.25rem}.copy-link-h5,.markdown h5{font-size:1rem;margin-top:1.25rem}.copy-link-h6,.markdown h6{font-size:.875rem;margin-top:1.25rem}.markdown table{background-color:#1a1a1a;border-collapse:collapse;border-radius:.5rem;border-spacing:0;margin:.125rem;width:100%}.markdown table tbody{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.markdown table td,.markdown table th{background-color:rgba(96,96,96,.15);border:1px solid rgba(64,64,64,.2);font-size:.875rem;padding:.75rem}.markdown table th{background-color:rgba(96,96,96,.25);font-weight:700}.markdown table td{text-align:left}.markdown table td>img{margin:0 auto;min-width:10rem}.markdown table td:first-child{border-left:none}.markdown table tr:last-child td{border-bottom:none}.markdown table tr td:last-child{border-right:none}.markdown table thead tr:first-child th:first-child{border-top-left-radius:.25rem}.markdown table thead tr:first-child th:last-child{border-top-right-radius:.25rem}.markdown table tbody tr:last-child td:first-child{border-bottom-left-radius:.25rem}.markdown table tbody tr:last-child td:last-child{border-bottom-right-radius:.25rem}ul.markdown.toc{font-size:.9rem;list-style:disc;margin-left:1.5rem;margin-top:.5rem}div.epic-remark-gist{height:400px}div.epic-remark-gist>iframe{height:100%}iframe.epic-remark-youtube{height:400px}@media (max-width:768px){.markdown table td,.markdown table th{font-size:.8rem;padding:.5rem}}
\ No newline at end of file
diff --git a/dist/index.esm.light.css b/dist/index.esm.light.css
new file mode 100644
index 0000000..0b3873f
--- /dev/null
+++ b/dist/index.esm.light.css
@@ -0,0 +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");.markdown{color:#d2d2d2;font-family:Inter,sans-serif;font-size:1.125rem;line-height:1.75;overflow-x:hidden}.markdown a,.markdown a>code{color:#48bb78;margin:.25rem;transition:color .15s ease-in-out}.markdown a>code{margin:-.25rem}.markdown code,.markdown pre,.markdown pre>code{color:currentColor;font-family:monospace;font-size:.875rem}.markdown code{border:1px solid rgba(64,64,64,.2);border-radius:.25rem;color:#ccc;padding:.125rem .375rem}.markdown pre>code{border:none;padding:.125rem}.markdown pre{background-color:#1a1a1a;border:1px solid rgba(64,64,64,.2);border-radius:.25rem;color:#48bb78;margin:.75rem;overflow:scroll;padding:.625rem .125rem;white-space:pre}.markdown h2>code{font-size:1.5rem;margin-top:1.5rem}.markdown h2>code,.markdown h3>code{font-family:monospace;line-height:1.25;margin-bottom:1rem}.markdown h3>code{font-size:1.25rem;margin-top:1rem}.markdown p{color:#d2d2d2;font-size:1rem;letter-spacing:.02em;line-height:1.4;margin-bottom:1.25rem;margin-top:1.25rem}.markdown strong{font-weight:700}.markdown em{font-style:italic}.markdown blockquote{background-color:rgba(96,96,96,.2);border-left:4px solid #ccc;font-style:italic;padding:.125rem .625rem}.markdown blockquote,.markdown ol,.markdown ul{font-size:1rem;margin-top:1.5rem}.markdown ul{list-style-type:disc;margin-left:1rem}.markdown ul li{padding-bottom:.25rem;padding-left:0;padding-top:.25rem}.markdown ol{list-style-type:decimal;margin-left:1rem}.markdown ol li{padding-bottom:.25rem;padding-left:0;padding-top:.25rem}.markdown hr{margin-top:2.5rem}.copy-link-h1,.copy-link-h2,.copy-link-h3,.copy-link-h4,.copy-link-h5,.copy-link-h6,.markdown h1,.markdown h2,.markdown h3,.markdown h4,.markdown h5,.markdown h6{color:#ccc;font-weight:700;line-height:1.2;text-transform:lowercase}.copy-link-h1,.markdown h1{font-size:1.5rem;margin-bottom:.625rem;margin-top:1rem}.copy-link-h2,.markdown h2{font-size:1.25rem;margin-bottom:-.125rem;margin-top:1.25rem}.copy-link-h3,.markdown h3{font-size:1rem;margin-bottom:-.1875rem;margin-top:1rem}.copy-link-h4,.markdown h4{font-size:.875rem;margin-bottom:-.1875rem;margin-top:1.25rem}.copy-link-h5,.markdown h5{font-size:1rem;margin-top:1.25rem}.copy-link-h6,.markdown h6{font-size:.875rem;margin-top:1.25rem}.markdown table{background-color:#1a1a1a;border-collapse:collapse;border-radius:.5rem;border-spacing:0;margin:.125rem;width:100%}.markdown table tbody{border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.markdown table td,.markdown table th{background-color:rgba(96,96,96,.15);border:1px solid rgba(64,64,64,.2);font-size:.875rem;padding:.75rem}.markdown table th{background-color:rgba(96,96,96,.25);font-weight:700}.markdown table td{text-align:left}.markdown table td>img{margin:0 auto;min-width:10rem}.markdown table td:first-child{border-left:none}.markdown table tr:last-child td{border-bottom:none}.markdown table tr td:last-child{border-right:none}.markdown table thead tr:first-child th:first-child{border-top-left-radius:.25rem}.markdown table thead tr:first-child th:last-child{border-top-right-radius:.25rem}.markdown table tbody tr:last-child td:first-child{border-bottom-left-radius:.25rem}.markdown table tbody tr:last-child td:last-child{border-bottom-right-radius:.25rem}ul.markdown.toc{font-size:.9rem;list-style:disc;margin-left:1.5rem;margin-top:.5rem}div.epic-remark-gist{height:400px}div.epic-remark-gist>iframe{height:100%}iframe.epic-remark-youtube{height:400px}@media (max-width:768px){.markdown table td,.markdown table th{font-size:.8rem;padding:.5rem}}
\ No newline at end of file
diff --git a/package.json b/package.json
index 91ecd97..06afbb4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "epic-remark",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Epic Remark is an all-in-one markdown to HTML processor built on top of remark",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
diff --git a/rollup.config.js b/rollup.config.js
index 8458ea1..6b6c65c 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,41 +3,31 @@ import commonjs from '@rollup/plugin-commonjs';
 import postcss from 'rollup-plugin-postcss';
 import { terser } from 'rollup-plugin-terser';
 
-export default [
-  // ESM build
-  {
-    input: 'src/index.js',
-    output: {
-      file: 'dist/index.esm.js',
-      format: 'esm',
-      sourcemap: false,
-    },
-    plugins: [
-      resolve(),
-      commonjs(),
-      postcss({
-        extract: true,
-        minimize: true,
-      }),
-      terser(),
-    ],
+const createConfig = (format, outputFile, cssFile) => ({
+  input: 'src/index.js',
+  output: {
+    file: `dist/${outputFile}`,
+    format: format,
+    sourcemap: false,
   },
-  // CommonJS build
-  {
-    input: 'src/index.js',
-    output: {
-      file: 'dist/index.cjs',
-      format: 'cjs',
-      sourcemap: false,
-    },
-    plugins: [
-      resolve(),
-      commonjs(),
-      postcss({
-        extract: true,
-        minimize: true,
-      }),
-      terser(),
-    ],
-  }
+  plugins: [
+    resolve(),
+    commonjs(),
+    postcss({
+      extract: `${cssFile}`,
+      minimize: true,
+    }),
+    terser(),
+  ],
+});
+
+export default [
+  // ESM build for light mode
+  createConfig('esm', 'index.esm.js', 'index.esm.light.css'),
+  // ESM build for dark mode
+  createConfig('esm', 'index.esm.js', 'index.esm.dark.css'),
+  // CommonJS build for light mode
+  createConfig('cjs', 'index.cjs', 'index.cjs.light.css'),
+  // CommonJS build for dark mode
+  createConfig('cjs', 'index.cjs', 'index.cjs.dark.css'),
 ];
diff --git a/src/index.js b/src/index.js
index 4d28de9..2ce3f74 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles-dark.css';
 import addHeadingIds from './plugins/addHeadingIds.js';
 import wrapElements from './plugins/wrapElements.js';
 import addTableOfContents from './plugins/addTableOfContents.js';
diff --git a/src/styles.css b/src/styles-dark.css
similarity index 100%
rename from src/styles.css
rename to src/styles-dark.css
diff --git a/src/styles-light.css b/src/styles-light.css
new file mode 100644
index 0000000..da1d395
--- /dev/null
+++ b/src/styles-light.css
@@ -0,0 +1,242 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+.markdown {
+    color: #333; /* Dark text for light background */
+    font-size: 1.125rem;
+    line-height: 1.75;
+    overflow-x: hidden;
+    font-family: 'Inter', sans-serif;
+}
+
+.markdown a,
+.markdown a > code {
+    color: #2b6cb0; /* A more subtle link color */
+    transition: color 0.15s ease-in-out;
+    margin: 0.25rem;
+}
+
+.markdown a > code {
+    margin: -0.25rem;
+}
+
+.markdown code,
+.markdown pre,
+.markdown pre > code {
+    font-family: monospace;
+    font-size: 0.875rem;
+    color: currentColor;
+}
+
+.markdown code {
+    border: 1px solid rgba(160, 160, 160, 0.5); /* Lighter border color */
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.375rem;
+    background-color: #f7fafc; /* Light background for inline code */
+    color: #2d3748; /* Darker text color for readability */
+}
+
+.markdown pre > code {
+    padding: 0.125rem;
+    border: none;
+}
+
+.markdown pre {
+    padding: 0.625rem 0.125rem;
+    overflow: scroll;
+    white-space: pre;
+    border: 1px solid rgba(160, 160, 160, 0.5); /* Lighter border color */
+    border-radius: 0.25rem;
+    background-color: #f7fafc; /* Light background for code blocks */
+    margin: 0.75rem;
+    color: #2d3748; /* Darker text color for readability */
+}
+
+.markdown h2 > code,
+.markdown h3 > code {
+    font-size: inherit;
+    margin-top: inherit;
+    margin-bottom: inherit;
+    line-height: inherit;
+    font-family: monospace;
+}
+
+.markdown p {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    font-size: 1rem;
+    line-height: 1.4;
+    letter-spacing: 0.02em;
+}
+
+.markdown strong {
+    font-weight: bold;
+}
+
+.markdown em {
+    font-style: italic;
+}
+
+.markdown blockquote {
+    font-style: italic;
+    background-color: rgba(200, 200, 200, 0.2); /* Lighter background for blockquote */
+    padding: 0.125rem 0.625rem;
+    border-left: 4px solid #4a5568; /* Darker border color for visibility */
+}
+
+.markdown ul,
+.markdown ol,
+.markdown blockquote {
+    margin-top: 1.5rem;
+    font-size: 1rem;
+}
+
+.markdown ul,
+.markdown ol {
+    margin-left: 1rem;
+}
+
+.markdown ul li,
+.markdown ol li {
+    padding-left: 0;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+.markdown hr {
+    margin-top: 2.5rem;
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6,
+.copy-link-h1,
+.copy-link-h2,
+.copy-link-h3,
+.copy-link-h4,
+.copy-link-h5,
+.copy-link-h6 {
+    font-weight: bold;
+    text-transform: lowercase;
+    color: #2d3748; /* Darker color for headers */
+    line-height: 1.2;
+}
+
+.markdown h1,
+.copy-link-h1 {
+    font-size: 1.5rem;
+    margin-top: 1rem;
+    margin-bottom: 0.625rem;
+}
+
+.markdown h2,
+.copy-link-h2 {
+    font-size: 1.25rem;
+    margin-top: 1.25rem;
+    margin-bottom: -0.125rem;
+}
+
+.markdown h3,
+.copy-link-h3 {
+    font-size: 1rem;
+    margin-top: 1rem;
+    margin-bottom: -0.1875rem;
+}
+
+.markdown h4,
+.copy-link-h4 {
+    font-size: 0.875rem;
+    margin-top: 1.25rem;
+    margin-bottom: -0.1875rem;
+}
+
+.markdown h5,
+.copy-link-h5,
+.markdown h6,
+.copy-link-h6 {
+    font-size: 1rem;
+    margin-top: 1.25rem;
+}
+
+.markdown table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    background-color: #fff; /* White background for tables */
+    border-radius: 0.5rem;
+    margin: 0.125rem;
+}
+
+.markdown table th,
+.markdown table td {
+    padding: 0.75rem;
+    border: 1px solid rgba(160, 160, 160, 0.5); /* Lighter border color */
+    background-color: rgba(245, 245, 245, 1); /* Very light background for table cells */
+    font-size: 0.875rem;
+}
+
+.markdown table th {
+    font-weight: bold;
+    background-color: rgba(230, 230, 230, 1); /* Slightly darker background for table headers */
+}
+
+.markdown table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.markdown table td:first-child {
+    border-left: none;
+}
+
+.markdown table tr:last-child td {
+    border-bottom: none;
+}
+
+.markdown table tr td:last-child {
+    border-right: none;
+}
+
+.markdown table thead tr:first-child th:first-child {
+    border-top-left-radius: 0.25rem;
+}
+
+.markdown table thead tr:first-child th:last-child {
+    border-top-right-radius: 0.25rem;
+}
+
+.markdown table tbody tr:last-child td:first-child {
+    border-bottom-left-radius: 0.25rem;
+}
+
+.markdown table tbody tr:last-child td:last-child {
+    border-bottom-right-radius: 0.25rem;
+}
+
+ul.markdown.toc {
+    list-style: disc;
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+}
+
+div.epic-remark-gist {
+    height: 400px;
+}
+
+div.epic-remark-gist > iframe {
+    height: 100%;
+}
+
+iframe.epic-remark-youtube {
+    height: 400px;
+}
+
+@media (max-width: 768px) {
+    .markdown table th,
+    .markdown table td {
+        padding: 0.5rem;
+        font-size: 0.8rem;
+    }
+}