diff --git a/docs/_config.yml b/docs/_config.yml
index 33a85609..fac90591 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -1,5 +1,6 @@
-remote_theme: "mmistakes/minimal-mistakes@4.22.0"
+remote_theme: "mmistakes/minimal-mistakes@4.24.0"
 minimal_mistakes_skin: "default" #"air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum" "sunrise"
+minimal_mistakes_skin2: "dark"
 url:
 name: Roblox
 title: Luau
diff --git a/docs/_includes/masthead.html b/docs/_includes/masthead.html
new file mode 100644
index 00000000..0fdb5c38
--- /dev/null
+++ b/docs/_includes/masthead.html
@@ -0,0 +1,74 @@
+{% capture logo_path %}{{ site.logo }}{% endcapture %}
+
+<div class="masthead">
+	<div class="masthead__inner-wrap">
+		<div class="masthead__menu">
+			<nav id="site-nav" class="greedy-nav">
+				{% unless logo_path == empty %}
+				<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}"
+						alt="{{ site.masthead_title | default: site.title }}"></a>
+				{% endunless %}
+				<a class="site-title" href="{{ '/' | relative_url }}">
+					{{ site.masthead_title | default: site.title }}
+					{% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
+				</a>
+				<ul class="visible-links">
+					{%- for link in site.data.navigation.main -%}
+					<li class="masthead__menu-item">
+						<a href="{{ link.url | relative_url }}" {% if link.description %} title="{{ link.description }}"
+							{% endif %}>{{ link.title }}</a>
+					</li>
+					{%- endfor -%}
+				</ul>
+				<i class="fas fa-fw fa-adjust" aria-hidden="true" onclick="toggleTheme()"></i>
+				{% if site.search == true %}
+				<button class="search__toggle" type="button">
+					<span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle
+						search" }}</span>
+					<i class="fas fa-search"></i>
+				</button>
+				{% endif %}
+				<button class="greedy-nav__toggle hidden" type="button">
+					<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu"
+						}}</span>
+					<div class="navicon"></div>
+				</button>
+				<ul class="hidden-links hidden"></ul>
+			</nav>
+		</div>
+	</div>
+</div>
+
+<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}" id="theme_source">
+<link rel="stylesheet alternate" href="{{ '/assets/css/theme2.css' | relative_url }}" id="theme_source_2">
+
+<script>
+	let theme = sessionStorage.getItem('theme');
+	if (theme === "dark") {
+		sessionStorage.setItem('theme', 'dark');
+		node1 = document.getElementById('theme_source');
+		node2 = document.getElementById('theme_source_2');
+		node1.setAttribute('rel', 'stylesheet alternate');
+		node2.setAttribute('rel', 'stylesheet');
+	}
+	else {
+		sessionStorage.setItem('theme', 'light');
+	}
+
+	function toggleTheme() {
+		node1 = document.getElementById("theme_source");
+		node2 = document.getElementById("theme_source_2");
+		if (node1.getAttribute("rel") == "stylesheet") {
+			node1.setAttribute("rel", "stylesheet alternate");
+			node2.setAttribute("rel", "stylesheet");
+			editor.setOption("theme", "dark");
+			sessionStorage.setItem("theme", "dark");
+		} else {
+			node2.setAttribute("rel", "stylesheet alternate");
+			node1.setAttribute("rel", "stylesheet");
+			editor.setOption("theme", "light");
+			sessionStorage.setItem("theme", "light");
+		}
+		return false;
+	}
+</script>
\ No newline at end of file
diff --git a/docs/_includes/repl.html b/docs/_includes/repl.html
index e769643b..984ccb3f 100644
--- a/docs/_includes/repl.html
+++ b/docs/_includes/repl.html
@@ -1,100 +1,149 @@
 <form>
-    <div>
-        <label class="header-center"><b>Input</b></label>
-        <br>
-        <textarea rows="10" cols="70" id="script"></textarea>
-        <div class="button-group">
-            <button onclick="executeScript(); return false;" class="demo-button">Run</button>
-            <input type="checkbox" checked="true" class="demo-button" id="output-clear" />
-            <label for="output-clear">Clear Output</label>
-        </div>
-    </div>
-    <div>
-        <label class="header-center"><b>Output</b></label>
-        <br>
-        <textarea readonly rows="10" cols="70" id="output"></textarea>
-    </div>
+	<div>
+		<label class="header-center"><b>Input</b></label>
+		<br>
+		<textarea rows="10" cols="80" id="script"></textarea>
+		<div class="button-group">
+			<button onclick="executeScript(); return false;" class="demo-button">Run</button>
+			<label for="output-clear">Clear Output</label>
+			<input type="checkbox" checked="true" id="output-clear" />
+		</div>
+	</div>
+	<div>
+		<label class="header-center"><b>Output</b></label>
+		<br>
+		<textarea readonly rows="10" cols="70" id="output"></textarea>
+	</div>
 </form>
 
 <!-- Styles for editor -->
 <style>
-    .header-center {
-        text-align: center;
-    }
+	.header-center {
+		text-align: center;
+	}
 
-    .demo-button {
-        padding: 7px 7px;
-        vertical-align: middle;
-    }
-    .line-error {
-        background: #e65f55;
-    }
+	.demo-button {
+		padding: 7px 7px;
+		vertical-align: middle;
+	}
+
+	.line-error {
+		background: #e65f55;
+	}
 </style>
 
 <!-- CodeMirror -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/addon/edit/matchbrackets.min.js"></script>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/addon/edit/matchbrackets.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.css" />
+
+
+<style>
+	.cm-s-dark.CodeMirror {background: rgb(37, 37, 37); color: rgb(204, 204, 204);}
+	.cm-s-dark div.CodeMirror-selected {background: rgb(11, 90, 175) !important;}
+	.cm-s-dark .CodeMirror-gutters {background: rgb(50, 50, 50); border-right: 0px;}
+	.cm-s-dark .CodeMirror-linenumber {color: rgb(204, 204, 204);}
+	.cm-s-dark .CodeMirror-cursor {border-left: 1px solid rgb(204, 204, 204) !important;}
+
+	.cm-s-dark span.cm-comment {color: rgb(102, 102, 102);}
+	.cm-s-dark span.cm-atom {color: rgb(255, 198, 0);}
+	.cm-s-dark span.cm-number {color: rgb(255, 198, 0);}
+
+	.cm-s-dark span.cm-keyword {color: rgb(248, 109, 124);}
+	.cm-s-dark span.cm-string {color: rgb(173, 241, 149);}
+
+	.cm-s-dark span.cm-variable {color: rgb(204, 204, 204);}
+	.cm-s-dark span.cm-builtin {color:rgb(132, 214, 247);}
+	.cm-s-dark span.cm-bracket {color: rgb(204, 204, 204);}
+	.cm-s-dark span.cm-tag {color: rgb(255, 0, 0);}
+
+	.cm-s-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
+	.cm-s-dark .CodeMirror-activeline-background { background: #202020; }
+</style>
+
+<style>
+	.cm-s-light.CodeMirror {background: white; color: black;}
+	.cm-s-light div.CodeMirror-selected {background: rgb(110, 161, 241) !important;}
+	.cm-s-light .CodeMirror-gutters {background: rgb(221, 221, 221); border-right: 0px;}
+	.cm-s-light .CodeMirror-linenumber {color: black;}
+	.cm-s-light .CodeMirror-cursor {border-left: 1px solid black !important;}
+
+	.cm-s-light span.cm-comment {color: rgb(0, 127, 9);}
+	.cm-s-light span.cm-atom {color: rgb(0, 127, 127);}
+	.cm-s-light span.cm-number {color: rgb(0, 127, 127);}
+
+	.cm-s-light span.cm-keyword {color: rgb(0, 0, 127);}
+	.cm-s-light span.cm-string {color: rgb(127, 0, 127);}
+
+	.cm-s-light span.cm-variable {color: black;}
+	.cm-s-light span.cm-builtin {color:rgb(127, 0, 0);}
+	.cm-s-light span.cm-bracket {color: rgb(127, 127, 0);}
+	.cm-s-light span.cm-tag {color: rgb(255, 0, 0);}
+
+	.cm-s-light .CodeMirror-matchingbracket { text-decoration: underline; color: black !important;}
+	.cm-s-light .CodeMirror-activeline-background { background: #202020; }
+</style>
+
 <!-- Luau Parser for CodeMirror -->
 <script src="assets/js/luau_mode.js"></script>
 <!-- CodeMirror Luau Editor (MUST BE LOADED AFTER CODEMIRROR!) -->
 <script>
-    var editor = CodeMirror.fromTextArea(document.getElementById("script"), {
-        theme: "default",
-        mode: "luau",
-        matchBrackets: true,
-        lineNumbers: true,
-        smartIndent: true,
-        indentWithTabs: true,
-        indentUnit: 4,
-    });
-    editor.setValue("print(\"Hello World!\")\n");
-        editor.addKeyMap({
-        "Ctrl-Enter": function(cm) {
-            executeScript();
-        },
-        "Shift-Tab": function (cm) {
-            // dedent functionality
-            cm.execCommand("indentLess");
-        }
-    });
+	var editor = CodeMirror.fromTextArea(document.getElementById("script"), {
+		theme: sessionStorage.getItem('theme'),
+		mode: "luau",
+		matchBrackets: true,
+		lineNumbers: true,
+		smartIndent: true,
+		indentWithTabs: true,
+		indentUnit: 4
+	});
+	editor.setValue("print(\"Hello World!\")\n");
+	editor.addKeyMap({
+		"Ctrl-Enter": function (cm) {
+			executeScript();
+		},
+		"Shift-Tab": function (cm) {
+			// dedent functionality
+			cm.execCommand("indentLess");
+		}
+	});
 
-    var lastError = undefined;
+	var lastError = undefined;
 
-    function output(text) {
-        var output_box = document.getElementById("output");
-        output_box.value += text.replace('stdin:', '') + "\n";
-        // scroll to bottom
-        output_box.scrollTop = output_box.scrollHeight;
-    }
+	function output(text) {
+		var output_box = document.getElementById("output");
+		output_box.value += text.replace('stdin:', '') + "\n";
+		// scroll to bottom
+		output_box.scrollTop = output_box.scrollHeight;
+	}
 
-    var Module = {
-        'print': function (msg) { output(msg) }
-    };
+	var Module = {
+		'print': function (msg) { output(msg) }
+	};
 
-    function executeScript() {
-        if (lastError) {
-            editor.removeLineClass(lastError, "background", "line-error");
-            lastError = undefined;
-        }
+	function executeScript() {
+		if (lastError) {
+			editor.removeLineClass(lastError, "background", "line-error");
+			lastError = undefined;
+		}
 
-        var output_clear = document.getElementById("output-clear");
-        if (output_clear.checked) {
-            var output_box = document.getElementById("output");
-            output_box.value = '';
-        }
+		var output_clear = document.getElementById("output-clear");
+		if (output_clear.checked) {
+			var output_box = document.getElementById("output");
+			output_box.value = '';
+		}
 
-        var err = Module.ccall('executeScript', 'string', ['string'], [editor.getValue()]);
-        if (err) {
-            var err_text = err.replace('stdin:', '');
-            output('Error:' + err_text);
+		var err = Module.ccall('executeScript', 'string', ['string'], [editor.getValue()]);
+		if (err) {
+			var err_text = err.replace('stdin:', '');
+			output('Error:' + err_text);
 
-            var err_line = parseInt(err_text);
-            if (err_line) {
-                lastError = editor.addLineClass(err_line-1, "background", "line-error");
-            }
-        }
-    }
+			var err_line = parseInt(err_text);
+			if (err_line) {
+				lastError = editor.addLineClass(err_line - 1, "background", "line-error");
+			}
+		}
+	}
 </script>
 <!-- Luau WASM (async fetch; should be the last line) -->
-<script async src="https://github.com/Roblox/luau/releases/latest/download/Luau.Web.js"></script>
+<script async src="https://github.com/Roblox/luau/releases/latest/download/Luau.Web.js"></script>
\ No newline at end of file
diff --git a/docs/assets/css/theme2.scss b/docs/assets/css/theme2.scss
new file mode 100644
index 00000000..21710d40
--- /dev/null
+++ b/docs/assets/css/theme2.scss
@@ -0,0 +1,8 @@
+---
+
+---
+
+@charset "utf-8";
+
+@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin2 | default: 'default' }}"; // skin
+@import "minimal-mistakes"; // main partials
\ No newline at end of file