Packages
mdex
0.13.3
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.5
retired
0.12.4
0.12.3
0.12.2
0.12.1
0.12.0
0.11.7
0.11.6
0.11.5
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.4
0.9.3
0.9.2
0.9.1
0.9.0
0.8.6
0.8.5
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.5
0.7.4
0.7.3
0.7.2
0.7.1
0.7.0
0.6.2
0.6.1
0.6.0
0.5.0
0.4.3
0.4.2
0.4.1
0.4.0
0.3.3
0.3.2
0.3.1
0.3.0
0.2.0
0.1.18
0.1.17
0.1.16
0.1.15
0.1.14
0.1.13
0.1.12
0.1.11
0.1.10
0.1.9
0.1.8
0.1.7
0.1.6
0.1.5
0.1.4
0.1.3
0.1.2
0.1.1
0.1.0
Fast and extensible Markdown for Elixir
Current section
Files
Jump to
Current section
Files
examples/light_dark_theme.livemd
# 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()
````