diff --git a/.gitignore b/.gitignore
index 364fdec..bd25277 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 public/
+static/hl-*.css
diff --git a/sass/_code.scss b/sass/_code.scss
index 7fe0039..b06bf7b 100644
--- a/sass/_code.scss
+++ b/sass/_code.scss
@@ -8,12 +8,6 @@ pre {
 	overflow-x: scroll;
 }
 
-:root.light {
-	pre {
-		@extend .inverted;
-	}
-}
-
 p code,
 li code,
 div code {
diff --git a/templates/head.html b/templates/head.html
index 03800d5..55aa785 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -112,15 +112,22 @@
 	--metaColor: {% if config.extra.colors.light.meta_color %}{{ config.extra.colors.light.meta_color }}{% else %}#D26878{% endif %};
 	--linkColor: {% if config.extra.colors.light.link_color %}{{ config.extra.colors.light.link_color }}{% else %}#5690AF{% endif %};
 	--dateLinkColor: {% if config.extra.colors.light.date_link_color %}{{ config.extra.colors.light.date_link_color }}{% else %}#223844{% endif %};
-	--codeLineColor: {% if config.extra.colors.light.code_line_color %}{{ config.extra.colors.light.code_line_color }}{% else %}#CCCCCC{% endif %};
+	--codeLineColor: {% if config.extra.colors.light.code_line_color %}{{ config.extra.colors.light.code_line_color }}{% else %}#FFFFFF{% endif %};
 }
 </style>
+<link id="syntaxHighlighting" rel="stylesheet" type="text/css" href="{{ get_url(path='ayu-dark.css', trailing_slash=false) | safe }}" />
 <link rel="stylesheet" href="{{ get_url(path='style.css', trailing_slash=false) | safe }}"/>
 {% endblock css %}
 <script>
 const setTheme = (theme) => {
 	document.documentElement.className = theme;
 	localStorage.setItem('theme', theme);
+	var link = document.getElementById('syntaxHighlighting');
+	if (theme === 'light') {
+		link.setAttribute('href', '{{ get_url(path="hl-light.css", trailing_slash=false) | safe }}');
+	} else if (theme === 'dark') {
+		link.setAttribute('href', '{{ get_url(path="hl-dark.css", trailing_slash=false) | safe }}');
+	}
 }
 
 const hasCodeRun = localStorage.getItem('hasCodeRun');