Merge style sheets for light and dark themes into a single resource

This will avoid having inline style, which is annoying for stricter CSP. It should improve performances, as there is only a single file to load. As a bonus, I also included resource fingerprinting, which will avoid breaking the cache when it's not needed, and adds subresource integrity checksum.
Mitrichius · Oct 23, 2020 · db7e625 · db7e625
1 parent 9e524ff
commit db7e625
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 24 deletions.
diff --git a/layouts/partials/dark.css → assets/css/dark.css b/layouts/partials/dark.css → assets/css/dark.css
@@ -1,3 +1,4 @@
+/* dark.css */ 
 --font-color: #eee;
 --bg-color: #212121;
 

diff --git a/static/css/light.css → assets/css/light.css b/static/css/light.css → assets/css/light.css
@@ -1,4 +1,5 @@
 :root {
+   /* light.css */ 
     --font-color: #333;
     --bg-color: #fff;
 
@@ -11,7 +12,7 @@
 
     --pre-color: #333;
     --pre-bg-color: #f1f1f1;
-    
+
     --bq-color: #ccc;
     --hr-color: #ccc;
 

diff --git a/static/css/style.css → assets/css/main.css b/static/css/style.css → assets/css/main.css
@@ -1,3 +1,24 @@
+{{ $light := resources.Get "css/light.css" }}
+{{ $dark := resources.Get "css/dark.css" }}
+
+{{ $light.Content }}
+
+{{ if eq site.Params.style "dark-without-switcher" }}
+:root {
+    {{ $dark.Content }}
+}
+{{ else if eq site.Params.style "auto-without-switcher" }}
+@media (prefers-color-scheme: dark) {
+    :root {
+        {{ $dark.Content }}
+    }
+}
+{{else }}
+[data-theme="dark"] {
+    {{ $dark.Content }}
+}
+{{ end }}
+
 /* Basic */
 html {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -123,7 +144,7 @@ th, td {
 
 /* Code */
 pre {
-    color: var(--pre-color)
+    color: var(--pre-color);
     background-color: var(--pre-bg-color);
     padding: 1em;
     max-width: 100%;

diff --git a/layouts/partials/cssColors.html b/layouts/partials/cssColors.html
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
@@ -14,9 +14,9 @@
 <link rel="icon" type="image/x-icon" href="{{ "favicon.ico" | absURL }}">
 <link rel="apple-touch-icon-precomposed" href="{{ "favicon.png" | absURL }}">
 
-<link rel="stylesheet" href="{{ "css/light.css" | absURL }}?rnd={{ now.Unix }}" />
-{{ partial "cssColors.html" }}
-<link rel="stylesheet" href="{{ "css/style.css" | absURL }}?rnd={{ now.Unix }}" />
+{{ $cssTemplate := resources.Get "css/main.css" }}
+{{ $style := $cssTemplate | resources.ExecuteAsTemplate "css/style.css" . | resources.ToCSS  | resources.Fingerprint "sha256" }}
+<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
 
 {{ range .Site.Params.customCSS -}}
 <link rel="stylesheet" href="{{ . | absURL }}?rnd={{ now.Unix }}">
@@ -39,4 +39,4 @@
     {{ template "_internal/google_analytics_async.html" . }}
 {{ end }}
 
-{{ partial "head-extra.html" . }}
+{{ partial "head-extra.html" . }}