paper_view 0.2.1 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e74561ab048bdc7e58f0b46e1771ed22dc0639248fabd4f73cc4d57255b03351
-  data.tar.gz: eb30982ddad7c762f35f63bd1e2e9fde35a47616584fe0dbc446fde562f2836b
+  metadata.gz: b5987bab41c6b08b669d05da7cb0331e056f1d05dfa1d9bceae4e1555615a020
+  data.tar.gz: c37ad5a8c3499c47b191fc12219a1cf3cb515193b0c5ca44e4e28153a6916fa5
 SHA512:
-  metadata.gz: e8bd5fa49f64607df5b87c31747759a8f5b0a46a90b490f42504b74733cadaebbd86d9c342bdf4ee9a89012c260522abd3c91062ff5a6b795b2517ac4015e5c2
-  data.tar.gz: be954c77e76e95a4ad341bb41c97e3499ca69c661eaae800ddd8aa13fbf8c4fd8d5142c2876376f789872af4a1134ac11c8fa059bdfc56e97a2fcf949f3ded64
+  metadata.gz: 3b00f0527ce236c1b3184a6004ea6811a40e8abc64dbcfe266554ec9c8a8c52ec0afc6ad55aa5217bcdf2b5874946d4be19ea060a863e41ea7ee869e66ec7d5b
+  data.tar.gz: 72bbab79a05fc2e021f90c7b7baa65e1ca0cba077d0cf5dc009589f0c1cd1c5895b68e52922ef550211a63cec792158a08852853939043979b8f2dbc7ff09032

data/app/views/layouts/paper_view/application.html.erb

@@ -19,6 +19,8 @@
   </head>
 
   <body>
+    <%= render "paper_view/shared/theme" %>
+
     <header class="pv-header">
       <%= link_to root_path, class: "pv-header__brand" do %>
         PaperView
@@ -29,9 +31,16 @@
         <%= link_to "Stats", stats_path, class: paper_view_nav_class(controller_name == "stats") %>
       </nav>
 
-      <% if main_app.respond_to?(:root_path) %>
-        <span class="pv-header__meta"><%= link_to "← Back to app", main_app.root_path, data: {turbo: false} %></span>
-      <% end %>
+      <div class="pv-header__right">
+        <% if main_app.respond_to?(:root_path) %>
+          <span class="pv-header__meta"><%= link_to "← Back to app", main_app.root_path, data: {turbo: false} %></span>
+        <% end %>
+
+        <button type="button" class="pv-header__theme" data-pv-theme-toggle title="Switch between light and dark">
+          <span class="pv-theme__to-dark">☾ Dark</span>
+          <span class="pv-theme__to-light">☀ Light</span>
+        </button>
+      </div>
     </header>
 
     <main class="pv-main pv-stack">

data/app/views/paper_view/shared/_script.html.erb

@@ -176,6 +176,18 @@
       }
     });
 
+    document.addEventListener("click", function (event) {
+      if (!event.target.closest("[data-pv-theme-toggle]")) return;
+
+      var root = document.documentElement;
+      var stored = root.getAttribute("data-pv-theme");
+      var dark = stored ? stored === "dark" : window.matchMedia("(prefers-color-scheme: dark)").matches;
+      var next = dark ? "light" : "dark";
+
+      root.setAttribute("data-pv-theme", next);
+      try { localStorage.setItem("pv-theme", next); } catch (error) {}
+    });
+
     document.addEventListener("change", function (event) {
       var select = event.target.closest("select[data-pv-autosubmit]");
       if (!select || !select.form) return;

data/app/views/paper_view/shared/_styles.html.erb

@@ -38,8 +38,13 @@
     --pv-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   }
 
+  :root[data-pv-theme="light"] { color-scheme: light; }
+  :root[data-pv-theme="dark"] { color-scheme: dark; }
+  .pv-theme__to-light { display: none; }
+
+  /* The dark palette is spelled out twice because a media query and the attribute override cannot share a selector. */
   @media (prefers-color-scheme: dark) {
-    :root {
+    :root:not([data-pv-theme="light"]) {
       --pv-bg: #0d1117;
       --pv-surface: #161b22;
       --pv-surface-muted: #1b212a;
@@ -68,7 +73,41 @@
       --pv-warn: #e3b341;
       --pv-warn-bg: #2b2209;
     }
+    :root:not([data-pv-theme="light"]) .pv-theme__to-dark { display: none; }
+    :root:not([data-pv-theme="light"]) .pv-theme__to-light { display: inline; }
+  }
+
+  :root[data-pv-theme="dark"] {
+    --pv-bg: #0d1117;
+    --pv-surface: #161b22;
+    --pv-surface-muted: #1b212a;
+    --pv-row-hover: #1b212a;
+    --pv-row-selected: #16233b;
+    --pv-border: #272e38;
+    --pv-border-subtle: #21262d;
+    --pv-border-input: #39414d;
+    --pv-pill-bg: #21262d;
+    --pv-ink: #e6edf3;
+    --pv-ink-secondary: #c9d1d9;
+    --pv-ink-muted: #b1bac4;
+    --pv-ink-soft: #9198a1;
+    --pv-ink-faint: #6e7681;
+    --pv-accent: #4a8bff;
+    --pv-accent-hover: #79a9ff;
+    --pv-dot: #39414d;
+    --pv-skeleton: #232a33;
+    --pv-skeleton-sheen: #2f3945;
+    --pv-del: #ff7b72;
+    --pv-del-bg: #2d1618;
+    --pv-del-rule: #7d2a2a;
+    --pv-add: #57d364;
+    --pv-add-bg: #12261a;
+    --pv-add-rule: #2b6b36;
+    --pv-warn: #e3b341;
+    --pv-warn-bg: #2b2209;
   }
+  :root[data-pv-theme="dark"] .pv-theme__to-dark { display: none; }
+  :root[data-pv-theme="dark"] .pv-theme__to-light { display: inline; }
 
   body {
     margin: 0;
@@ -99,7 +138,8 @@
   }
   .pv-header__brand { display: flex; align-items: center; gap: 8px; color: var(--pv-ink); font-size: 15px; font-weight: 650; }
   .pv-header__brand:hover { color: var(--pv-ink); text-decoration: none; }
-  .pv-header__meta { display: flex; align-items: center; margin-left: auto; color: var(--pv-ink-soft); font-size: 12.5px; }
+  .pv-header__right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
+  .pv-header__meta { display: flex; align-items: center; color: var(--pv-ink-soft); font-size: 12.5px; }
   .pv-header__nav { display: flex; align-items: stretch; gap: 20px; }
   .pv-header__link {
     display: flex;
@@ -111,6 +151,18 @@
   }
   .pv-header__link:hover { color: var(--pv-ink); text-decoration: none; }
   .pv-header__link--active { color: var(--pv-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--pv-ink); }
+  .pv-header__theme {
+    padding: 4px 11px;
+    background: transparent;
+    border: 1px solid var(--pv-border);
+    border-radius: 999px;
+    color: var(--pv-ink-soft);
+    font: inherit;
+    font-size: 12.5px;
+    line-height: 1.5;
+    cursor: pointer;
+  }
+  .pv-header__theme:hover { border-color: var(--pv-border-input); color: var(--pv-ink); }
 
   .pv-main { max-width: 1560px; margin: 0 auto; padding: 24px; }
   .pv-stack { display: flex; flex-direction: column; gap: 16px; }
@@ -205,6 +257,7 @@
     background: var(--pv-surface);
     border: 1px solid var(--pv-border);
     border-radius: var(--pv-radius);
+    overflow: clip;
   }
   .pv-card__head {
     display: flex;
@@ -213,7 +266,6 @@
     padding: 14px 18px;
     background: var(--pv-surface-muted);
     border-bottom: 1px solid var(--pv-border);
-    border-radius: var(--pv-radius) var(--pv-radius) 0 0;
   }
   .pv-card__title { font: 600 14px/1.2 var(--pv-sans); color: var(--pv-ink); }
   .pv-card__meta { font: 400 13px/1.2 var(--pv-sans); color: var(--pv-ink-soft); }

data/app/views/paper_view/shared/_theme.html.erb

@@ -0,0 +1,8 @@
+<%= javascript_tag nonce: true do %>
+  (function () {
+    try {
+      var theme = localStorage.getItem("pv-theme");
+      if (theme === "dark" || theme === "light") document.documentElement.setAttribute("data-pv-theme", theme);
+    } catch (error) {}
+  })();
+<% end %>

data/lib/paper_view/version.rb

@@ -1,3 +1,3 @@
 module PaperView
-  VERSION = "0.2.1"
+  VERSION = "0.2.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: paper_view
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.3
 platform: ruby
 authors:
 - Leon Vogt
@@ -53,6 +53,7 @@ files:
 - app/views/paper_view/shared/_flash.html.erb
 - app/views/paper_view/shared/_script.html.erb
 - app/views/paper_view/shared/_styles.html.erb
+- app/views/paper_view/shared/_theme.html.erb
 - app/views/paper_view/stats/_stats.html.erb
 - app/views/paper_view/stats/show.html.erb
 - app/views/paper_view/versions/_filters.html.erb