Thanks for the feedback and reply!

Good news: there's a workaround, but first the why.

Each %md-sandbox cell renders inside a cross-origin iframe (databricksusercontent.com ) it is deliberately isolated from the workspace DOM for safety. The dark mode "transformation" you're seeing isn't styling - it is a filter applied to the iframe element itself by the parent workspace, via a --invert-filter CSS variable the iframe can't read.

This is based upon the Light/Dark Mode Toggle Example in https://github.com/stackql-labs/sandbox-magic/blob/main/04 - Codeblocks.ipynb

%md-sandbox
<div class="admonition"
     data-type="info"
     data-title="Information"
     data-body="This is an informational message...">
</div>

<script>
(function() {
  var palettes = {
    info: {
      light: { border:'#1976d2', bg:'#e3f2fd', title:'#0d47a1', body:'#333',  icon:'#1976d2' },
      dark:  { border:'#e6892d', bg:'#1c0d02', title:'#f2b85e', body:'#ccc',  icon:'#e6892d' }
    }
  };

  document.querySelectorAll('.admonition').forEach(function(block) {
    if (block.dataset.processed) return;
    block.dataset.processed = '1';
    var type = block.dataset.type, title = block.dataset.title, body = block.dataset.body;
    var mode = 'light';

    function render() {
      var p = palettes[type][mode];
      block.innerHTML =
        '<div style="position:relative; border-left:4px solid '+p.border+
        '; background:'+p.bg+'; padding:16px 20px; padding-right:80px;'+
        ' border-radius:4px; margin:16px 0; font-family:sans-serif;">'+
          '<button class="adm-toggle" style="position:absolute; top:8px; right:8px;'+
          ' padding:4px 10px; font-size:11px; background:#7f7f7f; color:#fff;'+
          ' border:1px solid #7f7f7f; border-radius:4px; cursor:pointer;">'+
          (mode==='light' ? '🌙 Dark' : '☀ Light')+'</button>'+
          '<div style="display:flex; gap:12px;">'+
            '<span style="font-size:22px; font-weight:bold; color:'+p.icon+';">i</span>'+
            '<div>'+
              '<strong style="color:'+p.title+'; font-size:1.1em;">'+title+'</strong>'+
              '<p style="margin:8px 0 0 0; color:'+p.body+';">'+body+'</p>'+
            '</div>'+
          '</div>'+
        '</div>';
      block.querySelector('.adm-toggle').onclick = function() {
        mode = (mode==='light') ? 'dark' : 'light';
        render();
      };
    }
    render();
  });
})();
</script>

Not perfect (still manual), but at least it's deterministic.