I'm trying to add a background color (named backgroundColor5) to Joplin's light theme. It's for the notes-list bar I'm working on. I've added the value inside light.ts and updated the Theme type inside types.ts to include background5: string;. However I can't access the value from inside the mobile app, but I can access background3(which was already in the light theme). While compiling the typescript files, I got this error:
services/style/themeToCss.test.ts(4,7): error TS2741: Property 'backgroundColor5' is missing in type '{ appearance: ThemeAppearance.Light; backgroundColor: string; backgroundColorTransparent: string; oddBackgroundColor: string; color: string; colorError: string; colorCorrect: string; ... 28 more ...; codeTheme
I don't understand why this happening because I've added the updated the Theme type.
Any idea what could be wrong?
Could you try to use one of the existing colours? I think with 4 background colours there's probably one that could be used.
Or post the design you have in mind so that we can see which colour you're missing, and maybe we can suggest something.
I need the background color for the side bar, it's '#fafafa'. The closest color which is already in the light theme is backgroundColor3: '#f4f5f6', which is a lot darker than what I need. Subtle details like this make a big difference in the overall design quality.
Setting opacity to something like 0.95 might also work. This might make the text fainter than desired, however.
I think the way Joplin's routing works, another screen might be rendered under the Notes screen.
1 Like
That colour you're pointing to is just the note list colour? So it should be available, although I don't know which backgroundColor it is exactly
Oh, okay. I'll check the light theme thoroughly.
I checked through the light theme thoroughly and the closest color value is '#f7f7f7' (table background color), I could use this, but the UI would look significantly better with '#fafafa'.
I mean what you've shown is the note list from the desktop app, so it should use the colour from that list. Not sure why you're talking about table colours now.
If I check in the web inspector it appears to be #F4F5F6, which is backgroundColor3. Isn't it what you need? You also have the matching backgroundColorHover3
tableBackgroundColor is the name of a similar color value which is already in the light theme.
#f4f5f6 isn't what I need. The color from in the Figma design is actually '#fafafa'.
But I've found a color ('#f7f7f7') that works, thank you.
Ok but the table colour is well... for the tables. In order to make the style more consistent between apps it would make sense to use the same colours for the same elements. In this particular case the note list on desktop uses backgroundColor3 so it seems reasonable to use this.
If you feel the design is off, then the desktop app design is off too, and that's something that perhaps could be solved but some other time.
