[Feature Request] Add Customization to the UI #1780

New Issue

danner26 · 2021-04-15T23:37:39Z

danner26 commented

2021-04-15 23:37:39 +00:00

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

Night mode and/or Dark mode (the more difficult of the bunch)
Custom Favicon
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.

konrad commented

2021-04-16 12:26:16 +00:00

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.

👍 1

danner26 commented

2021-04-16 13:06:13 +00:00

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.

konrad commented

2021-04-16 14:26:47 +00:00

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 2021-04-25 15:35:37 +00:00

Gensokian commented

2021-07-09 14:25:37 +00:00

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!

andreymal commented

2021-07-09 15:06:04 +00:00

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

konrad commented

2021-07-09 15:33:32 +00:00

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.

adrinux referenced this issue from vikunja/frontend

2021-09-16 09:57:55 +00:00

Add a dark mode based on bulma-css-variables #1826

dpschen commented

2021-11-26 13:28:50 +00:00