v3 default and custom themes styles not shown in Appearance #3541

Closed
opened 2026-08-08 17:08:37 +00:00 by blue · 6 comments

Browser and OS

Brave v 1.93.129 / Debian 13

Instance URL

https://cobaltkiss.blue

Backend version information

Pleroma 2.10.2

Frontend version information

Pleroma-Fe 2.11.2

Browser extensions

No response

Known instance/user customizations

No response

Bug description

Found the default styles "Redmond DX" and "Breezy DX" not working while trying to make my custom v3 theme taking effect.
Either default nor custom styles can be used.

From the web console I got this error 3 times(2 from the default styles and one from thecustom style ):

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'directives')
at appearance_tab.js:111:24

Details in the appearance_tab.js:

updateIndex('style').then((styles) => {
      styles.forEach(([key, stylePromise]) =>
        stylePromise.then((data) => {
          const meta = data.find((x) => x.component === '@meta')
          this.availableThemesV3.push({
            key,
            data,
            name: meta.directives.name,
            version: 'v3',
          })
        }),
      )
    })

Reproduction steps

No response

Bug seriousness

  • How annoying it is: Since problems occur using all the v2 themes on the phone I would like to make a custom v3 theme as instance default and it's impossible now.
  • How often does it happen:
  • How many people does it affect:
  • Is there a workaround for it:
### Browser and OS Brave v 1.93.129 / Debian 13 ### Instance URL https://cobaltkiss.blue ### Backend version information Pleroma 2.10.2 ### Frontend version information Pleroma-Fe 2.11.2 ### Browser extensions _No response_ ### Known instance/user customizations _No response_ ### Bug description Found the default styles "Redmond DX" and "Breezy DX" not working while trying to make my custom v3 theme taking effect. Either default nor custom styles can be used. From the web console I got this error 3 times(2 from the default styles and one from thecustom style ): > Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'directives') > at appearance_tab.js:111:24 Details in the appearance_tab.js: ``` updateIndex('style').then((styles) => { styles.forEach(([key, stylePromise]) => stylePromise.then((data) => { const meta = data.find((x) => x.component === '@meta') this.availableThemesV3.push({ key, data, name: meta.directives.name, version: 'v3', }) }), ) }) ``` ### Reproduction steps _No response_ ### Bug seriousness * How annoying it is: Since problems occur using all the v2 themes on the phone I would like to make a custom v3 theme as instance default and it's impossible now. * How often does it happen: * How many people does it affect: * Is there a workaround for it:
Member

Can you send your custom style? It should contain @meta section like the builtins

Can you send your custom style? It should contain `@meta` section like the builtins
Author

@hj wrote in #3541 (comment):

Can you send your custom style? It should contain @meta section like the builtins

# /var/lib/pleroma/static/static/styles/index.custom.json

{
  "WalkingBy": "/static/styles/WalkingBy.iss"
}
# /var/lib/pleroma/static/static/styles/WalkingBy.iss

@meta {
  name: "WalkingBy";
  author: Blue;
  website: cobaltkiss.blue;
}

@palette.default {
  bg: #121a24;
  fg: #182230;
  text: #b9b9ba;
  link: #d8a070;
  accent: #d8a070;
  cRed: #FF0000;
  cBlue: #0095ff;
  cGreen: #0fa00f;
  cOrange: #ffa500;
}

Root {
  --badgeNotification: color | --cRed;
  --buttonDefaultHoverGlow: shadow | 0 0 1 2 --text / 0.4;
  --buttonDefaultFocusGlow: shadow | 0 0 1 2 --link / 0.5;
  --buttonDefaultShadow: shadow | 0 0 2 #000000;
  --buttonDefaultBevel: shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1);
  --buttonPressedBevel: shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1);
  --defaultInputBevel: shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15, 1 0 1 1 --text / 0.15, -1 0 1 1 --text / 0.15;
  --defaultInputHoverGlow: shadow | 0 0 4 --text / 0.5;
  --defaultInputFocusGlow: shadow | 0 0 4 4 --link / 0.5;
}

Button {
  background: #2E3052
}

Panel {
  background: #161731;
  opacity: 0.7
}

PanelHeader {
  background: #161731;
  opacity: 0.7
}

Post {
  background: #161731;
  opacity: 0.7
}
@hj wrote in https://git.pleroma.social/pleroma/pleroma-fe/issues/3541#issuecomment-117727: > Can you send your custom style? It should contain `@meta` section like the builtins ``` # /var/lib/pleroma/static/static/styles/index.custom.json { "WalkingBy": "/static/styles/WalkingBy.iss" } ``` ``` # /var/lib/pleroma/static/static/styles/WalkingBy.iss @meta { name: "WalkingBy"; author: Blue; website: cobaltkiss.blue; } @palette.default { bg: #121a24; fg: #182230; text: #b9b9ba; link: #d8a070; accent: #d8a070; cRed: #FF0000; cBlue: #0095ff; cGreen: #0fa00f; cOrange: #ffa500; } Root { --badgeNotification: color | --cRed; --buttonDefaultHoverGlow: shadow | 0 0 1 2 --text / 0.4; --buttonDefaultFocusGlow: shadow | 0 0 1 2 --link / 0.5; --buttonDefaultShadow: shadow | 0 0 2 #000000; --buttonDefaultBevel: shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1); --buttonPressedBevel: shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1); --defaultInputBevel: shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2), inset 0 0 2 #000000 / 0.15, 1 0 1 1 --text / 0.15, -1 0 1 1 --text / 0.15; --defaultInputHoverGlow: shadow | 0 0 4 --text / 0.5; --defaultInputFocusGlow: shadow | 0 0 4 4 --link / 0.5; } Button { background: #2E3052 } Panel { background: #161731; opacity: 0.7 } PanelHeader { background: #161731; opacity: 0.7 } Post { background: #161731; opacity: 0.7 } ```
Member

Does it work if you replace name: "WalkingBy"; with name: WalkingBy;?

Does it work if you replace ` name: "WalkingBy";` with ` name: WalkingBy;`?
Member

Ok there is a bug loading styles in general

Ok there is a bug loading styles in general
Author

@hj wrote in #3541 (comment):

Does it work if you replace name: "WalkingBy"; with name: WalkingBy;?

Nope

@hj wrote in https://git.pleroma.social/pleroma/pleroma-fe/issues/3541#issuecomment-117744: > Does it work if you replace ` name: "WalkingBy";` with ` name: WalkingBy;`? Nope
Member

fixed in #3546

will be included in 2.11.3

fixed in #3546 will be included in 2.11.3
hj closed this issue 2026-08-11 22:50:16 +00:00
Sign in to join this conversation.
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
pleroma/pleroma-fe#3541
No description provided.