lerobot/robot-learning-tutorial

1<button id="theme-toggle" aria-label="Toggle color theme">2  <svg class="icon light" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">3    <circle cx="12" cy="12" r="5"></circle>4    <line x1="12" y1="1" x2="12" y2="4"></line>5    <line x1="12" y1="20" x2="12" y2="23"></line>6    <line x1="1" y1="12" x2="4" y2="12"></line>7    <line x1="20" y1="12" x2="23" y2="12"></line>8    <line x1="4.22" y1="4.22" x2="6.34" y2="6.34"></line>9    <line x1="17.66" y1="17.66" x2="19.78" y2="19.78"></line>10    <line x1="4.22" y1="19.78" x2="6.34" y2="17.66"></line>11    <line x1="17.66" y1="6.34" x2="19.78" y2="4.22"></line>12  </svg>13  <svg class="icon dark" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">14    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>15  </svg>16  <script>17    const btn = document.getElementById('theme-toggle');18    const media = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');19    const prefersDark = media && media.matches;20    const saved = localStorage.getItem('theme'); // 'light' | 'dark' | null21 22    const apply = (mode) => {23      document.documentElement.dataset.theme = mode;24    };25 26    // Initial mode: default to light, then use localStorage, else system27    apply(saved || (prefersDark ? 'dark' : 'light'));28 29    // If user hasn't chosen manually, follow system changes30    if (!saved && media) {31      const syncWithSystem = (e) => apply(e.matches ? 'dark' : 'light');32      if (media.addEventListener) media.addEventListener('change', syncWithSystem);33      else if (media.addListener) media.addListener(syncWithSystem);34    }35 36    if (btn) {37      btn.addEventListener('click', () => {38        const next = (document.documentElement.dataset.theme === 'dark') ? 'light' : 'dark';39        localStorage.setItem('theme', next);40        apply(next);41      });42    }43 44    // Adjust offset for Hugging Face Spaces tiny header (production)45    // Sets CSS var --hf-spaces-topbar used in _layout.css for sticky placement46    const computeSpacesTopbarOffset = () => {47      try {48        const host = window.location.hostname || '';49        const isSpaces = /\.hf\.space$/.test(host) || host.endsWith('huggingface.co');50        let topbar = 0;51        if (isSpaces) {52          // Scan fixed elements anchored to top to estimate tiny header height53          const nodes = Array.from(document.querySelectorAll('*'));54          for (const el of nodes) {55            const cs = window.getComputedStyle(el);56            if (cs.position === 'fixed' && cs.top === '0px') {57              const rect = el.getBoundingClientRect();58              if (rect.top <= 1 && rect.height > 0 && rect.height <= 80) {59                topbar = Math.max(topbar, Math.ceil(rect.bottom));60              }61            }62          }63          // Fallback reasonable tiny header height64          if (!topbar) topbar = 60;65        }66        document.documentElement.style.setProperty('--hf-spaces-topbar', `${topbar}px`);67      } catch (_) {68        // No-op69      }70    };71    window.addEventListener('load', computeSpacesTopbarOffset);72    window.addEventListener('resize', computeSpacesTopbarOffset);73    // Re-run shortly after load to catch late-mounted headers74    setTimeout(computeSpacesTopbarOffset, 800);75  </script>76</button>77 78 79<style>80  #theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--text-color) !important; }81#theme-toggle .icon.dark { display: none; }82[data-theme="dark"] #theme-toggle .icon.light { display: none; }83[data-theme="dark"] #theme-toggle .icon.dark { display: inline; }84#theme-toggle .icon { filter: none !important; }85</style>