1.7 KiB
1.7 KiB
Themes
import ThemeDemo from '../../src/components/ThemeDemo.tsx';
LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color.
Theme
Dark/Light theme can be set in:
-
UI, either:
- Dark/Light theme switch in toolbar
- Settings menu → Dark theme switch
-
Query params:
?theme=darkor?theme=light. e.g. https://livecodes.io/?theme=light -
Configuration object:
theme#theme) property.
LiveCodes dark theme
LiveCodes light theme
Theme Color
Similarly, a theme color can be set in:
-
UI: Settings menu → Color
-
Query params:
?themeColor={color}. e.g. https://livecodes.io/?themeColor=lightblue -
Configuration object:
themeColor#themecolor) property.
Change theme color from UI
Custom theme color
Demo
:::info Note
Please note that editor themes can be set in the editor settings or using the editorTheme#editortheme) configuration option.



