# Lumis light/dark theme

```elixir
Mix.install([
  {:mdex, "~> 0.11"},
  {:lumis, "~> 0.1"},
  {:kino, "~> 0.18"}
],
  config: [mdex_native: [syntax_highlighter: :lumis]]
)
```

## Intro

Lumis supports automatic light/dark mode switching with the `:html_multi_themes` formatter. It generates CSS that responds to the user's system color scheme preference, so you can switch themes without JavaScript.

## Example

````elixir
options = [
  render: [unsafe: true],
  syntax_highlight: [
    engine: :lumis,
    opts: [
      formatter: {
        :html_multi_themes,
        themes: [light: "github_light", dark: "github_dark"],
        default_theme: "light-dark()"
      }
    ]
  ]
]

"""
# Light/Dark Example

_Change your OS system setting to see the colors change from light to dark and vice-versa._

```elixir
# elixir

def fib(n), do: fib(n, 1, 1)

def fib(0, _a, _b), do: []

def fib(n, a, b) when n > 0 do
  [a | fib(n - 1, b, a + b)]
end
```

<style>
  /* Enable light/dark mode based on system preference */
  html {
    color-scheme: light dark;
  }
</style>
"""
|> MDEx.to_html!(options)
|> Kino.HTML.new()
````