Support dark mode theme (#142)

* Support dark mode theme * Add dark mode to 404 and package pages * Fix tests
uber-go · Mar 12, 2024 · d7c76af · d7c76af
1 parent 9310ba4
commit d7c76af
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 0 deletions.
diff --git a/handler_test.go b/handler_test.go
@@ -62,6 +62,13 @@ func TestPackageShouldExist(t *testing.T) {
     <head>
         <meta name="go-import" content="go.uber.org/yarpc git https://github.com/yarpc/yarpc-go">
         <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/go.uber.org/yarpc">
+        <style>
+            @media (prefers-color-scheme: dark) {
+                body { background-color: #333; color: #ddd; }
+                a { color: #ddd; }
+                a:visited { color: #bbb; }
+            }
+        </style>
     </head>
     <body>
         Nothing to see here. Please <a href="https://pkg.go.dev/go.uber.org/yarpc">move along</a>.
@@ -77,6 +84,11 @@ func TestNonExistentPackageShould404(t *testing.T) {
 <html>
     <head>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
+        <style>
+            @media (prefers-color-scheme: dark) {
+                body { background-color: #333; color: #ddd; }
+            }
+        </style>
     </head>
     <body>
         <div class="container">
@@ -95,6 +107,13 @@ func TestTrailingSlash(t *testing.T) {
     <head>
         <meta name="go-import" content="go.uber.org/yarpc git https://github.com/yarpc/yarpc-go">
         <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/go.uber.org/yarpc/">
+        <style>
+            @media (prefers-color-scheme: dark) {
+                body { background-color: #333; color: #ddd; }
+                a { color: #ddd; }
+                a:visited { color: #bbb; }
+            }
+        </style>
     </head>
     <body>
         Nothing to see here. Please <a href="https://pkg.go.dev/go.uber.org/yarpc/">move along</a>.
@@ -111,6 +130,13 @@ func TestDeepImports(t *testing.T) {
     <head>
         <meta name="go-import" content="go.uber.org/yarpc git https://github.com/yarpc/yarpc-go">
         <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/go.uber.org/yarpc/heeheehee">
+        <style>
+            @media (prefers-color-scheme: dark) {
+                body { background-color: #333; color: #ddd; }
+                a { color: #ddd; }
+                a:visited { color: #bbb; }
+            }
+        </style>
     </head>
     <body>
         Nothing to see here. Please <a href="https://pkg.go.dev/go.uber.org/yarpc/heeheehee">move along</a>.
@@ -125,6 +151,13 @@ func TestDeepImports(t *testing.T) {
     <head>
         <meta name="go-import" content="go.uber.org/yarpc git https://github.com/yarpc/yarpc-go">
         <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/go.uber.org/yarpc/heehee/hawhaw">
+        <style>
+            @media (prefers-color-scheme: dark) {
+                body { background-color: #333; color: #ddd; }
+                a { color: #ddd; }
+                a:visited { color: #bbb; }
+            }
+        </style>
     </head>
     <body>
         Nothing to see here. Please <a href="https://pkg.go.dev/go.uber.org/yarpc/heehee/hawhaw">move along</a>.
@@ -141,6 +174,13 @@ func TestPackageLevelURL(t *testing.T) {
     <head>
         <meta name="go-import" content="go.uberalt.org/zap git https://github.com/uber-go/zap">
         <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/go.uberalt.org/zap">
+        <style>
+            @media (prefers-color-scheme: dark) {
+                body { background-color: #333; color: #ddd; }
+                a { color: #ddd; }
+                a:visited { color: #bbb; }
+            }
+        </style>
     </head>
     <body>
         Nothing to see here. Please <a href="https://pkg.go.dev/go.uberalt.org/zap">move along</a>.
@@ -312,6 +352,13 @@ func TestCustomTemplates(t *testing.T) {
     <head>
         <meta name="go-import" content="go.uberalt.org/zap git https://github.com/uber-go/zap">
         <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/go.uberalt.org/zap">
+        <style>
+            @media (prefers-color-scheme: dark) {
+                body { background-color: #333; color: #ddd; }
+                a { color: #ddd; }
+                a:visited { color: #bbb; }
+            }
+        </style>
     </head>
     <body>
         Nothing to see here. Please <a href="https://pkg.go.dev/go.uberalt.org/zap">move along</a>.

diff --git a/templates/404.html b/templates/404.html
@@ -2,6 +2,11 @@
 <html>
     <head>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" />
+        <style>
+            @media (prefers-color-scheme: dark) {
+                body { background-color: #333; color: #ddd; }
+            }
+        </style>
     </head>
     <body>
         <div class="container">

diff --git a/templates/index.html b/templates/index.html
@@ -16,6 +16,14 @@
             .table-header { display: block; }
             .inline-header { display: none; }
         }
+
+        @media (prefers-color-scheme: dark) {
+            body { background-color: #333; color: #ddd; }
+            a { color: #ddd; }
+            a:visited { color: #bbb; }
+            .description { color: #bbb; }
+            .separator { border-color: #666; }
+        }
     </style>
     <body>
         <div class="container">

diff --git a/templates/package.html b/templates/package.html
@@ -3,6 +3,13 @@
     <head>
         <meta name="go-import" content="{{ .ModulePath }} {{ .VCS }} https://{{ .RepoURL }}">
         <meta http-equiv="refresh" content="0; url={{ .DocURL }}">
+        <style>
+            @media (prefers-color-scheme: dark) {
+                body { background-color: #333; color: #ddd; }
+                a { color: #ddd; }
+                a:visited { color: #bbb; }
+            }
+        </style>
     </head>
     <body>
         Nothing to see here. Please <a href="{{ .DocURL }}">move along</a>.