~tristan957/tristan.partin.io

215530e3f2ab85340e99a5669a2a88c3e1c302a1 — Tristan Partin a month ago ba1c236
Remove theme picker

Too much trouble to maintain with CSP. Also less requests the better :).
6 files changed, 16 insertions(+), 80 deletions(-)

M assets/css/style.css
M config/development/server.toml
M layouts/partials/head.html
M layouts/partials/sidebar.html
D static/js/theme.js
M vercel.json
M assets/css/style.css => assets/css/style.css +14 -50
@@ 1,27 1,11 @@
:root {
  --light-color: black;
  --light-main-background-color: #fffaf0;
  --light-consistent-link-color: blue;
  --light-content-metadata-color: #484848;
  --light-box-shadow-container-color: #cccccc;
  --light-raised-backgroud-color: white;
  --light-blockquote-background-color: #e5e5e5;

  --dark-color: white;
  --dark-main-background-color: #2d2d2d;
  --dark-consistent-link-color: #7db3e3;
  --dark-content-metadata-color: #d4d4d4;
  --dark-box-shadow-container-color: #222222;
  --dark-raised-backgroud-color: #393939;
  --dark-blockquote-background-color: #1b1b1b;

  --color: var(--light-color);
  --main-background-color: var(--light-main-background-color);
  --consistent-link-color: var(--light-consistent-link-color);
  --content-metadata-color: var(--light-content-metadata-color);
  --box-shadow-container-color: var(--light-box-shadow-container-color);
  --raised-backgroud-color: var(--light-raised-backgroud-color);
  --blockquote-background-color: var(--light-raised-backgroud-color);
  --color: black;
  --main-background-color: #fffaf0;
  --consistent-link-color: blue;
  --content-metadata-color: #484848;
  --box-shadow-container-color: #cccccc;
  --raised-backgroud-color: white;
  --blockquote-background-color: #e5e5e5;

  --primary-accent-color: #f48024;
  --secondary-accent-color: #77216f;


@@ 31,36 15,16 @@

@media (prefers-color-scheme: dark) {
  :root {
    --color: var(--dark-color);
    --main-background-color: var(--dark-main-background-color);
    --consistent-link-color: var(--dark-consistent-link-color);
    --content-metadata-color: var(--dark-content-metadata-color);
    --box-shadow-container-color: var(--dark-box-shadow-container-color);
    --raised-backgroud-color: var(--dark-raised-backgroud-color);
    --blockquote-background-color: var(--dark-blockquote-background-color);
    --color: white;
    --main-background-color: #2d2d2d;
    --consistent-link-color: #7db3e3;
    --content-metadata-color: #d4d4d4;
    --box-shadow-container-color: #222222;
    --raised-backgroud-color: #393939;
    --blockquote-background-color: #1b1b1b;
  }
}

[site-theme="light"]:root {
  --color: var(--light-color);
  --main-background-color: var(--light-main-background-color);
  --consistent-link-color: var(--light-consistent-link-color);
  --content-metadata-color: var(--light-content-metadata-color);
  --box-shadow-container-color: var(--light-box-shadow-container-color);
  --raised-backgroud-color: var(--light-raised-backgroud-color);
  --blockquote-background-color: var(--light-blockquote-background-color);
}

[site-theme="dark"]:root {
  --color: var(--dark-color);
  --main-background-color: var(--dark-main-background-color);
  --consistent-link-color: var(--dark-consistent-link-color);
  --content-metadata-color: var(--dark-content-metadata-color);
  --box-shadow-container-color: var(--dark-box-shadow-container-color);
  --raised-backgroud-color: var(--dark-raised-backgroud-color);
  --blockquote-background-color: var(--dark-blockquote-background-color);
}

* {
  font-family: sans-serif, Arial, Helvetica;
  color: var(--color);

M config/development/server.toml => config/development/server.toml +1 -1
@@ 5,7 5,7 @@
  X-Content-Type-Options = "nosniff"
  Permissions-Policy = "accelerometer 'none'; ambient-light-sensor 'none'; autoplay 'none'; battery 'none'; camera 'none'; display-capture 'none'; document-domain 'none'; encrypted-media 'none'; fullscreen 'none'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; navigation-override 'none'; payment 'none'; publickey-credentials-get 'none'; usb 'none'; wake-lock 'none'; xr-spatial-tracking 'none'; interest-cohort=()"
  # script-src has self/unsafe-inline and connect-src exists for live reload on local server
  Content-Security-Policy = "default-src 'none'; style-src 'self'; script-src 'self' 'unsafe-inline'; img-src 'self' https:; media-src 'self' https:; connect-src 'self'"
  Content-Security-Policy = "default-src 'none'; style-src 'self'; script-src 'self'; img-src 'self' https:; media-src 'self' https:; connect-src 'self'"
  Referrer-Policy = "strict-origin-when-cross-origin"
  Cross-Origin-Opener-Policy = "same-origin"
  Cross-Origin-Embedder-Policy = "require-corp"

M layouts/partials/head.html => layouts/partials/head.html +0 -1
@@ 59,7 59,6 @@
		{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
	{{ end -}}

	<script type="text/javascript" src="/js/theme.js" defer></script>
	<title>{{ .Title }} - {{ .Site.Author.name }}</title>
	<link rel="canonical" href="{{ .Permalink }}" />
	<link rel="icon" type="image/x-icon" href="/favicon.ico" />

M layouts/partials/sidebar.html => layouts/partials/sidebar.html +0 -1
@@ 49,7 49,6 @@
			{{ end }}
		</ul>
	</address>
	<button id="theme-btn" type="button" class="btn no-js">Toggle Theme</button>
	<hr />
	<div class="sidebar-section">
		{{ with .Site.Params.licenses }}

D static/js/theme.js => static/js/theme.js +0 -26
@@ 1,26 0,0 @@
function isDarkModeEnabled() {
  const siteTheme = window.localStorage.getItem("site-theme");
  return (
    (window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches &&
      siteTheme !== "light") ||
    siteTheme === "dark"
  );
}

function switchTheme(dark) {
  if (dark) {
    document.documentElement.setAttribute("site-theme", "dark");
    window.localStorage.setItem("site-theme", "dark");
    darkModePreferred = true;
  } else {
    document.documentElement.setAttribute("site-theme", "light");
    window.localStorage.setItem("site-theme", "light");
    darkModePreferred = false;
  }
}

switchTheme(isDarkModeEnabled());

const themeButton = document.getElementById("theme-btn");
themeButton.addEventListener("click", () => switchTheme(!isDarkModeEnabled()));

M vercel.json => vercel.json +1 -1
@@ 18,7 18,7 @@
        },
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'none'; style-src 'self'; script-src 'self'; img-src 'self' https:; media-src 'self' https:"
          "value": "default-src 'none'; style-src 'self'; img-src 'self' https:; media-src 'self' https:"
        },
        {
          "key": "Referrer-Policy",