[Feature Request] Add Customization to the UI #484

Open
opened 8 months ago by danner26 · 7 comments

It would be nice to allow some customization to the UI. Here are a few examples of additions I have thought of so far:

  1. Night mode and/or Dark mode (the more difficult of the bunch)
  2. Custom Favicon
  3. Custom header (to replace Vikunja in the pages header and for PWA saving)

These are small but allow for more customization for the application. For someone like myself that uses this application for all of the people in my home and some more of my family, it would be nice to change the name to something we all prefer (we usually name our apps in the format of PREFIX-USAGE i.e. Wiki.JS is named TCH-Wiki) This allows for someone that is older to remember what the application is used for (in this case, wiki).

I realize I could replace the favicon using docker in my compose script but a built-in solution I think would be optimal.

It would be nice to allow some customization to the UI. Here are a few examples of additions I have thought of so far: 1. Night mode and/or Dark mode (the more difficult of the bunch) 2. Custom Favicon 3. Custom header (to replace Vikunja in the pages header and for PWA saving) These are small but allow for more customization for the application. For someone like myself that uses this application for all of the people in my home and some more of my family, it would be nice to change the name to something we all prefer (we usually name our apps in the format of PREFIX-USAGE i.e. Wiki.JS is named TCH-Wiki) This allows for someone that is older to remember what the application is used for (in this case, wiki). I realize I could replace the favicon using docker in my compose script but a built-in solution I think would be optimal.
Owner

There has been some discussion on the forum about this: https://community.vikunja.io/t/vikunja-dark-mode/162

TL;DR: We're currently waiting on bulma to introduce theming capabilities with css variables in the framework so we don't have to reinvent the wheel.

As for the other customizations: I don't really see these kinds of things coming to the core directly. As these are very specific, you'd be probably better of by just forking the frontend and doing the customizations. Maybe you could do something with the docker startup script and some sed.
You should be able to just mount the favicon into the container, the header would need some kind of script or building the frontend.

There has been some discussion on the forum about this: https://community.vikunja.io/t/vikunja-dark-mode/162 TL;DR: We're currently waiting on bulma to introduce theming capabilities with css variables in the framework so we don't have to reinvent the wheel. As for the other customizations: I don't really see these kinds of things coming to the core directly. As these are very specific, you'd be probably better of by just forking the frontend and doing the customizations. Maybe you could do something with the docker startup script and some `sed`. You should be able to just mount the favicon into the container, the header would need some kind of script or building the frontend.
Poster

TL;DR: We're currently waiting on bulma to introduce theming capabilities with css variables in the framework so we don't have to reinvent the wheel.

Makes sense, gotcha!

I don't really see these kinds of things coming to the core directly.

When I have time, if I make PR's for these 2 things, would you accept them or is there no room for this? If the apps goal is to be customizable to the user then I think these two, or at least the favicon one are important at the end of the day - like many other apps of this nature include.

> TL;DR: We're currently waiting on bulma to introduce theming capabilities with css variables in the framework so we don't have to reinvent the wheel. Makes sense, gotcha! > I don't really see these kinds of things coming to the core directly. When I have time, if I make PR's for these 2 things, would you accept them or is there no room for this? If the apps goal is to be customizable to the user then I think these two, or at least the favicon one are important at the end of the day - like many other apps of this nature include.
Owner

would you accept them or is there no room for this?

As long as it would be optional I would merge it. I couldn't guarantee it would still work in the future (even if unlikely, it could break accedentially).

> would you accept them or is there no room for this? As long as it would be optional I would merge it. I couldn't guarantee it would still work in the future (even if unlikely, it could break accedentially).
konrad added the
kind/feature
label 8 months ago

I know theming hasn't been talked about since March (or 3 Months, going from this post) but I just dug in a little and found this;

https://bulma.io/documentation/customize/variables/

Dunno if this is fresh news, but haven't heard anyone talking about it!

I know theming hasn't been talked about since March (or 3 Months, going from this post) but I just dug in a little and found this; https://bulma.io/documentation/customize/variables/ Dunno if this is fresh news, but haven't heard anyone talking about it!

@Gensokian this feature request requires native css variables, but this link describes sass variables which unfortunately can't be modified outside the source code

@Gensokian this feature request requires native css variables, but this link describes sass variables which unfortunately can't be modified outside the source code
Owner

I know theming hasn't been talked about since March (or 3 Months, going from this post) but I just dug in a little and found this;

@Gensokian as @andreymal already pointed out, those are sass variables which are evaluated at compile time. We're already using them to customize the colors.

It might be possible to set these sass variables to native css variables but I'm not sure if that would compile. It might lead to issues if these sass variables are used with other functions.

> I know theming hasn't been talked about since March (or 3 Months, going from this post) but I just dug in a little and found this; @Gensokian as @andreymal already pointed out, those are sass variables which are evaluated at compile time. We're already using them to customize the colors. It might be possible to set these sass variables to native css variables but I'm not sure if that would compile. It might lead to issues if these sass variables are used with other functions.
Collaborator
  1. Dark mode is now supported in the dev version
1) Dark mode is now supported in the dev version
Sign in to join this conversation.
No Milestone
No Assignees
5 Participants
Notifications
Due Date

No due date set.

Dependencies

This issue currently doesn't have any dependencies.

Loading…
There is no content yet.