Configuration

Customize appearance and behavior with HTML attributes, CSS custom properties, and a small JavaScript API. Preferences can persist in localStorage.

Color scheme (Light / Dark / Auto)

User preference is stored as sf-theme-mode on <html data-theme-mode>. The active palette uses data-theme="light" or data-theme="dark".

Theme picker (recommended)

<div class="sf-theme-picker" role="group" aria-label="Color scheme">
  <button type="button" class="sf-theme-picker__btn" data-theme-mode-option="light">☀ Light</button>
  <button type="button" class="sf-theme-picker__btn" data-theme-mode-option="dark">☾ Dark</button>
  <button type="button" class="sf-theme-picker__btn" data-theme-mode-option="auto">◐ Auto</button>
</div>

JavaScript

SuhuFramework.setThemeMode('auto');  // 'light' | 'dark' | 'auto'
SuhuFramework.getThemeMode();

Live examples: Theme settings in the component demo.

Text direction (LTR / RTL)

Set document direction on <html dir="…">. Preference is saved as sf-dir in localStorage.

<div class="sf-dir-picker" role="group" aria-label="Text direction">
  <button type="button" class="sf-dir-picker__btn" data-dir-option="ltr">LTR</button>
  <button type="button" class="sf-dir-picker__btn" data-dir-option="rtl">RTL</button>
</div>

SuhuFramework.setDirection('rtl');
SuhuFramework.getDirection();

Spacing utilities (.ms-*, .me-*, .text-start) use logical properties and follow direction automatically.

CSS variables

Override semantic tokens after loading suhu-framework.min.css (or source suhu-framework.css in development):

:root {
  --navbar-height: 4rem;
  --sf-gutter: 1rem;              /* .container-fluid horizontal padding */
  --sf-container-padding: 1rem;   /* .container horizontal padding (7rem @ ≥992px) */
  --sf-masthead-padding-top: 2.5rem;
  --sf-masthead-padding-bottom: 3rem;
  --sf-blue-600: #2563eb;
  --sf-bg: #f8fafc;
  --sf-surface: #ffffff;
  --sf-border: #e2e8f0;
  --sf-color-text: #0f172a;
  --font-sans: 'Inter', system-ui, sans-serif;
  --radius: 0.5rem;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --sf-gutter: 1.5rem;
    --sf-container-padding: 3rem;
    --sf-masthead-padding-top: 3rem;
    --sf-masthead-padding-bottom: 3rem;
  }
}

@media (min-width: 992px) {
  :root {
    --sf-container-padding: 7rem;
  }
}

[data-theme="dark"] {
  --sf-bg: #020617;
  --sf-surface: #0f172a;
}

Layout tokens: --sf-gutter (fluid containers / navbars), --sf-container-padding (content .container), --sf-masthead-padding-top/bottom (masthead vertical spacing), --navbar-height, --sf-navbar-*, --sf-card-*, --sf-input-*, --sf-dropdown-*, --sf-modal-*. Utilities: .px-gutter, .px-container.

Common data attributes

Attribute	Element	Description
`data-theme-mode-option`	Button	Set theme: light, dark, or auto
`data-theme-toggle`	Button	Cycle light → dark → auto
`data-dir-option`	Button	Set LTR or RTL
`data-bs-toggle="offcanvas"`	Button	Open offcanvas — required on navbar toggler for mobile menu (`data-bs-target="#id"`)
`data-toggle`	Offcanvas link buttons	Toggle `.offcanvas-submenu` / nested menu
`data-bs-toggle="popover"`	Button	Click popover (`data-bs-title`, `data-bs-content`)
`data-bs-toggle="collapse"`	Button	Toggle collapse target
`data-modal-target`	Button	Open modal by ID
`data-table-search`	Table wrapper	Client-side search on datatable
`data-sf-date-picker`	Input	Enable SF date picker (add-on)

Manual initialization

SuhuFramework.init();
SuhuFramework.openModal(document.querySelector('#myModal'));
SuhuFramework.openOffcanvas('myNavOffcanvas');
SuhuFramework.showToast({ title: 'Done', message: 'Saved.', type: 'success' });

Full Guide → ← Installation