Manual

OpenAI API key

When Lunar asks for an API key, it means your OpenAI API key. Paste your OpenAI API key into the field before generating.

Export files

• styles/lunar.css contains the component styles.
• styles/theme-toggle.css contains the light and dark theme tokens.
• scripts/theme-toggle.js handles theme mode, class switching, and attribute switching.

Required imports

<link rel="stylesheet" href="./styles/lunar.css" />
<link rel="stylesheet" href="./styles/theme-toggle.css" />
<script src="./scripts/theme-toggle.js"></script>

Theme trigger

Add any clickable element with id="themeToggle". Lunar listens for clicks on that element and does not change its text or content.

Class switching

<div
  class="ln-alert ln-alert-soft ln-alert-soft--info"
  data-ln-light-classes="ln-alert ln-alert-soft ln-alert-soft--info"
  data-ln-dark-classes="ln-alert ln-alert-solid ln-alert-solid--info">
</div>

Attribute switching

<button
  class="ln-btn ln-btn-palette"
  data-variant="solid"
  data-ln-light-attrs='{"data-variant":"solid"}'
  data-ln-dark-attrs='{"data-variant":"outline"}'>
</button>