sdocs-dev 1.0.0 → 1.1.1

package/public/sdocs-controls.js

@@ -44,14 +44,12 @@ function linkRangeNum(rangeId, numId) {
 
 SDocStyles.RANGE_NUM_PAIRS.forEach(function(pair) { linkRangeNum(pair[0], pair[1]); });
 
-var STANDALONE_COLOR_IDS = new Set([
-  'ctrl-link-color','ctrl-code-bg','ctrl-code-color','ctrl-bq-border-color','ctrl-bq-color',
-]);
+var STANDALONE_COLOR_IDS = new Set(SDocStyles.STANDALONE_COLOR_IDS);
 
 [
   'ctrl-font-family','ctrl-h-font-family',
   'ctrl-h1-weight','ctrl-h2-weight','ctrl-h3-weight','ctrl-h4-weight',
-  'ctrl-link-color','ctrl-link-decoration',
+  'ctrl-bg-color','ctrl-link-color','ctrl-link-decoration',
   'ctrl-code-font','ctrl-code-bg','ctrl-code-color',
   'ctrl-bq-border-color','ctrl-bq-color',
 ].forEach(function(id) {
@@ -99,7 +97,7 @@ document.getElementById('reset-h4-color').addEventListener('click',   function()
 document.getElementById('reset-p-color').addEventListener('click',    function() { resetColorValue('ctrl-p-color'); S.syncAll('controls'); });
 document.getElementById('reset-list-color').addEventListener('click', function() { resetColorValue('ctrl-list-color'); S.syncAll('controls'); });
 
-['ctrl-link-color','ctrl-code-bg','ctrl-code-color','ctrl-bq-border-color','ctrl-bq-color'].forEach(function(ctrlId) {
+['ctrl-bg-color','ctrl-link-color','ctrl-code-bg','ctrl-code-color','ctrl-bq-border-color','ctrl-bq-color'].forEach(function(ctrlId) {
   var btnId = 'reset-' + ctrlId.replace('ctrl-', '');
   document.getElementById(btnId).addEventListener('click', function() {
     var defaultVal = S.getStandaloneDefault(ctrlId);
@@ -133,7 +131,6 @@ function applyStylesFromMeta(s) {
 
   var result = SDocStyles.stylesToControls(s);
   var controls = result.controls;
-  var newOverridden = result.overriddenColors;
 
   // Font family selects need special handling to match bare names against <option> values
   [['fontFamily', 'ctrl-font-family'], ['headers.fontFamily', 'ctrl-h-font-family']].forEach(function(pair) {
@@ -155,6 +152,22 @@ function applyStylesFromMeta(s) {
     setCtrl(id, controls[id]);
   });
 
+  if (result.hasThemeColors) {
+    // Per-theme color mode: populate both theme states
+    S.themeColors.light = result.lightColors || {};
+    S.themeColors.dark = result.darkColors || {};
+    S.themeOverridden.light = result.lightOverridden || new Set();
+    S.themeOverridden.dark = result.darkOverridden || new Set();
+
+    // Load the active theme's colors into controls
+    S._syncing = wasSyncing;
+    S.loadThemeColors(S.activeTheme);
+    return;
+  }
+
+  // Legacy single-theme path: top-level colors go to light theme
+  var newOverridden = result.overriddenColors;
+
   S.overriddenColors.clear();
   setColorValue('ctrl-color', S.getColorDefault(), false);
 
@@ -163,17 +176,68 @@ function applyStylesFromMeta(s) {
     setColorValue(id, controls[id], true);
   });
 
+  // Also apply standalone colors from legacy format
+  if (s.background) {
+    S.overriddenColors.add('ctrl-bg-color');
+    var elBg = document.getElementById('ctrl-bg-color');
+    if (elBg) { elBg.value = s.background; applyCtrl('ctrl-bg-color'); }
+  }
+  if (s.link && s.link.color) {
+    S.overriddenColors.add('ctrl-link-color');
+    var el = document.getElementById('ctrl-link-color');
+    if (el) { el.value = s.link.color; applyCtrl('ctrl-link-color'); }
+  }
+  if (s.code) {
+    if (s.code.background) {
+      S.overriddenColors.add('ctrl-code-bg');
+      var el2 = document.getElementById('ctrl-code-bg');
+      if (el2) { el2.value = s.code.background; applyCtrl('ctrl-code-bg'); }
+    }
+    if (s.code.color) {
+      S.overriddenColors.add('ctrl-code-color');
+      var el3 = document.getElementById('ctrl-code-color');
+      if (el3) { el3.value = s.code.color; applyCtrl('ctrl-code-color'); }
+    }
+  }
+  if (s.blockquote) {
+    if (s.blockquote.borderColor) {
+      S.overriddenColors.add('ctrl-bq-border-color');
+      var el4 = document.getElementById('ctrl-bq-border-color');
+      if (el4) { el4.value = s.blockquote.borderColor; applyCtrl('ctrl-bq-border-color'); }
+    }
+    if (s.blockquote.color) {
+      S.overriddenColors.add('ctrl-bq-color');
+      var el5 = document.getElementById('ctrl-bq-color');
+      if (el5) { el5.value = s.blockquote.color; applyCtrl('ctrl-bq-color'); }
+    }
+  }
+
   S._syncing = wasSyncing;
 }
 
 function collectStyles() {
+  S.saveCurrentThemeColors();
+  var lightHas = S.themeOverridden.light.size > 0;
+  var darkHas = S.themeOverridden.dark.size > 0;
+  if (lightHas || darkHas) {
+    return SDocStyles.collectStylesDual(
+      readAllControlValues(),
+      S.themeOverridden.light, S.themeOverridden.dark,
+      S.themeColors.light, S.themeColors.dark
+    );
+  }
   return SDocStyles.collectStyles(readAllControlValues(), S.overriddenColors);
 }
 
 // ── Reset all styles ──────────────────────────────────
 
 function resetAllStyles() {
-  S.overriddenColors.clear();
+  // Clear both theme states
+  S.themeOverridden.light.clear();
+  S.themeOverridden.dark.clear();
+  S.themeColors.light = {};
+  S.themeColors.dark = {};
+
   setColorValue('ctrl-color', S.getColorDefault(), false);
   // Set standalone color controls to theme-appropriate defaults
   STANDALONE_COLOR_IDS.forEach(function(ctrlId) {
@@ -186,7 +250,7 @@ function resetAllStyles() {
     else if (el.tagName === 'SELECT') el.selectedIndex = [].slice.call(el.options).findIndex(function(o) { return o.defaultSelected; });
     else if (el.type === 'color') el.value = el.defaultValue;
   });
-  ['ctrl-font-family','ctrl-base-size-num','ctrl-line-height-num',
+  ['ctrl-bg-color','ctrl-font-family','ctrl-base-size-num','ctrl-line-height-num',
    'ctrl-h-font-family','ctrl-h-scale-num','ctrl-h-mb-num',
    'ctrl-h1-size-num','ctrl-h1-weight','ctrl-h2-size-num','ctrl-h2-weight',
    'ctrl-h3-size-num','ctrl-h3-weight','ctrl-h4-size-num','ctrl-h4-weight',

package/public/sdocs-export.js

@@ -10,6 +10,7 @@ function cv(name) {
 }
 
 function buildExportCSS() {
+  var bgColor       = cv('--md-bg')             || '#ffffff';
   var fontFamily    = cv('--md-font-family')    || "'Inter', sans-serif";
   var baseSize      = cv('--md-base-size')      || '16px';
   var lineHeight    = cv('--md-line-height')    || '1.75';
@@ -50,7 +51,7 @@ function buildExportCSS() {
   var bqPad     = cv('--md-bq-padding')  || '0.5em 1em';
   var bqMargin  = cv('--md-bq-margin')   || '1.2em 0';
 
-  return '\nbody {\n  font-family: ' + fontFamily + ';\n  font-size: ' + baseSize + ';\n  color: ' + color + ';\n  line-height: ' + lineHeight + ';\n  max-width: 720px;\n  margin: 0 auto;\n  padding: 40px 48px 60px;\n  -webkit-font-smoothing: antialiased;\n}\nh1 { font-family: ' + hFontFamily + '; font-size: ' + h1Size + '; color: ' + h1Color + '; font-weight: ' + h1Weight + '; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 ' + hMB + '; }\nh2 { font-family: ' + hFontFamily + '; font-size: ' + h2Size + '; color: ' + h2Color + '; font-weight: ' + h2Weight + '; letter-spacing: -0.015em; line-height: 1.3; margin: 1.4em 0 ' + hMB + '; padding-bottom: 0.3em; border-bottom: 1px solid #ede8e2; }\nh3 { font-family: ' + hFontFamily + '; font-size: ' + h3Size + '; color: ' + h3Color + '; font-weight: ' + h3Weight + '; letter-spacing: -0.01em; line-height: 1.4; margin: 1.2em 0 ' + hMB + '; }\nh4 { font-family: ' + hFontFamily + '; font-size: ' + h4Size + '; color: ' + h4Color + '; font-weight: ' + h4Weight + '; line-height: 1.5; margin: 1em 0 ' + hMB + '; }\np  { color: ' + pColor + '; line-height: ' + pLH + '; margin: ' + pMargin + '; }\na  { color: ' + linkColor + '; text-decoration: ' + linkDec + '; text-underline-offset: 2px; }\ncode { background: ' + codeBG + '; color: ' + codeColor + '; padding: 0.15em 0.45em; border-radius: 4px; font-family: ' + codeFont + '; font-size: 0.85em; }\npre  { background: ' + preBG + '; padding: 1.1em 1.25em; border-radius: 8px; overflow-x: auto; margin: 1.2em 0; border: 1px solid #e7e2db; }\npre code { background: none; padding: 0; color: #3c3733; font-size: 0.88em; }\nblockquote { border-left: ' + bqBorder + '; color: ' + bqColor + '; padding: ' + bqPad + '; margin: ' + bqMargin + '; background: #f7f5f2; border-radius: 0 6px 6px 0; }\nblockquote p { margin: 0; color: inherit; }\nul, ol { padding-left: 1.6em; margin: 0.5em 0 1.1em; }\nli { margin-bottom: 0.3em; }\nhr { border: none; border-top: 1px solid #ede8e2; margin: 2em 0; }\ntable { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.92em; }\nth, td { border: 1px solid #e2ddd6; padding: 7px 12px; text-align: left; }\nth { background: #f4f1ed; font-weight: 600; }\ntr:nth-child(even) td { background: #fafaf8; }\nimg { max-width: 100%; border-radius: 8px; }\n';
+  return '\nbody {\n  font-family: ' + fontFamily + ';\n  font-size: ' + baseSize + ';\n  color: ' + color + ';\n  line-height: ' + lineHeight + ';\n  background-color: ' + bgColor + ';\n  max-width: 720px;\n  margin: 0 auto;\n  padding: 40px 48px 60px;\n  -webkit-font-smoothing: antialiased;\n}\nh1 { font-family: ' + hFontFamily + '; font-size: ' + h1Size + '; color: ' + h1Color + '; font-weight: ' + h1Weight + '; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 ' + hMB + '; }\nh2 { font-family: ' + hFontFamily + '; font-size: ' + h2Size + '; color: ' + h2Color + '; font-weight: ' + h2Weight + '; letter-spacing: -0.015em; line-height: 1.3; margin: 1.4em 0 ' + hMB + '; padding-bottom: 0.3em; border-bottom: 1px solid #ede8e2; }\nh3 { font-family: ' + hFontFamily + '; font-size: ' + h3Size + '; color: ' + h3Color + '; font-weight: ' + h3Weight + '; letter-spacing: -0.01em; line-height: 1.4; margin: 1.2em 0 ' + hMB + '; }\nh4 { font-family: ' + hFontFamily + '; font-size: ' + h4Size + '; color: ' + h4Color + '; font-weight: ' + h4Weight + '; line-height: 1.5; margin: 1em 0 ' + hMB + '; }\np  { color: ' + pColor + '; line-height: ' + pLH + '; margin: ' + pMargin + '; }\na  { color: ' + linkColor + '; text-decoration: ' + linkDec + '; text-underline-offset: 2px; }\ncode { background: ' + codeBG + '; color: ' + codeColor + '; padding: 0.15em 0.45em; border-radius: 4px; font-family: ' + codeFont + '; font-size: 0.85em; }\npre  { background: ' + preBG + '; padding: 1.1em 1.25em; border-radius: 8px; overflow-x: auto; margin: 1.2em 0; border: 1px solid #e7e2db; }\npre code { background: none; padding: 0; color: #3c3733; font-size: 0.88em; }\nblockquote { border-left: ' + bqBorder + '; color: ' + bqColor + '; padding: ' + bqPad + '; margin: ' + bqMargin + '; background: #f7f5f2; border-radius: 0 6px 6px 0; }\nblockquote p { margin: 0; color: inherit; }\nul, ol { padding-left: 1.6em; margin: 0.5em 0 1.1em; }\nli { margin-bottom: 0.3em; }\nhr { border: none; border-top: 1px solid #ede8e2; margin: 2em 0; }\ntable { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.92em; }\nth, td { border: 1px solid #e2ddd6; padding: 7px 12px; text-align: left; }\nth { background: #f4f1ed; font-weight: 600; }\ntr:nth-child(even) td { background: #fafaf8; }\nimg { max-width: 100%; border-radius: 8px; }\n';
 }
 
 function buildExportHTML() {
@@ -149,17 +150,34 @@ document.getElementById('exp-styled').addEventListener('click', function() {
 
 // ── Save as default styles ──────────────────────────────
 
+function formatStyleValue(k, v) {
+  if (typeof v !== 'object' || v === null) {
+    return k + ': ' + JSON.stringify(v);
+  }
+  // light/dark theme blocks: serialize as nested block (not inline)
+  if (k === 'light' || k === 'dark') {
+    var blockLines = [k + ':'];
+    Object.keys(v).forEach(function(sk) {
+      var sv = v[sk];
+      if (typeof sv === 'object' && sv !== null) {
+        var inner = Object.keys(sv).map(function(a) { return a + ': ' + JSON.stringify(sv[a]); }).join(', ');
+        blockLines.push('  ' + sk + ': { ' + inner + ' }');
+      } else {
+        blockLines.push('  ' + sk + ': ' + JSON.stringify(sv));
+      }
+    });
+    return blockLines.join('\n');
+  }
+  // Default: inline object
+  var inner = Object.keys(v).map(function(a) { return a + ': ' + JSON.stringify(v[a]); }).join(', ');
+  return k + ': { ' + inner + ' }';
+}
+
 function buildStylesYaml() {
   var styles = S.collectStyles();
   var lines = [];
   Object.keys(styles).forEach(function(k) {
-    var v = styles[k];
-    if (typeof v === 'object' && v !== null) {
-      var inner = Object.keys(v).map(function(a) { return a + ': ' + JSON.stringify(v[a]); }).join(', ');
-      lines.push(k + ': { ' + inner + ' }');
-    } else {
-      lines.push(k + ': ' + JSON.stringify(v));
-    }
+    lines.push(formatStyleValue(k, styles[k]));
   });
   return lines.join('\n');
 }

package/public/sdocs-state.js

@@ -8,8 +8,10 @@ window.SDocs = {
   currentBody: '',
   currentMeta: {},
 
-  // Color override tracking
-  overriddenColors: new Set(),
+  // Per-theme color state
+  activeTheme: 'light',
+  themeColors: { light: {}, dark: {} },
+  themeOverridden: { light: new Set(), dark: new Set() },
 
   // DOM references
   renderedEl: document.getElementById('rendered'),
@@ -28,16 +30,30 @@ window.SDocs = {
 
   // Cross-module functions (registered by defining module)
   // Theme: toggleTheme, getThemeDefaults, getColorDefault, getStandaloneDefault,
-  //         loadGoogleFont, updateDefaultColors, GOOGLE_FONTS
+  //         loadGoogleFont, updateDefaultColors, GOOGLE_FONTS,
+  //         switchThemeAndUpdate, saveCurrentThemeColors, loadThemeColors
   // Controls: setColorValue, readAllControlValues, collectStyles,
   //           applyStylesFromMeta, resetAllStyles, STANDALONE_COLOR_IDS
   // App: syncAll, setStatus, setMode, render, loadText
   // Write: enterWriteMode, exitWriteMode
 };
 
+// Backwards compat: S.overriddenColors delegates to active theme's set
+Object.defineProperty(SDocs, 'overriddenColors', {
+  get: function() { return SDocs.themeOverridden[SDocs.activeTheme]; },
+  set: function(v) { SDocs.themeOverridden[SDocs.activeTheme] = v; },
+  enumerable: true,
+  configurable: true,
+});
+
+SDocs.contentAreaEl = document.getElementById('content-area');
+
 SDocs.setStyleVar = function(cssVar, value) {
   SDocs.renderedEl.style.setProperty(cssVar, value);
   if (SDocs.writeEl) SDocs.writeEl.style.setProperty(cssVar, value);
+  if (cssVar === '--md-bg') {
+    SDocs.contentAreaEl.style.setProperty('background-color', value);
+  }
 };
 
 })();

package/public/sdocs-styles.js

@@ -31,6 +31,7 @@ const COLOR_CASCADE = {
 // Control ID → { cssVar, suffix?, compound? }
 // Maps every non-color control to its CSS variable and optional unit suffix
 const CTRL_CSS_MAP = {
+  'ctrl-bg-color':         { cssVar: '--md-bg' },
   'ctrl-font-family':      { cssVar: '--md-font-family' },
   'ctrl-base-size-num':    { cssVar: '--md-base-size', suffix: 'px' },
   'ctrl-line-height-num':  { cssVar: '--md-line-height' },
@@ -179,7 +180,8 @@ function collectStyles(values, overriddenColors) {
     indent:  gn('ctrl-list-indent-num'),
   };
 
-  // Only emit cascade colors that were explicitly overridden
+  // Only emit colors that were explicitly overridden
+  if (overriddenColors.has('ctrl-bg-color'))   styles.background = gv('ctrl-bg-color');
   if (overriddenColors.has('ctrl-color'))      styles.color = gv('ctrl-color');
   if (overriddenColors.has('ctrl-h-color'))    styles.headers.color = gv('ctrl-h-color');
   if (overriddenColors.has('ctrl-h1-color'))   styles.h1.color = gv('ctrl-h1-color');
@@ -207,6 +209,10 @@ function stylesToControls(styles) {
   if (styles.baseFontSize) controls['ctrl-base-size-num'] = styles.baseFontSize;
   if (styles.lineHeight)   controls['ctrl-line-height-num'] = styles.lineHeight;
 
+  if (styles.background) {
+    controls['ctrl-bg-color'] = styles.background;
+    overridden.add('ctrl-bg-color');
+  }
   if (styles.color) {
     controls['ctrl-color'] = styles.color;
     overridden.add('ctrl-color');
@@ -265,6 +271,260 @@ function stylesToControls(styles) {
   return { controls, overriddenColors: overridden };
 }
 
+// ═══════════════════════════════════════════════════════
+//  STANDALONE & ALL COLOR IDS
+// ═══════════════════════════════════════════════════════
+
+var STANDALONE_COLOR_IDS = [
+  'ctrl-bg-color','ctrl-link-color','ctrl-code-bg','ctrl-code-color','ctrl-bq-border-color','ctrl-bq-color',
+];
+
+var CASCADE_COLOR_IDS = Object.keys(COLOR_VAR_MAP);
+
+var ALL_COLOR_IDS = CASCADE_COLOR_IDS.concat(STANDALONE_COLOR_IDS);
+
+// ═══════════════════════════════════════════════════════
+//  PER-THEME FUNCTIONS
+// ═══════════════════════════════════════════════════════
+
+/**
+ * parseThemeColorBlock(block)
+ * Extracts { colors: {ctrlId: val}, overridden: Set } from a light:/dark: sub-object.
+ * The block is an object like { color: "#1a1a2e", h1: { color: "#c0392b" }, link: { color: "#2563eb" } }
+ */
+function parseThemeColorBlock(block) {
+  if (!block) return { colors: {}, overridden: new Set() };
+  var colors = {};
+  var overridden = new Set();
+
+  // Background color
+  if (block.background) {
+    colors['ctrl-bg-color'] = block.background;
+    overridden.add('ctrl-bg-color');
+  }
+
+  // Top-level color (cascade root)
+  if (block.color) {
+    colors['ctrl-color'] = block.color;
+    overridden.add('ctrl-color');
+  }
+
+  // Cascade colors nested in sub-objects
+  if (block.headers && block.headers.color) {
+    colors['ctrl-h-color'] = block.headers.color;
+    overridden.add('ctrl-h-color');
+  }
+  ['h1','h2','h3','h4'].forEach(function(t) {
+    var obj = block[t];
+    if (obj && obj.color) {
+      colors['ctrl-' + t + '-color'] = obj.color;
+      overridden.add('ctrl-' + t + '-color');
+    }
+  });
+  if (block.p && block.p.color) {
+    colors['ctrl-p-color'] = block.p.color;
+    overridden.add('ctrl-p-color');
+  }
+  if (block.list && block.list.color) {
+    colors['ctrl-list-color'] = block.list.color;
+    overridden.add('ctrl-list-color');
+  }
+
+  // Standalone colors
+  if (block.link && block.link.color) {
+    colors['ctrl-link-color'] = block.link.color;
+    overridden.add('ctrl-link-color');
+  }
+  if (block.code) {
+    if (block.code.background) { colors['ctrl-code-bg'] = block.code.background; overridden.add('ctrl-code-bg'); }
+    if (block.code.color)      { colors['ctrl-code-color'] = block.code.color; overridden.add('ctrl-code-color'); }
+  }
+  if (block.blockquote) {
+    if (block.blockquote.borderColor) { colors['ctrl-bq-border-color'] = block.blockquote.borderColor; overridden.add('ctrl-bq-border-color'); }
+    if (block.blockquote.color)       { colors['ctrl-bq-color'] = block.blockquote.color; overridden.add('ctrl-bq-color'); }
+  }
+
+  return { colors: colors, overridden: overridden };
+}
+
+/**
+ * collectThemeColors(colorValues, overriddenSet)
+ * Builds the YAML sub-object for one theme (only emits overridden colors).
+ */
+function collectThemeColors(colorValues, overriddenSet) {
+  var block = {};
+  if (overriddenSet.has('ctrl-bg-color'))   block.background = colorValues['ctrl-bg-color'];
+  if (overriddenSet.has('ctrl-color'))      block.color = colorValues['ctrl-color'];
+
+  // Heading colors
+  var hasHColor = overriddenSet.has('ctrl-h-color');
+  if (hasHColor) {
+    if (!block.headers) block.headers = {};
+    block.headers.color = colorValues['ctrl-h-color'];
+  }
+  ['h1','h2','h3','h4'].forEach(function(t) {
+    var id = 'ctrl-' + t + '-color';
+    if (overriddenSet.has(id)) {
+      if (!block[t]) block[t] = {};
+      block[t].color = colorValues[id];
+    }
+  });
+
+  // Paragraph and list
+  if (overriddenSet.has('ctrl-p-color')) {
+    if (!block.p) block.p = {};
+    block.p.color = colorValues['ctrl-p-color'];
+  }
+  if (overriddenSet.has('ctrl-list-color')) {
+    if (!block.list) block.list = {};
+    block.list.color = colorValues['ctrl-list-color'];
+  }
+
+  // Standalone colors
+  if (overriddenSet.has('ctrl-link-color')) {
+    if (!block.link) block.link = {};
+    block.link.color = colorValues['ctrl-link-color'];
+  }
+  if (overriddenSet.has('ctrl-code-bg')) {
+    if (!block.code) block.code = {};
+    block.code.background = colorValues['ctrl-code-bg'];
+  }
+  if (overriddenSet.has('ctrl-code-color')) {
+    if (!block.code) block.code = {};
+    block.code.color = colorValues['ctrl-code-color'];
+  }
+  if (overriddenSet.has('ctrl-bq-border-color')) {
+    if (!block.blockquote) block.blockquote = {};
+    block.blockquote.borderColor = colorValues['ctrl-bq-border-color'];
+  }
+  if (overriddenSet.has('ctrl-bq-color')) {
+    if (!block.blockquote) block.blockquote = {};
+    block.blockquote.color = colorValues['ctrl-bq-color'];
+  }
+
+  return block;
+}
+
+/**
+ * collectStylesDual(values, lightOverridden, darkOverridden, lightColors, darkColors)
+ * Builds full styles object with light:/dark: keys for colors, shared non-color props at top level.
+ */
+function collectStylesDual(values, lightOverridden, darkOverridden, lightColors, darkColors) {
+  var gv = function(id) { return values[id] || ''; };
+  var gn = function(id) { return parseFloat(values[id]) || 0; };
+
+  var styles = {
+    fontFamily:   gv('ctrl-font-family').replace(/['"]/g, '').split(',')[0].trim(),
+    baseFontSize: gn('ctrl-base-size-num'),
+    lineHeight:   gn('ctrl-line-height-num'),
+    headers: {
+      fontFamily:   gv('ctrl-h-font-family').replace(/['"]/g, '').split(',')[0].trim(),
+      scale:        gn('ctrl-h-scale-num'),
+      marginBottom: gn('ctrl-h-mb-num'),
+    },
+    h1: { fontSize: gn('ctrl-h1-size-num'), fontWeight: parseInt(gv('ctrl-h1-weight')) || 0 },
+    h2: { fontSize: gn('ctrl-h2-size-num'), fontWeight: parseInt(gv('ctrl-h2-weight')) || 0 },
+    h3: { fontSize: gn('ctrl-h3-size-num'), fontWeight: parseInt(gv('ctrl-h3-weight')) || 0 },
+    h4: { fontSize: gn('ctrl-h4-size-num'), fontWeight: parseInt(gv('ctrl-h4-weight')) || 0 },
+    p: {
+      lineHeight:   gn('ctrl-p-lh-num'),
+      marginBottom: gn('ctrl-p-mb-num'),
+    },
+    link: { decoration: gv('ctrl-link-decoration') },
+    code: {
+      font: gv('ctrl-code-font').replace(/['"]/g, '').split(',')[0].trim(),
+    },
+    blockquote: {
+      borderWidth: gn('ctrl-bq-bw-num'),
+      fontSize:    gn('ctrl-bq-size-num'),
+    },
+  };
+
+  styles.list = {
+    spacing: gn('ctrl-list-spacing-num'),
+    indent:  gn('ctrl-list-indent-num'),
+  };
+
+  // Build theme color blocks
+  var lightBlock = collectThemeColors(lightColors, lightOverridden);
+  var darkBlock  = collectThemeColors(darkColors, darkOverridden);
+
+  // Only emit light/dark blocks if they have content
+  if (Object.keys(lightBlock).length > 0) styles.light = lightBlock;
+  if (Object.keys(darkBlock).length > 0)  styles.dark = darkBlock;
+
+  return styles;
+}
+
+/**
+ * stylesToControls(styles) — extended version
+ * Detects styles.light/styles.dark and returns per-theme data when present.
+ */
+var _origStylesToControls = stylesToControls;
+
+stylesToControls = function(styles) {
+  if (!styles) return { controls: {}, overriddenColors: new Set(), hasThemeColors: false };
+
+  var hasThemeColors = !!(styles.light || styles.dark);
+
+  if (!hasThemeColors) {
+    var result = _origStylesToControls(styles);
+    result.hasThemeColors = false;
+    return result;
+  }
+
+  // Parse non-color controls from top level (same as original, but skip colors)
+  var controls = {};
+  var overridden = new Set();
+
+  if (styles.fontFamily)   controls['ctrl-font-family'] = styles.fontFamily;
+  if (styles.baseFontSize) controls['ctrl-base-size-num'] = styles.baseFontSize;
+  if (styles.lineHeight)   controls['ctrl-line-height-num'] = styles.lineHeight;
+
+  var h = styles.headers || {};
+  if (h.fontFamily)   controls['ctrl-h-font-family'] = h.fontFamily;
+  if (h.scale)        controls['ctrl-h-scale-num'] = h.scale;
+  if (h.marginBottom) controls['ctrl-h-mb-num'] = h.marginBottom;
+
+  ['h1', 'h2', 'h3', 'h4'].forEach(function(t) {
+    var hs = styles[t] || {};
+    if (hs.fontSize)   controls['ctrl-' + t + '-size-num'] = hs.fontSize;
+    if (hs.fontWeight) controls['ctrl-' + t + '-weight'] = String(hs.fontWeight);
+  });
+
+  var p = styles.p || {};
+  if (p.lineHeight)   controls['ctrl-p-lh-num'] = p.lineHeight;
+  if (p.marginBottom) controls['ctrl-p-mb-num'] = p.marginBottom;
+
+  var lk = styles.link || {};
+  if (lk.decoration) controls['ctrl-link-decoration'] = lk.decoration;
+
+  var cd = styles.code || {};
+  if (cd.font) controls['ctrl-code-font'] = cd.font;
+
+  var bq = styles.blockquote || {};
+  if (bq.borderWidth) controls['ctrl-bq-bw-num'] = bq.borderWidth;
+  if (bq.fontSize)    controls['ctrl-bq-size-num'] = bq.fontSize;
+
+  var ll = styles.list || {};
+  if (ll.spacing) controls['ctrl-list-spacing-num'] = ll.spacing;
+  if (ll.indent)  controls['ctrl-list-indent-num'] = ll.indent;
+
+  // Parse per-theme color blocks
+  var lightParsed = parseThemeColorBlock(styles.light);
+  var darkParsed  = parseThemeColorBlock(styles.dark);
+
+  return {
+    controls: controls,
+    overriddenColors: overridden,
+    hasThemeColors: true,
+    lightColors: lightParsed.colors,
+    lightOverridden: lightParsed.overridden,
+    darkColors: darkParsed.colors,
+    darkOverridden: darkParsed.overridden,
+  };
+};
+
 // ═══════════════════════════════════════════════════════
 //  EXPORTS
 // ═══════════════════════════════════════════════════════
@@ -274,10 +534,16 @@ exports.COLOR_CASCADE   = COLOR_CASCADE;
 exports.CTRL_CSS_MAP    = CTRL_CSS_MAP;
 exports.RANGE_NUM_PAIRS = RANGE_NUM_PAIRS;
 
-exports.controlToCssVars  = controlToCssVars;
-exports.cascadeColor      = cascadeColor;
-exports.collectStyles     = collectStyles;
-exports.stylesToControls  = stylesToControls;
+exports.STANDALONE_COLOR_IDS = STANDALONE_COLOR_IDS;
+exports.ALL_COLOR_IDS        = ALL_COLOR_IDS;
+
+exports.controlToCssVars      = controlToCssVars;
+exports.cascadeColor          = cascadeColor;
+exports.collectStyles         = collectStyles;
+exports.collectStylesDual     = collectStylesDual;
+exports.collectThemeColors    = collectThemeColors;
+exports.parseThemeColorBlock  = parseThemeColorBlock;
+exports.stylesToControls      = stylesToControls;
 
 // UMD tail: in Node (tests) this writes to module.exports; in the browser
 // it creates window.SDocStyles.  We use this pattern instead of ES modules