Code

---
import { Code } from '@santi020k/lumen-astro'

const themeExample = `
  const theme = "lumen";
  const accent = "hsl(var(--accent))";
`
---

<div class="grid gap-4">
  <p>Apply the current theme with <Code>data-theme</Code> on the root element.</p>
  <Code code={themeExample} copy label="theme.ts" language="ts" variant="block" />
  
  <p>Override the syntax palette family with <Code>theme</Code>.</p>
  <Code code={themeExample} label="lumen" language="ts" theme="lumen" variant="block" />
  <Code code={themeExample} label="santi020k" language="ts" theme="santi020k" variant="block" />
</div>

import { Code } from '@santi020k/lumen-react'

const themeExample = `
  const theme = "lumen";
  const accent = "hsl(var(--accent))";
`

export const Example = () => (
  <Code code={themeExample} copy label="theme.ts" language="ts" variant="block" />
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-code data-code-theme="auto" variant="block">
  <figcaption class="ui-code__header">
    <span class="ui-code__dots" aria-hidden="true">
      <span class="ui-code__dot ui-code__dot--red"></span>
      <span class="ui-code__dot ui-code__dot--yellow"></span>
      <span class="ui-code__dot ui-code__dot--green"></span>
    </span>
    <span class="ui-code__meta">
      <span class="ui-code__language">ts</span>
      <span class="ui-code__label">theme.ts</span>
    </span>
  </figcaption>
  <pre><code>const theme = "lumen";
const accent = "hsl(var(--accent))";</code></pre>
</lumen-code>