yindo/posthog.com
1
0
Fork 0
mirror of https://github.com/BillyOutlast/posthog.com.git synced 2026-02-04 03:11:21 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
camerondeleone-patch-6
posthog.com/theming.md
Cory Watilo 15c925b43d version bump (#12254) 
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>
2025-09-10 16:33:30 +00:00

1.7 KiB
Raw Permalink Blame History

Theming

There are a few ways PostHog.com is customized:

  1. Color mode: auto, light (default), dark
  2. Theme: Button styles, window colors, desktop icons, desktop icon underlining etc
  3. Desktop background: image, background color, desktop icon label backgrounds
Attribute Location Contents Example(s) / Usage Notes
data-scheme Any element Color theming data-scheme="primary" # foreground content
data-scheme="secondary" # accent content/sidebars
data-scheme="tertiary" # window header bar

<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}
- 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
- 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.