diff --git a/static/css/colors.css b/static/css/colors.css
index 7115c04..7578491 100644
--- a/static/css/colors.css
+++ b/static/css/colors.css
@@ -1,6 +1,7 @@
/* https://color.adobe.com/create/color-contrast-analyzer */
/*dark theme*/
-body.dark{
+@media (prefers-color-scheme: dark) {
+:root {
--bg-color: #000;
/*
* #5ac
@@ -14,6 +15,7 @@ body.dark{
/*stolen from code theme*/
--blockquote-bg: rgb(29, 31, 33);
}
+}
/*
*#ABABD4;
*bs-primary-bg-subtle: #cfe2ff;
@@ -25,7 +27,8 @@ body.dark{
--bs-light-bg-subtle: #fcfcfd;
* */
/*light theme*/
-body.light{
+@media (prefers-color-scheme: light) {
+:root {
--bg-color: #e2e3e5;
--normal-text: #000;
--link-unclicked: #2535B4;
@@ -43,7 +46,7 @@ body.light{
--content-border-color: #026;
--blockquote-bg: #fff;
}
-
+}
body {
background: var(--bg-color);
color: var(--normal-text);
diff --git a/static/css/dark-code.css b/static/css/dark-code.css
index adf6a5a..72ab41b 100644
--- a/static/css/dark-code.css
+++ b/static/css/dark-code.css
@@ -1,7 +1,7 @@
/*
* wrapping Google Light so it fits my purposes
* */
-body.dark{
+@media (prefers-color-scheme: dark){
/*!
Theme: Google Dark
Author: Seth Wright (http://sethawright.com)
diff --git a/static/css/light-code.css b/static/css/light-code.css
index c418449..024f295 100644
--- a/static/css/light-code.css
+++ b/static/css/light-code.css
@@ -1,7 +1,7 @@
/*
* wrapping Google Light so it fits my purposes
* */
-body.light{
+@media (prefers-color-scheme: light){
/*!
Theme: Google Light
Author: Seth Wright (http://sethawright.com)
diff --git a/static/js/color-mode.mjs b/static/js/color-mode.mjs
index 3cafb31..2c2dd4e 100644
--- a/static/js/color-mode.mjs
+++ b/static/js/color-mode.mjs
@@ -1,4 +1,8 @@
-// this script is intentionally not a module so it'll block loading the document until we set color mode
+// DEPRECATED in favor of using in browser theme handling 8a7917a0cd34bd7637d9a9a8ad327e4b847cdeed is last commit using this
+// This code is deprecated due to the js doing some amount of fighting with inbuilt browser capabilities, such as https://developer.chrome.com/blog/paint-holding
+
+
+// (FALSE before being removed this was a module allowing for a flash of the layout without colors) this script is intentionally not a module so it'll block loading the document until we set color mode
// shamelessly stolen from https://www.joshwcomeau.com/react/dark-mode/
export function getInitialColorMode() {
diff --git a/templates/default.html b/templates/default.html
index ae73da3..ccc183b 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -6,14 +6,13 @@
{{{title}}} ยท Pagwin's website
-
+
-
-
+