mirror of
https://github.com/BillyOutlast/posthog.com.git
synced 2026-02-05 11:51:21 +01:00
15c925b43d
Co-authored-by: Cory Watilo <corywatilo@gmail.com> Co-authored-by: Eli Kinsey <eli@ekinsey.dev> Co-authored-by: Lucas Faria <12522524+lucasheriques@users.noreply.github.com> Co-authored-by: Ben White <ben@posthog.com> Co-authored-by: Juraj Majerik <juro.majerik@gmail.com> Co-authored-by: Rafael Audibert <32079912+rafaeelaudibert@users.noreply.github.com>
26 lines
1.7 KiB
Markdown
26 lines
1.7 KiB
Markdown
# Theming
|
|
|
|
There are a few ways PostHog.com is customized:
|
|
|
|
1. Color mode: auto, light (default), dark
|
|
1. Theme: Button styles, window colors, desktop icons, desktop icon underlining etc
|
|
1. Desktop background: image, background color, desktop icon label backgrounds
|
|
|
|
<!-- prettier-ignore -->
|
|
| Attribute | Location | Contents | Example(s) / Usage | Notes |
|
|
|---|---|---|---|---|
|
|
| `data-scheme` | Any element | Color theming | `data-scheme="primary" # foreground content`<br>`data-scheme="secondary" # accent content/sidebars`<br>`data-scheme="tertiary" # window header bar`<br><br>`<div data-scheme="secondary" className="text-primary text-primary">` | - Reads the `body` class of `light` or `dark` and switches automatically, ie: no need to use `dark:text-{value}`<br>- Can be nested with a different value |
|
|
| `data-skin` | Set on `body` tag | Overall aesthetic, mostly applies to buttons | `data-skin="modern" # default<br>data-skin="classic" # gives pre Mac OS X vibes, visible button outlines, thicker bottom border<br>` | |
|
|
| `data-wallpaper` | Set on `body` tag, `data-app="Desktop"` in `Desktop/index.tsx` | - Desktop background color<br>- Desktop background image | `data-wallpaper="keyboard-garden"<br>data-wallpaper="hogzilla"<br>` | - Most backgrounds support light and dark mode |
|
|
|
|
## Not currently supported
|
|
|
|
- Custom desktop backgrounds
|
|
- Changing desktop background and theme styles together
|
|
|
|
## How it works
|
|
|
|
Most customization is done with Tailwind.
|
|
|
|
For example, background images are set in `Desktop/index.tsx` and the `data-wallpaper` attribute is set on the `body` tag. This allows us to make customizations on the desktop and in various places like the taskbar on a per-background basis if needed.
|