Skip to content

Commit c88d5c1

Browse files
ealmloffealmloff
committed
zero js light/dark mode switching
1 parent 97d5334 commit c88d5c1

110 files changed

Lines changed: 13158 additions & 3182 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎Cargo.lock‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ Two ways to highlight:
3131
dioxus-code = "0.1"
3232
```
3333

34-
```rust
34+
```rust,ignore
3535
use dioxus::prelude::*;
3636
use dioxus_code::{Code, Theme, code};
3737
@@ -57,7 +57,7 @@ For editor-style use cases where the source isn't known at compile time:
5757
dioxus-code = { version = "0.1", features = ["runtime"] }
5858
```
5959

60-
```rust
60+
```rust,ignore
6161
use dioxus_code::{Code, SourceCode, Theme};
6262
6363
rsx! {
@@ -74,7 +74,7 @@ Language can be set explicitly, inferred from a filename via `with_name("main.rs
7474

7575
`dioxus-code-editor` is a sibling crate that pairs the highlighter with a `contenteditable` input layer:
7676

77-
```rust
77+
```rust,ignore
7878
use dioxus_code_editor::CodeEditor;
7979
use dioxus_code::Theme;
8080
@@ -96,10 +96,22 @@ It is controlled — drive `value` from your own signal and update it inside `on
9696

9797
Thirty-odd built-ins, including Tokyo Night, Catppuccin (all four), Dracula, GitHub Light/Dark, Gruvbox, Nord, One Dark, Rosé Pine, Solarized, the Rustdoc themes, and others. Each is exposed as a `Theme` constant and a CSS asset; pages with multiple themes render side-by-side without leaking styles.
9898

99-
```rust
99+
```rust,ignore
100100
Code { src: code!("/example.rs"), theme: Theme::CATPPUCCIN_MOCHA }
101101
```
102102

103+
Use `CodeTheme::system` to select a light and dark theme with CSS media
104+
queries. This is JavaScript-free and works during SSR:
105+
106+
```rust,ignore
107+
use dioxus_code::{Code, CodeTheme, Theme, code};
108+
109+
Code {
110+
src: code!("/example.rs"),
111+
theme: CodeTheme::system(Theme::GITHUB_LIGHT, Theme::TOKYO_NIGHT),
112+
}
113+
```
114+
103115
## Examples
104116

105117
```sh

‎assets/generated/arborium-themes/alabaster-system-dark.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.dxc-system-dark-alabaster {
2+
--dxc-dark-background: #f7f7f7;
3+
--dxc-dark-var-bg: #f7f7f7;
4+
--dxc-dark-var-surface: #ebebeb;
5+
--dxc-dark-color: #000000;
6+
--dxc-dark-var-fg: #000000;
7+
--dxc-dark-var-accent: #325cc0;
8+
--dxc-dark-var-muted: #aa3731;
9+
--dxc-dark-a-at-color: #7a3e9d;
10+
--dxc-dark-a-c-color: #aa3731;
11+
--dxc-dark-a-cb-color: #7a3e9d;
12+
--dxc-dark-a-cd-color: #aa3731;
13+
--dxc-dark-a-ch-color: #448c27;
14+
--dxc-dark-a-cn-color: #000000;
15+
--dxc-dark-a-co-color: #7a3e9d;
16+
--dxc-dark-a-cs-color: #448c27;
17+
--dxc-dark-a-dr-color: #000000;
18+
--dxc-dark-a-em-font-style: italic;
19+
--dxc-dark-a-ex-color: #000000;
20+
--dxc-dark-a-f-color: #325cc0;
21+
--dxc-dark-a-fb-color: #325cc0;
22+
--dxc-dark-a-fc-color: #325cc0;
23+
--dxc-dark-a-fd-color: #325cc0;
24+
--dxc-dark-a-fm-color: #325cc0;
25+
--dxc-dark-a-in-color: #000000;
26+
--dxc-dark-a-k-color: #000000;
27+
--dxc-dark-a-kc-color: #000000;
28+
--dxc-dark-a-kd-color: #000000;
29+
--dxc-dark-a-ke-color: #000000;
30+
--dxc-dark-a-kf-color: #000000;
31+
--dxc-dark-a-ki-color: #000000;
32+
--dxc-dark-a-km-color: #000000;
33+
--dxc-dark-a-ko-color: #000000;
34+
--dxc-dark-a-kp-color: #000000;
35+
--dxc-dark-a-kr-color: #000000;
36+
--dxc-dark-a-kt-color: #000000;
37+
--dxc-dark-a-ky-color: #000000;
38+
--dxc-dark-a-l-color: #325cc0;
39+
--dxc-dark-a-m-color: #325cc0;
40+
--dxc-dark-a-n-color: #7a3e9d;
41+
--dxc-dark-a-o-color: #777777;
42+
--dxc-dark-a-p-color: #777777;
43+
--dxc-dark-a-pb-color: #777777;
44+
--dxc-dark-a-pd-color: #777777;
45+
--dxc-dark-a-pp-color: #000000;
46+
--dxc-dark-a-pr-color: #000000;
47+
--dxc-dark-a-ps-color: #777777;
48+
--dxc-dark-a-rp-color: #000000;
49+
--dxc-dark-a-rx-color: #448c27;
50+
--dxc-dark-a-s-color: #448c27;
51+
--dxc-dark-a-sc-color: #000000;
52+
--dxc-dark-a-se-color: #777777;
53+
--dxc-dark-a-sp-color: #000000;
54+
--dxc-dark-a-ss-color: #777777;
55+
--dxc-dark-a-st-font-weight: bold;
56+
--dxc-dark-a-t-color: #325cc0;
57+
--dxc-dark-a-tb-color: #325cc0;
58+
--dxc-dark-a-td-color: #325cc0;
59+
--dxc-dark-a-te-color: #325cc0;
60+
--dxc-dark-a-tf-color: #325cc0;
61+
--dxc-dark-a-tg-color: #325cc0;
62+
--dxc-dark-a-tl-color: #000000;
63+
--dxc-dark-a-tq-color: #325cc0;
64+
--dxc-dark-a-tr-color: #325cc0;
65+
--dxc-dark-a-tt-color: #325cc0;
66+
--dxc-dark-a-tt-font-weight: bold;
67+
--dxc-dark-a-tu-color: #325cc0;
68+
--dxc-dark-a-tu-text-decoration: underline;
69+
--dxc-dark-a-tx-text-decoration: line-through;
70+
--dxc-dark-a-v-color: #000000;
71+
--dxc-dark-a-vb-color: #7a3e9d;
72+
--dxc-dark-a-vm-color: #000000;
73+
--dxc-dark-a-vp-color: #000000;
74+
}

‎assets/generated/arborium-themes/alabaster-system-light.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.dxc-system-light-alabaster {
2+
--dxc-light-background: #f7f7f7;
3+
--dxc-light-var-bg: #f7f7f7;
4+
--dxc-light-var-surface: #ebebeb;
5+
--dxc-light-color: #000000;
6+
--dxc-light-var-fg: #000000;
7+
--dxc-light-var-accent: #325cc0;
8+
--dxc-light-var-muted: #aa3731;
9+
--dxc-light-a-at-color: #7a3e9d;
10+
--dxc-light-a-c-color: #aa3731;
11+
--dxc-light-a-cb-color: #7a3e9d;
12+
--dxc-light-a-cd-color: #aa3731;
13+
--dxc-light-a-ch-color: #448c27;
14+
--dxc-light-a-cn-color: #000000;
15+
--dxc-light-a-co-color: #7a3e9d;
16+
--dxc-light-a-cs-color: #448c27;
17+
--dxc-light-a-dr-color: #000000;
18+
--dxc-light-a-em-font-style: italic;
19+
--dxc-light-a-ex-color: #000000;
20+
--dxc-light-a-f-color: #325cc0;
21+
--dxc-light-a-fb-color: #325cc0;
22+
--dxc-light-a-fc-color: #325cc0;
23+
--dxc-light-a-fd-color: #325cc0;
24+
--dxc-light-a-fm-color: #325cc0;
25+
--dxc-light-a-in-color: #000000;
26+
--dxc-light-a-k-color: #000000;
27+
--dxc-light-a-kc-color: #000000;
28+
--dxc-light-a-kd-color: #000000;
29+
--dxc-light-a-ke-color: #000000;
30+
--dxc-light-a-kf-color: #000000;
31+
--dxc-light-a-ki-color: #000000;
32+
--dxc-light-a-km-color: #000000;
33+
--dxc-light-a-ko-color: #000000;
34+
--dxc-light-a-kp-color: #000000;
35+
--dxc-light-a-kr-color: #000000;
36+
--dxc-light-a-kt-color: #000000;
37+
--dxc-light-a-ky-color: #000000;
38+
--dxc-light-a-l-color: #325cc0;
39+
--dxc-light-a-m-color: #325cc0;
40+
--dxc-light-a-n-color: #7a3e9d;
41+
--dxc-light-a-o-color: #777777;
42+
--dxc-light-a-p-color: #777777;
43+
--dxc-light-a-pb-color: #777777;
44+
--dxc-light-a-pd-color: #777777;
45+
--dxc-light-a-pp-color: #000000;
46+
--dxc-light-a-pr-color: #000000;
47+
--dxc-light-a-ps-color: #777777;
48+
--dxc-light-a-rp-color: #000000;
49+
--dxc-light-a-rx-color: #448c27;
50+
--dxc-light-a-s-color: #448c27;
51+
--dxc-light-a-sc-color: #000000;
52+
--dxc-light-a-se-color: #777777;
53+
--dxc-light-a-sp-color: #000000;
54+
--dxc-light-a-ss-color: #777777;
55+
--dxc-light-a-st-font-weight: bold;
56+
--dxc-light-a-t-color: #325cc0;
57+
--dxc-light-a-tb-color: #325cc0;
58+
--dxc-light-a-td-color: #325cc0;
59+
--dxc-light-a-te-color: #325cc0;
60+
--dxc-light-a-tf-color: #325cc0;
61+
--dxc-light-a-tg-color: #325cc0;
62+
--dxc-light-a-tl-color: #000000;
63+
--dxc-light-a-tq-color: #325cc0;
64+
--dxc-light-a-tr-color: #325cc0;
65+
--dxc-light-a-tt-color: #325cc0;
66+
--dxc-light-a-tt-font-weight: bold;
67+
--dxc-light-a-tu-color: #325cc0;
68+
--dxc-light-a-tu-text-decoration: underline;
69+
--dxc-light-a-tx-text-decoration: line-through;
70+
--dxc-light-a-v-color: #000000;
71+
--dxc-light-a-vb-color: #7a3e9d;
72+
--dxc-light-a-vm-color: #000000;
73+
--dxc-light-a-vp-color: #000000;
74+
}

‎assets/generated/arborium-themes/alabaster.css‎

Lines changed: 72 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,74 @@
11
.dxc-alabaster {
2-
background: #f7f7f7;
3-
--bg: #f7f7f7;
4-
--surface: #ebebeb;
5-
color: #000000;
6-
--fg: #000000;
7-
--accent: #325cc0;
8-
--muted: #aa3731;
2+
--dxc-light-background: #f7f7f7;
3+
--dxc-light-var-bg: #f7f7f7;
4+
--dxc-light-var-surface: #ebebeb;
5+
--dxc-light-color: #000000;
6+
--dxc-light-var-fg: #000000;
7+
--dxc-light-var-accent: #325cc0;
8+
--dxc-light-var-muted: #aa3731;
9+
--dxc-light-a-at-color: #7a3e9d;
10+
--dxc-light-a-c-color: #aa3731;
11+
--dxc-light-a-cb-color: #7a3e9d;
12+
--dxc-light-a-cd-color: #aa3731;
13+
--dxc-light-a-ch-color: #448c27;
14+
--dxc-light-a-cn-color: #000000;
15+
--dxc-light-a-co-color: #7a3e9d;
16+
--dxc-light-a-cs-color: #448c27;
17+
--dxc-light-a-dr-color: #000000;
18+
--dxc-light-a-em-font-style: italic;
19+
--dxc-light-a-ex-color: #000000;
20+
--dxc-light-a-f-color: #325cc0;
21+
--dxc-light-a-fb-color: #325cc0;
22+
--dxc-light-a-fc-color: #325cc0;
23+
--dxc-light-a-fd-color: #325cc0;
24+
--dxc-light-a-fm-color: #325cc0;
25+
--dxc-light-a-in-color: #000000;
26+
--dxc-light-a-k-color: #000000;
27+
--dxc-light-a-kc-color: #000000;
28+
--dxc-light-a-kd-color: #000000;
29+
--dxc-light-a-ke-color: #000000;
30+
--dxc-light-a-kf-color: #000000;
31+
--dxc-light-a-ki-color: #000000;
32+
--dxc-light-a-km-color: #000000;
33+
--dxc-light-a-ko-color: #000000;
34+
--dxc-light-a-kp-color: #000000;
35+
--dxc-light-a-kr-color: #000000;
36+
--dxc-light-a-kt-color: #000000;
37+
--dxc-light-a-ky-color: #000000;
38+
--dxc-light-a-l-color: #325cc0;
39+
--dxc-light-a-m-color: #325cc0;
40+
--dxc-light-a-n-color: #7a3e9d;
41+
--dxc-light-a-o-color: #777777;
42+
--dxc-light-a-p-color: #777777;
43+
--dxc-light-a-pb-color: #777777;
44+
--dxc-light-a-pd-color: #777777;
45+
--dxc-light-a-pp-color: #000000;
46+
--dxc-light-a-pr-color: #000000;
47+
--dxc-light-a-ps-color: #777777;
48+
--dxc-light-a-rp-color: #000000;
49+
--dxc-light-a-rx-color: #448c27;
50+
--dxc-light-a-s-color: #448c27;
51+
--dxc-light-a-sc-color: #000000;
52+
--dxc-light-a-se-color: #777777;
53+
--dxc-light-a-sp-color: #000000;
54+
--dxc-light-a-ss-color: #777777;
55+
--dxc-light-a-st-font-weight: bold;
56+
--dxc-light-a-t-color: #325cc0;
57+
--dxc-light-a-tb-color: #325cc0;
58+
--dxc-light-a-td-color: #325cc0;
59+
--dxc-light-a-te-color: #325cc0;
60+
--dxc-light-a-tf-color: #325cc0;
61+
--dxc-light-a-tg-color: #325cc0;
62+
--dxc-light-a-tl-color: #000000;
63+
--dxc-light-a-tq-color: #325cc0;
64+
--dxc-light-a-tr-color: #325cc0;
65+
--dxc-light-a-tt-color: #325cc0;
66+
--dxc-light-a-tt-font-weight: bold;
67+
--dxc-light-a-tu-color: #325cc0;
68+
--dxc-light-a-tu-text-decoration: underline;
69+
--dxc-light-a-tx-text-decoration: line-through;
70+
--dxc-light-a-v-color: #000000;
71+
--dxc-light-a-vb-color: #7a3e9d;
72+
--dxc-light-a-vm-color: #000000;
73+
--dxc-light-a-vp-color: #000000;
974
}
10-
.dxc-alabaster .a-at { color: #7a3e9d; }
11-
.dxc-alabaster .a-co { color: #7a3e9d; }
12-
.dxc-alabaster .a-cb { color: #7a3e9d; }
13-
.dxc-alabaster .a-fb { color: #325cc0; }
14-
.dxc-alabaster .a-f { color: #325cc0; }
15-
.dxc-alabaster .a-fm { color: #325cc0; }
16-
.dxc-alabaster .a-k { color: #000000; }
17-
.dxc-alabaster .a-kc { color: #000000; }
18-
.dxc-alabaster .a-ko { color: #000000; }
19-
.dxc-alabaster .a-kd { color: #000000; }
20-
.dxc-alabaster .a-ke { color: #000000; }
21-
.dxc-alabaster .a-kf { color: #000000; }
22-
.dxc-alabaster .a-ki { color: #000000; }
23-
.dxc-alabaster .a-kp { color: #000000; }
24-
.dxc-alabaster .a-kr { color: #000000; }
25-
.dxc-alabaster .a-kt { color: #000000; }
26-
.dxc-alabaster .a-ky { color: #000000; }
27-
.dxc-alabaster .a-o { color: #777777; }
28-
.dxc-alabaster .a-pr { color: #000000; }
29-
.dxc-alabaster .a-p { color: #777777; }
30-
.dxc-alabaster .a-pb { color: #777777; }
31-
.dxc-alabaster .a-pd { color: #777777; }
32-
.dxc-alabaster .a-ps { color: #777777; }
33-
.dxc-alabaster .a-s { color: #448c27; }
34-
.dxc-alabaster .a-ss { color: #777777; }
35-
.dxc-alabaster .a-tg { color: #325cc0; }
36-
.dxc-alabaster .a-td { color: #325cc0; }
37-
.dxc-alabaster .a-te { color: #325cc0; }
38-
.dxc-alabaster .a-t { color: #325cc0; }
39-
.dxc-alabaster .a-tb { color: #325cc0; }
40-
.dxc-alabaster .a-tq { color: #325cc0; }
41-
.dxc-alabaster .a-v { color: #000000; }
42-
.dxc-alabaster .a-vb { color: #7a3e9d; }
43-
.dxc-alabaster .a-vp { color: #000000; }
44-
.dxc-alabaster .a-c { color: #aa3731; }
45-
.dxc-alabaster .a-cd { color: #aa3731; }
46-
.dxc-alabaster .a-m { color: #325cc0; }
47-
.dxc-alabaster .a-l { color: #325cc0; }
48-
.dxc-alabaster .a-n { color: #7a3e9d; }
49-
.dxc-alabaster .a-tl { color: #000000; }
50-
.dxc-alabaster .a-em { font-style: italic; }
51-
.dxc-alabaster .a-st { font-weight: bold; }
52-
.dxc-alabaster .a-tu { color: #325cc0; text-decoration: underline; }
53-
.dxc-alabaster .a-tr { color: #325cc0; }
54-
.dxc-alabaster .a-se { color: #777777; }
55-
.dxc-alabaster .a-tt { color: #325cc0; font-weight: bold; }
56-
.dxc-alabaster .a-tx { text-decoration: line-through; }
57-
.dxc-alabaster .a-sp { color: #000000; }
58-
.dxc-alabaster .a-in { color: #000000; }
59-
.dxc-alabaster .a-sc { color: #000000; }
60-
.dxc-alabaster .a-rp { color: #000000; }
61-
.dxc-alabaster .a-cn { color: #000000; }
62-
.dxc-alabaster .a-ex { color: #000000; }
63-
.dxc-alabaster .a-pp { color: #000000; }
64-
.dxc-alabaster .a-ch { color: #448c27; }
65-
.dxc-alabaster .a-cs { color: #448c27; }
66-
.dxc-alabaster .a-vm { color: #000000; }
67-
.dxc-alabaster .a-fd { color: #325cc0; }
68-
.dxc-alabaster .a-tf { color: #325cc0; }
69-
.dxc-alabaster .a-fc { color: #325cc0; }
70-
.dxc-alabaster .a-km { color: #000000; }
71-
.dxc-alabaster .a-dr { color: #000000; }
72-
.dxc-alabaster .a-rx { color: #448c27; }

0 commit comments

Comments
 (0)