> ## Documentation Index > Fetch the complete documentation index at: https://docs.sidenet.ai/llms.txt > Use this file to discover all available pages before exploring further. # Defaults & Constants > Exported constants and event handling. ## Defaults & Constants | Export | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `DEFAULT_THEME` | `ThemeInput` — the full default token set the SDK ships with. Read it to inspect defaults, or spread it into `updateSidenetStyledConfig({ theme })` as a starting point. | | `SIDENET_EVENTS` | `{ OPEN, CLOSE, RESIZE, READY }` — typed event-name constants. Prefer these over raw `'sidenet:open'` strings for type safety. | ```typescript theme={null} import { DEFAULT_THEME, SIDENET_EVENTS, updateSidenetStyledConfig } from 'sidenetai-sdk'; // Start from defaults and tweak one token updateSidenetStyledConfig({ theme: { ...DEFAULT_THEME, accentColor: { light: '#ff5722', dark: '#ff8a65' } }, }); window.addEventListener(SIDENET_EVENTS.OPEN, (e) => { console.log('Opened at', e.detail.width); }); ``` ## Events Three ways to respond to sidebar state changes: ### 1. Callbacks (Simplest) ```typescript theme={null} initSidenet({ orgId: 'org-123', onOpen: (detail) => console.log('Opened', detail.width), onClose: (detail) => console.log('Closed'), onResize: (detail) => console.log('Resized to', detail.width), onReady: (detail) => console.log('Ready'), }); ``` ### 2. CSS Custom Properties (Zero-code layout) ```css theme={null} .my-content { margin-right: var(--sidenet-width, 0); transition: margin 0.3s ease; } ``` Available properties (set on the host page's `` element): * `--sidenet-width` — Current width (e.g., `400px`) or `0` when closed * `--sidenet-open` — `1` when open, `0` when closed * `--sidenet-position` — `left` or `right` Theme token variables (`--background`, `--aui-accent-color`, etc.) live **inside the Shadow DOM** and are not exposed to the host page. To customize them, use `updateSidenetStyledConfig({ theme })` rather than CSS overrides. ### 3. Window Events (Decoupled) ```typescript theme={null} import { SIDENET_EVENTS } from 'sidenetai-sdk'; window.addEventListener(SIDENET_EVENTS.OPEN, (e) => { console.log('Opened', e.detail.width, e.detail.position); }); window.addEventListener(SIDENET_EVENTS.CLOSE, (e) => { console.log('Closed'); }); window.addEventListener(SIDENET_EVENTS.RESIZE, (e) => { console.log('Resized', e.detail.width); }); window.addEventListener(SIDENET_EVENTS.READY, (e) => { console.log('Ready'); }); ``` Raw event-name strings (`'sidenet:open'`, `'sidenet:close'`, `'sidenet:resize'`, `'sidenet:ready'`) also work — the constants exist for type safety and refactor resilience. Event detail shape: ```typescript theme={null} interface SidenetEventDetail { width: string; // e.g., '400px' position: 'left' | 'right'; layout: 'sidebar' | 'modal' | 'drawer'; } ```