Theme System

The Pawkey’s theme system is quite extensible you can change a lot of the app look with it.

You can change:

• App color palette
• Entire UI border-radius
• Blur intensity

We support both dark and light themes.

Examples

Dark

{
  "name": "Pawkey Dark",
  "description": "Default dark theme for Pawkey",
  "author": "Ryowuff",
  "theme": {
    "bg": "#0C0C0C",
    "fg": "#EFDFF6",
    "darker": "#B7B2BE",
    "fgOnAccent": "#0C0C0C",
    "panel": "#131212",
    "panelLighter": "$panel*1.2",
    "header": "$panel/0.3",
    "popup": "#141414",
    "border": "#212121",
    "accent": "#C6A9FF",
    "link": "#9566FF",
    "mention": "#9566FF",
    "mentionMe": "#6A29FF",
    "reboop": "#8755F2",
    "red": "#FF6E6E",
    "green": "#95FF82",
    "yellow": "#FFC382",
    "blue": "#85A7FF",
    "button": "#1A1919",
    "switch": "$panel*1.5",
    "slider": "$panel*1.5",
    "buttonHover": "#2A2929",
    "buttonGhost": "$button/0.1",
    "accentGhost": "$accent/0.2",
    "accentGhost2": "$accent/0.4",
    "redGhost": "$red/0.2",
    "redGhost2": "$red/0.4",
    "greenGhost": "$green/0.2",
    "yellowGhost": "$yellow/0.2",
    "blueGhost": "$blue/0.2",
    "navActive": "$button/0.3",
    "panelGhost": "$panel/0.9",
    "reboopGhost": "$reboop/0.2"
  },
  "borderRadius": {
    "vm": "5px",
    "xs": "7px",
    "sm": "9px",
    "normal": "10px",
    "md": "12px",
    "lg": "15px",
    "xl": "18px",
    "ellipse": "15px",
    "full": "25px"
  },
  "blur": {
    "normal": "10px",
    "medium": "15px",
    "strong": "20px"
  }
}

Light

{
  "name": "Pawkey Light",
  "description": "Default light theme for Pawkey",
  "author": "Ryowuff",
  "theme": {
    "bg": "#FFFFFF",
    "fg": "#1A1A1A",
    "darker": "#9A9A9A",
    "fgOnAccent": "#000000",
    "panel": "#F5F5F5",
    "panelLighter": "$panel*1.2",
    "header": "$panel/0.3",
    "border": "#E0E0E0",
    "popup": "#FFFFFF",
    "accent": "#8B5CF6",
    "link": "#9566FF",
    "mention": "#9566FF",
    "mentionMe": "#6A29FF",
    "reboop": "#8755F2",
    "red": "#DC2626",
    "green": "#16A34A",
    "yellow": "#CA8A04",
    "blue": "#2563EB",
    "button": "#F0F0F0",
    "switch": "$panel*1.5",
    "buttonHover": "#E5E5E5",
    "slider": "$panel*1.5",
    "buttonGhost": "$button/0.1",
    "accentGhost": "$accent/0.2",
    "accentGhost2": "$accent/0.4",
    "redGhost": "$red/0.2",
    "redGhost2": "$red/0.4",
    "greenGhost": "$green/0.2",
    "yellowGhost": "$yellow/0.2",
    "blueGhost": "$blue/0.2",
    "navActive": "$button/0.3",
    "panelGhost": "$panel/0.9"
  },
  "borderRadius": {
    "vm": "5px",
    "xs": "7px",
    "sm": "9px",
    "normal": "10px",
    "md": "12px",
    "lg": "15px",
    "xl": "18px",
    "ellipse": "15px",
    "full": "25px"
  },
  "blur": {
    "normal": "10px",
    "medium": "15px",
    "strong": "20px"
  }
}

The same themes can be found on the repository

Variables

We support variables $panel, you can use it like this:

"theme": {
    "button": "$panel"
}

It will inherit the same color value as panel.

You can also lighten / darken colors in a simple way

$panel*1.3 - lighten

$panel/0.4 - darken

The usage in the theme is:

"theme": {
    "button": "$panel/0.8",
    "buttonHover": "$panel*1.3"
}

The way darkening works is by making the color more transparent

Theme testing

You can test the theme you made on an Pawkey instance itself in your user settings.

Its in Settings > Themes, there you can add your own custom theme json and test your theme / edit.

After you adjust the theme to your liking you can just use it, Themes also sync between clients through the Registry.

Setting the theme instance wide

After you created your theme you might want to set it instance-wide, You can do that in the Admin Dashboard.

You can set in Admin > Branding > Themes, just paste the json and save and reload the page. The theme should apply instantly.