[FEATURE] Use user-selected background color. #265

New issue

Open

opened 2023-06-28 14:13:04 +02:00 by RobertZenz · 3 comments

RobertZenz commented

2023-06-28 14:13:04 +02:00

Description

A user can select a custom color for the NextCloud menu under "Appearance and accessibility -> Background".

It would be nice if we would have the possibility to allow Custom Menu to use that color instead of a fixed one set by the admin.

Benefits

The Custom Menu would match the user selected color of the NC instance/account.

More informations

If I'm seeing this right, the NC menu uses the following:

background-color: var(--color-background-plain, var(--color-main-background));

As a test, I've been setting this on the Custom Menu manually and it does yield acceptable results.

### Description A user can select a custom color for the NextCloud menu under "Appearance and accessibility -> Background". It would be nice if we would have the possibility to allow Custom Menu to use that color instead of a fixed one set by the admin. ### Benefits The Custom Menu would match the user selected color of the NC instance/account. ### More informations If I'm seeing this right, the NC menu uses the following: ```css background-color: var(--color-background-plain, var(--color-main-background)); ``` As a test, I've been setting this on the Custom Menu manually and it does yield acceptable results.

RobertZenz added the

enhancement

label 2023-06-28 14:13:04 +02:00

algatern commented

2023-06-28 21:46:09 +02:00

I came here to suggest the same thing.

I have been using this in the Custom CSS Nextcloud extension and it seems to work well.

#side-menu  {
background: var(--color-primary);
}

button.side-menu-opener:active {
background-color: rgba(0,0,0,0) !important;
}


/* add subtle highlight to hovered menu items */
.side-menu-app a:hover, .side-menu-app.active, .side-menu-app a:focus {
background: rgba(0,0,0,0.1) !important;
}

I came here to suggest the same thing. I have been using this in the Custom CSS Nextcloud extension and it seems to work well. ``` #side-menu { background: var(--color-primary); } button.side-menu-opener:active { background-color: rgba(0,0,0,0) !important; } /* add subtle highlight to hovered menu items */ .side-menu-app a:hover, .side-menu-app.active, .side-menu-app a:focus { background: rgba(0,0,0,0.1) !important; } ```

RobertZenz commented

2023-06-28 21:49:36 +02:00

Author

Even though I tried out how it would look like when applying the NC colors, using the Custom CSS app (which I already heavily employ) to do this didn't cross my mind. Thank you, that works great.