DarkModeScript() — ui Function Reference

Architecture documentation for the DarkModeScript() function in mode-switcher.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ DarkModeScript() — ui Function Reference

Dependency Diagram

graph TD
  3d06d833_3f9e_accf_9d70_30f058e6f83e["DarkModeScript()"]
  449e9f5f_4c83_3a43_0cf3_5da2cfe0c8e2["mode-switcher.tsx"]
  3d06d833_3f9e_accf_9d70_30f058e6f83e -->|defined in| 449e9f5f_4c83_3a43_0cf3_5da2cfe0c8e2
  style 3d06d833_3f9e_accf_9d70_30f058e6f83e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/mode-switcher.tsx lines 89–123

export function DarkModeScript() {
  return (
    <Script
      id="dark-mode-listener"
      strategy="beforeInteractive"
      dangerouslySetInnerHTML={{
        __html: `
            (function() {
              // Forward D key
              document.addEventListener('keydown', function(e) {
                if ((e.key === 'd' || e.key === 'D') && !e.metaKey && !e.ctrlKey) {
                  if (
                    (e.target instanceof HTMLElement && e.target.isContentEditable) ||
                    e.target instanceof HTMLInputElement ||
                    e.target instanceof HTMLTextAreaElement ||
                    e.target instanceof HTMLSelectElement
                  ) {
                    return;
                  }
                  e.preventDefault();
                  if (window.parent && window.parent !== window) {
                    window.parent.postMessage({
                      type: '${DARK_MODE_FORWARD_TYPE}',
                      key: e.key
                    }, '*');
                  }
                }
              });

            })();
          `,
      }}
    />
  )
}