sdocs-dev 1.0.0 → 1.1.1

package/bin/sdocs-dev.js

@@ -3,7 +3,7 @@
  * sdoc CLI
  * Usage:
  *   sdoc report.md              # open file in browser
- *   sdoc share report.md        # print shareable URL to stdout
+ *   sdoc share report.md        # copy shareable link to clipboard
  *   sdoc new                    # blank document in write mode
  *   cat file.md | sdoc          # pipe markdown to browser
  *   sdoc                        # open studio with empty editor
@@ -29,14 +29,14 @@ USAGE
   sdoc <file> --style              Open with style panel
   sdoc <file> --raw                Open raw markdown source
   sdoc new                         New blank document (write mode)
-  sdoc share <file>                Print shareable URL to stdout
-  sdoc share <file> --section "X"  URL with section anchor
+  sdoc share <file>                Copy shareable link to clipboard
+  sdoc share <file> --section "X"  Link with section anchor
   sdoc schema                      Print the full styles schema
   sdoc defaults                    Show ~/.sdocs/styles.yaml
   sdoc defaults --reset            Remove default styles
   sdoc help                        Show this help
   cat file.md | sdoc               Pipe markdown from stdin
-  cat file.md | sdoc share         Pipe to shareable URL
+  cat file.md | sdoc share         Pipe to clipboard link
 
 MODE FLAGS
   --read     Clean reading view (default when file given)
@@ -83,6 +83,8 @@ GENERAL
                          Default: "Inter"
   baseFontSize  number   Base font size in px. All rem/em values scale from this.
                          Default: 16
+  background    string   Page background color (hex).
+                         Default: "#ffffff" (light) / "#1c1a17" (dark)
   color         string   Master body text color (hex). Cascades to headings,
                          paragraphs, and lists unless those are overridden.
                          Default: "#1c1917"
@@ -141,6 +143,30 @@ COLOR CASCADE
     color  →  p.color        →  list.color
   Set a child color only when you want it to differ from its parent.
 
+THEME COLORS
+  Colors can be set per-theme using \`light:\` and \`dark:\` sub-blocks under \`styles:\`.
+  Non-color properties (fonts, sizes, spacing, weights) remain at the top level
+  and are shared across both themes.
+
+  ---
+  styles:
+    fontFamily: Lora
+    baseFontSize: 17
+    light:
+      background: "#ffffff"
+      color: "#1a1a2e"
+      h1: { color: "#c0392b" }
+      link: { color: "#2563eb" }
+    dark:
+      background: "#1c1a17"
+      color: "#e7e5e2"
+      h1: { color: "#ef6f5e" }
+      link: { color: "#60a5fa" }
+  ---
+
+  Top-level colors (old format) are treated as light-theme colors for
+  backwards compatibility.
+
 FONTS (24 supported, loaded lazily from Google Fonts)
   Inter · Roboto · Open Sans · Lato · Montserrat · Source Sans 3
   Oswald · Raleway · Poppins · Merriweather · Ubuntu · Nunito
@@ -152,15 +178,28 @@ EXAMPLE — editorial article with colored heading tiers
   styles:
     fontFamily: Lora
     baseFontSize: 17
-    color: "#1a1a2e"
-    headers:
-      color: "#2c3e50"
-    h1: { fontSize: 2.3, color: "#c0392b", fontWeight: 700 }
-    h2: { fontSize: 1.55, color: "#8e44ad", fontWeight: 600 }
-    h3: { fontSize: 1.2, color: "#16a085", fontWeight: 600 }
+    h1: { fontSize: 2.3, fontWeight: 700 }
+    h2: { fontSize: 1.55, fontWeight: 600 }
+    h3: { fontSize: 1.2, fontWeight: 600 }
     p: { lineHeight: 1.9, marginBottom: 1.2 }
-    link: { color: "#e67e22", decoration: "underline" }
-    blockquote: { borderColor: "#c0392b", borderWidth: 4, color: "#7f8c8d" }
+    light:
+      background: "#fffaf5"
+      color: "#1a1a2e"
+      headers: { color: "#2c3e50" }
+      h1: { color: "#c0392b" }
+      h2: { color: "#8e44ad" }
+      h3: { color: "#16a085" }
+      link: { color: "#e67e22", decoration: "underline" }
+      blockquote: { borderColor: "#c0392b", borderWidth: 4, color: "#7f8c8d" }
+    dark:
+      background: "#1a1520"
+      color: "#e7e5e2"
+      headers: { color: "#b0aaa5" }
+      h1: { color: "#ef6f5e" }
+      h2: { color: "#c490e4" }
+      h3: { color: "#5ed4b8" }
+      link: { color: "#f0a860", decoration: "underline" }
+      blockquote: { borderColor: "#ef6f5e", borderWidth: 4, color: "#9e9590" }
   ---
 `;
 
@@ -310,13 +349,23 @@ function resetDefaults() {
 }
 
 // Deep merge: defaults under file styles (file wins on conflict)
+// Recursive for light:/dark: sub-objects that contain nested objects
 function mergeStyles(defaults, fileStyles) {
   if (!defaults) return fileStyles || {};
   if (!fileStyles) return { ...defaults };
   const merged = { ...defaults };
   for (const [k, v] of Object.entries(fileStyles)) {
     if (typeof v === 'object' && v !== null && typeof merged[k] === 'object' && merged[k] !== null) {
-      merged[k] = { ...merged[k], ...v };
+      // Recurse one level deeper for light/dark blocks that contain nested objects (e.g. h1: { color: ... })
+      const inner = { ...merged[k] };
+      for (const [ik, iv] of Object.entries(v)) {
+        if (typeof iv === 'object' && iv !== null && typeof inner[ik] === 'object' && inner[ik] !== null) {
+          inner[ik] = { ...inner[ik], ...iv };
+        } else {
+          inner[ik] = iv;
+        }
+      }
+      merged[k] = inner;
     } else {
       merged[k] = v;
     }
@@ -412,9 +461,18 @@ if (require.main === module) {
       section: opts.section,
     });
 
-    // Share: print URL to stdout, don't open browser
+    // Share: copy to clipboard
     if (opts.subcommand === 'share') {
-      process.stdout.write(url + '\n');
+      try {
+        const clip = process.platform === 'darwin' ? 'pbcopy'
+          : execSync('which xclip 2>/dev/null', { encoding: 'utf-8' }).trim() ? 'xclip -selection clipboard'
+          : 'xsel --clipboard --input';
+        execSync(clip, { input: url, stdio: ['pipe', 'ignore', 'ignore'] });
+        const name = opts.file ? path.basename(opts.file) : 'stdin';
+        console.log(`\u2713 Link for ${name} copied to clipboard`);
+      } catch (_) {
+        process.stdout.write(url + '\n');
+      }
       process.exit(0);
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdocs-dev",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "Open, share, and style markdown files from the terminal",
   "main": "server.js",
   "bin": {

package/public/css/layout.css

@@ -185,6 +185,7 @@ body {
   flex: 1;
   overflow: auto;
   position: relative;
+  background-color: var(--bg);
 }
 
 /* drag overlay */

package/public/css/panel.css

@@ -38,6 +38,51 @@ body.style-mode #right {
   flex-shrink: 0;
 }
 
+/* ── Theme tabs ── */
+#theme-tabs {
+  margin-bottom: 10px;
+}
+#theme-tabs .toggle-group {
+  display: flex;
+  width: 100%;
+  gap: 0;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+#theme-tabs .btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 5px 0;
+  border: none;
+  background: none;
+  font-family: var(--font-ui);
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--text-3);
+  cursor: pointer;
+  transition: background .12s, color .12s;
+}
+#theme-tabs .btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-2);
+}
+#theme-tabs .btn.active {
+  background: var(--bg-panel);
+  color: var(--text);
+  font-weight: 600;
+  box-shadow: var(--shadow-sm);
+}
+#theme-tabs .btn svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+
 /* ── Panel sections ── */
 .panel-section { border-bottom: 1px solid var(--border-subtle); }
 

package/public/css/rendered.css

@@ -6,6 +6,7 @@
   max-width: 760px;
   margin: 0 auto;
 
+  --md-bg:             #FFFFFF;
   --md-font-family:    'Inter', system-ui, sans-serif;
   --md-base-size:      16px;
   --md-line-height:    1.75;
@@ -55,6 +56,7 @@
   font-size: var(--md-base-size);
   color: var(--md-color);
   line-height: var(--md-line-height);
+  background-color: var(--md-bg);
 }
 :is(#rendered, #write) h1 {
   font-family: var(--md-h-font-family);
@@ -130,9 +132,13 @@
 #rendered .section-toggle:hover {
   color: var(--text-2);
 }
-#rendered .md-section-body:not(.open) > :not(.md-section) {
+#rendered .md-section-body:not(.open):not(:has(.md-section-body.open)) > :not(.md-section) {
   display: none;
 }
+#rendered .md-section-body:not(.open):has(.md-section-body.open) > :not(.md-section) {
+  opacity: 0.55;
+  padding-left: 1.2em;
+}
 #rendered .md-section-body:not(.open) > .md-section:not(:has(> .md-section-body.open)) {
   padding-left: 1.2em;
 }

package/public/css/tokens.css

@@ -84,6 +84,7 @@ html[data-theme="dark"] {
   --md-copy-btn-hover:  rgba(255,255,255,0.06);
 }
 html[data-theme="dark"] :is(#rendered, #write) {
+  --md-bg:          #1c1a17;
   --md-color:       #e7e5e2;
   --md-code-bg:     #1a1816;
   --md-code-color:  #b8a99a;

package/public/default.md

@@ -18,7 +18,7 @@ styles:
 
 If you're working with agents, a document written in markdown is <ins>officially</ins>* 407 times more useful than a document locked inside a `.docx` or `.gdoc` file format. Because of this, I believe Word and GDocs' days are numbered. (*I am the official.)
 
-However, all is not well. While markdown is great for agents, it's a bit annoying for humans. Quickly and elegantly reading a `.md` file requires you to open your code editor and enter "preview" mode. Sharing a markdown file requires you to actually send the file to someone. They then have to download it and find the least annoying way to read it.
+But while markdown is great for agents, it's a bit annoying for humans. Quickly and elegantly reading a `.md` file requires you to open your code editor and enter "preview" mode. Sharing a markdown file requires you to actually send the file to someone. They then have to download it and find the least annoying way to read it.
 
 SmallDocs is an [open source](https://github.com/JoshInLisbon/SDocs) attempt at something different. It lets you (or your agent) easily, elegantly and privately **read**, **share**, **format** and **export** `.md` files.
 
@@ -51,12 +51,23 @@ SDocs uses a `styles:` key with CSS properties written beneath it in YAML:
 styles:
   fontFamily: Lora
   baseFontSize: 17
-  color: "#1a1a2e"
-  h1: { fontSize: 2.3, color: "#c0392b", fontWeight: 700 }
+  h1: { fontSize: 2.3, fontWeight: 700 }
   p: { lineHeight: 1.9, marginBottom: 1.2 }
+  light:
+    background: "#fffaf5"
+    color: "#1a1a2e"
+    h1: { color: "#c0392b" }
+  dark:
+    background: "#1a1520"
+    color: "#e7e5e2"
+    h1: { color: "#ef6f5e" }
 ---
 ```
 
+Non-color properties (fonts, sizes, spacing) are shared across themes and live at the top level. Colors live inside `light:` and `dark:` blocks so both themes render correctly.
+
+All color controls are in the **Colors** section of the style panel. The light/dark toggle at the top of that section lets you customize each theme independently. Colors cascade from general to specific — set `color` once and it flows to headings, paragraphs, and lists unless you override them individually.
+
 (Click "**Raw**" — top left — to see the front matter for this file. See all available properties [here](https://sdocs.dev) or by running `npm i sdocs-dev; sdoc schema`.)
 
 When a `Styled .md` file is rendered in the SmallDocs interface the specified styles are applied. If a plain `.md` file is rendered the default styles are applied.
@@ -112,6 +123,92 @@ SmallDocs can export your document in four formats:
 - **Word (.docx)** — a styled Word document generated from the rendered HTML.
 - **Styled .md** — your markdown with the `styles:` front matter block included. This is the format SmallDocs reads back in, so your formatting is preserved.
 
+## The CLI
+
+SmallDocs has a command-line tool that lets you open, share, and style markdown files from the terminal. Install it once:
+
+```
+npm i -g sdocs-dev
+```
+
+This gives you the `sdoc` command.
+
+### Open a file
+
+```
+sdoc README.md
+```
+
+Your browser opens with the document styled and readable. That's it — one command to go from `.md` file to formatted document.
+
+### Modes
+
+By default, files open in read mode. You can open in any mode:
+
+```
+sdoc README.md              # read mode (default)
+sdoc README.md --write      # write mode (contentEditable editor)
+sdoc README.md --style      # style mode (styling panel visible)
+sdoc README.md --raw        # raw mode (plain markdown source)
+```
+
+### Share a link
+
+```
+sdoc share README.md
+```
+
+This copies a shareable link to your clipboard — no browser opens, no URL printed. The entire document is compressed into the URL hash, so there's nothing to host or upload. You can also combine it with options:
+
+```
+sdoc share report.md --section "Results" # deep-link to a heading
+sdoc share notes.md --write             # link opens in write mode
+```
+
+### Pipe from stdin
+
+Any command that outputs markdown can be piped directly into SmallDocs:
+
+```
+cat notes.md | sdoc                     # open in browser
+cat notes.md | sdoc share               # pipe to clipboard link
+your-agent --output md | sdoc           # pipe agent output to browser
+```
+
+### Start a new document
+
+```
+sdoc new
+```
+
+Opens a blank document in write mode, ready to type.
+
+### Default styles
+
+If you find a style you like, use the "Save as Default" panel in the Style view to generate a command that saves your preferences to `~/.sdocs/styles.yaml`. The CLI automatically applies these defaults to every file you open — unless the file has its own styles, which always take priority.
+
+```
+sdoc defaults               # view your current defaults
+sdoc defaults --reset       # remove them
+```
+
+### Style schema
+
+```
+sdoc schema
+```
+
+Prints every available style property with its type, default value, and description. This is designed to be readable by both humans and LLMs — so your agent can write YAML front matter for you.
+
+### For agents
+
+The CLI is designed to work well in automated workflows. A few patterns:
+
+- **Generate a styled doc**: have your agent write a `.md` file with YAML front matter, then `sdoc share file.md` to copy a shareable link
+- **Learn the format**: `sdoc schema` gives your agent everything it needs to know about available style properties
+- **Deep-link to context**: `sdoc share file.md --section "Heading"` creates a URL that scrolls straight to the relevant section
+- **No auth, no API keys**: everything is client-side — the URL *is* the document
+
 ### Small opinionated things
 
 SmallDocs has opinions. We do some things which might not work for everyone but hopefully make the general `.md` experience better for most.

package/public/index.html

@@ -145,11 +145,112 @@
           <input type="range" id="ctrl-line-height-range" min="1.0" max="2.5" step="0.05" value="1.75">
           <input type="number" id="ctrl-line-height-num" min="1.0" max="2.5" step="0.05" value="1.75">
         </div>
+        <button class="factory-reset-btn" id="factory-reset-styles" title="Reset all styles to defaults">Reset all styles</button>
+      </div>
+    </div>
+
+    <!-- COLORS -->
+    <div class="panel-section">
+      <div class="panel-header" data-target="body-colors">
+        <span class="arrow">
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 2l4 3-4 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </span>
+        Colors
+      </div>
+      <div class="panel-body" id="body-colors">
+        <div id="theme-tabs">
+          <div class="toggle-group">
+            <button class="btn active" id="theme-tab-light">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+              Light
+            </button>
+            <button class="btn" id="theme-tab-dark">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
+              Dark
+            </button>
+          </div>
+        </div>
+        <div class="control-row">
+          <label>Background</label>
+          <div class="color-pair"><input type="color" id="ctrl-bg-color" value="#ffffff"><button class="reset-btn" id="reset-bg-color" title="Reset to default">↺</button></div>
+        </div>
         <div class="control-row">
-          <label>Text color</label>
+          <label>Text</label>
           <div class="color-pair"><input type="color" id="ctrl-color" value="#1c1917"><button class="reset-btn" id="reset-color" title="Reset to default">↺</button></div>
         </div>
-        <button class="factory-reset-btn" id="factory-reset-styles" title="Reset all styles to defaults">Reset all styles</button>
+
+        <div class="sub-section">
+          <div class="sub-header" data-target="sub-colors-headings">
+            <span class="arrow">▶</span> Headings
+          </div>
+          <div class="sub-body" id="sub-colors-headings">
+            <div class="control-row">
+              <label>All</label>
+              <div class="color-pair"><input type="color" id="ctrl-h-color" value="#1c1917"><button class="reset-btn" id="reset-h-color" title="Follow body text color">↺</button></div>
+            </div>
+            <div class="control-row">
+              <label>H1</label>
+              <div class="color-pair"><input type="color" id="ctrl-h1-color" value="#1c1917"><button class="reset-btn" id="reset-h1-color" title="Follow header color">↺</button></div>
+            </div>
+            <div class="control-row">
+              <label>H2</label>
+              <div class="color-pair"><input type="color" id="ctrl-h2-color" value="#1c1917"><button class="reset-btn" id="reset-h2-color" title="Follow header color">↺</button></div>
+            </div>
+            <div class="control-row">
+              <label>H3</label>
+              <div class="color-pair"><input type="color" id="ctrl-h3-color" value="#1c1917"><button class="reset-btn" id="reset-h3-color" title="Follow header color">↺</button></div>
+            </div>
+            <div class="control-row">
+              <label>H4</label>
+              <div class="color-pair"><input type="color" id="ctrl-h4-color" value="#1c1917"><button class="reset-btn" id="reset-h4-color" title="Follow header color">↺</button></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="control-row">
+          <label>Paragraph</label>
+          <div class="color-pair"><input type="color" id="ctrl-p-color" value="#1c1917"><button class="reset-btn" id="reset-p-color" title="Follow body text color">↺</button></div>
+        </div>
+        <div class="control-row">
+          <label>Lists</label>
+          <div class="color-pair"><input type="color" id="ctrl-list-color" value="#1c1917"><button class="reset-btn" id="reset-list-color" title="Follow paragraph color">↺</button></div>
+        </div>
+        <div class="control-row">
+          <label>Link</label>
+          <div class="color-pair"><input type="color" id="ctrl-link-color" value="#2563eb"><button class="reset-btn" id="reset-link-color" title="Reset to default">↺</button></div>
+        </div>
+
+        <div class="sub-section">
+          <div class="sub-header" data-target="sub-colors-code">
+            <span class="arrow">▶</span> Code
+          </div>
+          <div class="sub-body" id="sub-colors-code">
+            <div class="control-row">
+              <label>Background</label>
+              <div class="color-pair"><input type="color" id="ctrl-code-bg" value="#f4f1ed"><button class="reset-btn" id="reset-code-bg" title="Reset to default">↺</button></div>
+            </div>
+            <div class="control-row">
+              <label>Text</label>
+              <div class="color-pair"><input type="color" id="ctrl-code-color" value="#6b21a8"><button class="reset-btn" id="reset-code-color" title="Reset to default">↺</button></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="sub-section">
+          <div class="sub-header" data-target="sub-colors-bq">
+            <span class="arrow">▶</span> Blockquote
+          </div>
+          <div class="sub-body" id="sub-colors-bq">
+            <div class="control-row">
+              <label>Border</label>
+              <div class="color-pair"><input type="color" id="ctrl-bq-border-color" value="#2563eb"><button class="reset-btn" id="reset-bq-border-color" title="Reset to default">↺</button></div>
+            </div>
+            <div class="control-row">
+              <label>Text</label>
+              <div class="color-pair"><input type="color" id="ctrl-bq-color" value="#6b6560"><button class="reset-btn" id="reset-bq-color" title="Reset to default">↺</button></div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -183,10 +284,6 @@
               <input type="number" id="ctrl-h-mb-num" min="0" max="2" step="0.1" value="0.4">
               <span class="unit">em</span>
             </div>
-            <div class="control-row">
-              <label>Color</label>
-              <div class="color-pair"><input type="color" id="ctrl-h-color" value="#1c1917"><button class="reset-btn" id="reset-h-color" title="Follow body text color">↺</button></div>
-            </div>
           </div>
         </div>
 
@@ -201,10 +298,6 @@
               <input type="number" id="ctrl-h1-size-num" min="1" max="4" step="0.1" value="2.1">
               <span class="unit">em</span>
             </div>
-            <div class="control-row">
-              <label>Color</label>
-              <div class="color-pair"><input type="color" id="ctrl-h1-color" value="#1c1917"><button class="reset-btn" id="reset-h1-color" title="Follow header color">↺</button></div>
-            </div>
             <div class="control-row">
               <label>Weight</label>
               <select id="ctrl-h1-weight">
@@ -229,10 +322,6 @@
               <input type="number" id="ctrl-h2-size-num" min="1" max="3" step="0.1" value="1.55">
               <span class="unit">em</span>
             </div>
-            <div class="control-row">
-              <label>Color</label>
-              <div class="color-pair"><input type="color" id="ctrl-h2-color" value="#1c1917"><button class="reset-btn" id="reset-h2-color" title="Follow header color">↺</button></div>
-            </div>
             <div class="control-row">
               <label>Weight</label>
               <select id="ctrl-h2-weight">
@@ -256,10 +345,6 @@
               <input type="number" id="ctrl-h3-size-num" min="0.8" max="2.5" step="0.1" value="1.2">
               <span class="unit">em</span>
             </div>
-            <div class="control-row">
-              <label>Color</label>
-              <div class="color-pair"><input type="color" id="ctrl-h3-color" value="#1c1917"><button class="reset-btn" id="reset-h3-color" title="Follow header color">↺</button></div>
-            </div>
             <div class="control-row">
               <label>Weight</label>
               <select id="ctrl-h3-weight">
@@ -283,10 +368,6 @@
               <input type="number" id="ctrl-h4-size-num" min="0.8" max="2" step="0.1" value="1.0">
               <span class="unit">em</span>
             </div>
-            <div class="control-row">
-              <label>Color</label>
-              <div class="color-pair"><input type="color" id="ctrl-h4-color" value="#1c1917"><button class="reset-btn" id="reset-h4-color" title="Follow header color">↺</button></div>
-            </div>
             <div class="control-row">
               <label>Weight</label>
               <select id="ctrl-h4-weight">
@@ -311,10 +392,6 @@
         Paragraph
       </div>
       <div class="panel-body" id="body-paragraph">
-        <div class="control-row">
-          <label>Color</label>
-          <div class="color-pair"><input type="color" id="ctrl-p-color" value="#1c1917"><button class="reset-btn" id="reset-p-color" title="Follow body text color">↺</button></div>
-        </div>
         <div class="control-row">
           <label>Line height</label>
           <input type="range" id="ctrl-p-lh-range" min="1.0" max="2.5" step="0.05" value="1.75">
@@ -338,10 +415,6 @@
         Lists
       </div>
       <div class="panel-body" id="body-lists">
-        <div class="control-row">
-          <label>Color</label>
-          <div class="color-pair"><input type="color" id="ctrl-list-color" value="#1c1917"><button class="reset-btn" id="reset-list-color" title="Follow paragraph color">↺</button></div>
-        </div>
         <div class="control-row">
           <label>Item spacing</label>
           <input type="range" id="ctrl-list-spacing-range" min="0" max="1.5" step="0.05" value="0.3">
@@ -366,10 +439,6 @@
         Links
       </div>
       <div class="panel-body" id="body-links">
-        <div class="control-row">
-          <label>Color</label>
-          <div class="color-pair"><input type="color" id="ctrl-link-color" value="#2563eb"><button class="reset-btn" id="reset-link-color" title="Reset to default">↺</button></div>
-        </div>
         <div class="control-row">
           <label>Decoration</label>
           <select id="ctrl-link-decoration">
@@ -401,14 +470,6 @@
             <option value="monospace">System mono</option>
           </select>
         </div>
-        <div class="control-row">
-          <label>Background</label>
-          <div class="color-pair"><input type="color" id="ctrl-code-bg" value="#f4f1ed"><button class="reset-btn" id="reset-code-bg" title="Reset to default">↺</button></div>
-        </div>
-        <div class="control-row">
-          <label>Text color</label>
-          <div class="color-pair"><input type="color" id="ctrl-code-color" value="#6b21a8"><button class="reset-btn" id="reset-code-color" title="Reset to default">↺</button></div>
-        </div>
       </div>
     </div>
 
@@ -421,10 +482,6 @@
         Blockquote
       </div>
       <div class="panel-body" id="body-blockquote">
-        <div class="control-row">
-          <label>Border color</label>
-          <div class="color-pair"><input type="color" id="ctrl-bq-border-color" value="#2563eb"><button class="reset-btn" id="reset-bq-border-color" title="Reset to default">↺</button></div>
-        </div>
         <div class="control-row">
           <label>Border width</label>
           <input type="range" id="ctrl-bq-bw-range" min="1" max="8" step="1" value="3">
@@ -437,10 +494,6 @@
           <input type="number" id="ctrl-bq-size-num" min="0.7" max="1.5" step="0.05" value="1.0">
           <span class="unit">em</span>
         </div>
-        <div class="control-row">
-          <label>Text color</label>
-          <div class="color-pair"><input type="color" id="ctrl-bq-color" value="#6b6560"><button class="reset-btn" id="reset-bq-color" title="Reset to default">↺</button></div>
-        </div>
       </div>
     </div>
 

package/public/sdocs-app.js

@@ -147,6 +147,7 @@ function render() {
   S.renderedEl.querySelectorAll('.md-section > h2, .md-section > h3, .md-section > h4').forEach(function(heading) {
     heading.addEventListener('click', function(e) {
       if (e.target.closest('.header-anchor') || e.target.closest('.header-copy-btn')) return;
+      var yBefore = heading.getBoundingClientRect().top;
       var section = heading.closest('.md-section');
       var body = section.querySelector('.md-section-body');
       var toggle = section.querySelector('.section-toggle');
@@ -154,6 +155,10 @@ function render() {
       toggle.classList.toggle('open', isOpen);
       body.querySelectorAll('.md-section-body').forEach(function(b) { b.classList.toggle('open', isOpen); });
       body.querySelectorAll('.section-toggle').forEach(function(t) { t.classList.toggle('open', isOpen); });
+      var yAfter = heading.getBoundingClientRect().top;
+      if (yAfter !== yBefore) {
+        contentArea.scrollTop += yAfter - yBefore;
+      }
     });
   });
 }
@@ -366,6 +371,8 @@ function setMode(mode, skipHash) {
 }
 
 document.getElementById('btn-theme').addEventListener('click', function() { S.toggleTheme(); });
+document.getElementById('theme-tab-light').addEventListener('click', function() { S.switchThemeAndUpdate('light'); });
+document.getElementById('theme-tab-dark').addEventListener('click', function() { S.switchThemeAndUpdate('dark'); });
 document.getElementById('btn-read').addEventListener('click',   function() { setMode('read'); });
 document.getElementById('btn-style').addEventListener('click',  function() { setMode('style'); });
 document.getElementById('btn-write').addEventListener('click',  function() { setMode('write'); });
@@ -466,6 +473,9 @@ S.setMode = setMode;
 S.render = render;
 S.loadText = loadText;
 
+// Sync theme tabs to initial theme
+S.updateThemeTabs(S.activeTheme);
+
 // ── Init ──────────────────────────────────
 
 (async function () {