opaline 0.4.1

A token-based theme engine for Rust applications
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

# CSS Adapter

The `css` feature generates CSS custom properties and classes from Opaline themes, bridging your themes into web frameworks like Leptos, Yew, Dioxus, and Tauri.

```toml
[dependencies]
opaline = { version = "0.4", features = ["css"] }
```

## CSS Custom Properties

Generate `:root` variables from all theme tokens:

```rust
use opaline::{Theme, generate_css_vars};

let theme = Theme::default();
let css = generate_css_vars(&theme);
```

Output:

```css
:root {
  --opaline-accent-primary: #cba6f7;
  --opaline-bg-base: #1e1e2e;
  --opaline-text-primary: #cdd6f4;
  /* ... 39 token variables */
  --opaline-gradient-primary: linear-gradient(to right, #e135ff, #80ffea);
  --opaline-gradient-aurora: linear-gradient(
    to right,
    #e135ff,
    #80ffea,
    #ff6ac1
  );
}
```

Token names are prefixed with `--opaline-` and dots/underscores become dashes.

## CSS Classes

Generate classes from theme styles:

```rust
use opaline::{Theme, generate_css_classes};

let theme = Theme::default();
let css = generate_css_classes(&theme);
```

Output:

```css
.opaline-keyword {
  color: #cba6f7;
  font-weight: bold;
}

.opaline-error-style {
  color: #f38ba8;
}

.opaline-diff-added {
  color: #a6e3a1;
}
```

Style modifiers map to CSS properties:

| OpalineStyle  | CSS Property                    |
| ------------- | ------------------------------- |
| `fg`          | `color`                         |
| `bg`          | `background-color`              |
| `bold`        | `font-weight: bold`             |
| `dim`         | `opacity: 0.7`                  |
| `italic`      | `font-style: italic`            |
| `underline`   | `text-decoration: underline`    |
| `crossed_out` | `text-decoration: line-through` |
| `hidden`      | `visibility: hidden`            |

## Complete Stylesheet

Generate both variables and classes in one call:

```rust
use opaline::{Theme, generate_stylesheet};

let theme = Theme::default();
let css = generate_stylesheet(&theme);
// Includes :root { ... } + .opaline-* classes
```

## Usage with Web Frameworks

### Leptos / Yew / Dioxus

Generate CSS at build time and include in your app:

```rust
// build.rs
let theme = opaline::Theme::default();
let css = opaline::generate_stylesheet(&theme);
std::fs::write("style/theme.css", css).unwrap();
```

### Tauri

Generate CSS and inject via the webview:

```rust
let css = opaline::generate_stylesheet(&theme);
window.eval(&format!("
    const style = document.createElement('style');
    style.textContent = `{css}`;
    document.head.appendChild(style);
"))?;
```

### Runtime Theme Switching

Regenerate CSS when the theme changes:

```rust
fn switch_theme(name: &str) -> String {
    let theme = opaline::load_by_name(name).expect("valid theme");
    opaline::generate_stylesheet(&theme)
}
```