Skip to content

Commit 082966c

Browse files
committed
docs: a few minor updates to the docs
1 parent 1b49ad0 commit 082966c

2 files changed

Lines changed: 31 additions & 1 deletion

File tree

docs/docs/customization.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,36 @@ sidebar_position: 6
44

55
# Customization
66

7+
## Hard-coding through props
8+
79
You can pass a couple of options directly to the `RadixOS` component to customize the Radix theme:
810

911
- `accentColor`: The preferred accent color of the Radix theme
1012
- `radius`: The preferred radius of the Radix theme
13+
- `panelBackground`: `"solid" | "translucent"` Determines if translucency is activated
14+
- `theme`: (`light` | `dark`) Determines if dark-mode is enabled
15+
16+
## Programatically setting settings
17+
18+
You can utilize the hook `useSettingsStore` to change the customization settings from within an application running in the system.
19+
20+
```ts
21+
type SettingsStore = {
22+
theme: "light" | "dark";
23+
toggleTheme: () => void;
24+
panelBackground: "solid" | "translucent";
25+
togglePanelBackground: () => void;
26+
bg: string;
27+
setBg: (bg: string) => void;
28+
radius: Radius;
29+
setRadius: (value: Radius) => void;
30+
accentColor: AccentColor;
31+
setAccentColor: (value: AccentColor) => void;
32+
overrides: (keyof SettingsStore)[];
33+
setOverrides: (overrides: (keyof SettingsStore)[]) => void;
34+
}
35+
```
1136
12-
Beyond that, the settings app (and hook) allows you to set if _translucency_ is enabled, the preferred desktop background and dark mode.
37+
:::warning
38+
Passing props to `RadixOS` overrides the dynamic values set by `useSettingsStore`, unless `overrides` are manually set to an empty array.
39+
:::

docs/docs/index.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@ sidebar_position: 1
66

77
Radix OS is an operating system simulated on the web, with a modular file system that can be swapped out with any async source, able to run your own custom built applications. Designed to be flexible and easily extendable so it can fit your needs.
88

9+
910
[![Preview](/sh.jpg)](https://imp-dance.github.io/radix-os/)
1011

12+
- [Open live demo](https://imp-dance.github.io/radix-os/)
13+
1114
:::tip So what it, really?
1215

1316
A React component, coupled with a few helper functions and hooks - published to NPM. Together, this package lets you create an OS-like environment, and inject custom applications of your own.

0 commit comments

Comments
 (0)