Skip to content

Themes v2

HJ requested to merge feature/theming2 into develop

WARNING After merging in v2 themes, reverting back to v1 will cause PleromaFE to be stuck on white screen if user had non-empty non-v1 configuration. Only workaround is to clear IndexedDB in browser, but that will remove ALL customizations, including user highlighting. !380 (closed) fixes that for develop branch.

Screenshot of the customization UI

Key points:

  • In-depth customization of many aspects of theme.
  • Keeping the simplicity of current pleroma-fe themes, as well as maintaining backwards compatibility with it.
  • Bringing in some convenience features and fixes, like being able to have dark foreground color in a light theme and contrast text in notifications counter.
  • Helpful contrast indicator to help making themes accessible.


  • keep checkboxes do not actually affect theme export despite what help text says
  • "post text" in preview, along with monospace, fix input field using wrong text.
  • bottom bar ('load more') - check link color.
  • Reset button doesn't reset everything when v1 theme is in the localstorage.
  • Some sort of bug related to user profile about input field not appearing after transition
  • user profiles are FUCKED

Stuff done/need fixing

  • fix tab-switcher because it causes me a great mental distress
  • Per-component (?) color customization
  • Opacity controls where it matters
  • Panda theme support (dark panel headers on light themes)
  • Auto-fixes for badly colored notifications counter
  • Contrast indicators
    • Basic function
    • Hints explaining if contrast is good or bad, localization
  • Better notifications unseen indicator
    • Basic function
    • Should be on a separate layer, on top of status, not below
  • Drop-shadow adjustment support
    • Fix fallback not working when switching components
    • Fix tab-switcher to properly put border below inactive tabs
    • Adjustments control
    • Better styles/unification with other controls
    • Replace buttons/inputs/navbar shadows with generated ones
      • Somehow make it possible to use inset shadows on panels (header overlaps the .panel so inset shadows gets hidden)
      • Remove borders on buttons?
    • Fix button fallback (non-css-var) not having borders
  • Improved preview window showcasing more elements
  • v2 admin presets/some v2 themes
  • Localization strings
  • Roundness UI
    • Fix layout
    • Consistency with "override" checkbox like in advanced colors
  • rgbo section needs minor layout fix or something
  • Reset buttons
    • One that resets ALL settings to currently active theme/colors
    • One for each category that unchecks all "override" checkboxes
  • Checkboxes for partially loading theme/preset (i.e. make it only import colors but not affect roundness/shadows)
  • Fonts.
    • sans-serif/serif/monospace/custom selector for inputs, posts, and everything else.
    • Future-proof it so that it would be possible add more styles in-between. (server-provided fonts?)
    • "Custom" enables an input field to enter font-family name.
  • some help text for shadows
  • fix UI really not liking illegal/null inputs
  • improve bundling v2 themes - allow using external files somehow

QA checklist:

  • transition from v1 localstorage doesn't cause issues
    • roundness settings are lost (name changes)
  • loading v1 user preset works
  • loading v2 user preset works
  • loading v1 instance preset works
  • loading v2 instance preset works
    • there's one issue that v1 themes and v2 themes that lack some definitions do not reset stuff like shadows. see note 1
  • clean-loading (no localstorage) doesn't cause issues
  • check IE11/Edge?
    • Top bar is entirely broken but that's not related to this MR, it's been broken for a while, apparently.
    • Most checkboxes in customization do not work at all. No errors in console, no warning. They just don't work. I blame Vue and/or Edge.
    • Oh and IE11 still doesn't work.
  • no major issues, no major differences between v1 and v2 generated colors


  1. Picking something like Redmond XX theme and then switching to pleroma-dark would keep the win9x reliefs. This might be of annoyance, and checkboxes to keep/reset some settings might help.
Edited by HJ

Merge request reports