How to target a HTML element to suit the Nextcloud theme?

Hi :slight_smile:

I would like to apply a color to a HTML element.

For example, I have the user-not-member class that is a div.

<div v-for="user in allSelectedUsers"
					:class="$store.getters.isMember($, user) || !$ ? '' : 'user-not-member'">
						<div class="icon-member" :class="$store.getters.isMember($, user) ? 'is-member' : ''" />
						<NcAvatar :display-name="" :user="user.uid" />
						<div class="user-name">
							<span> {{ }} </span>
					<div class="user-entry-actions">
						<div v-if="!$store.getters.isGEorUGroup($, $">
							<input type="checkbox"
								:checked="user.role === 'admin'"
							<label>{{ t('workspace', 'S.A.') }}</label>
							<NcActionButton icon="icon-delete"
								{{ t('workspace', 'remove users from selection') }}

With this div, I applied a color in css :

.user-not-member {
	background-color: #ffebee

It works. However, when the user uses the dark theme the rendering is (very) bad.

So, I would like to change the color to suit the theme.

Is it possible ? How do I do to that ?

Hey @z4k

You can use css variables for this. See SCSS — Nextcloud latest Developer Manual latest documentation

I think a better link is this one

Maybe we should update the docs?


@szaimen I don’t know how to use the variables css in my case :thinking:

I found one solution :

@media (prefers-color-scheme: dark) {
  .user-not-member {
    background-color: green;

I don’t know if it’s a good solution ?

simply color: var(--color-primary-element); for example…

Hi @szaimen :slight_smile:

Sorry to respond you later. I worked on another subject :confused:

If I get you, I have to use the variables css to apply in my html element ?

If it’s that. I don’t know if this color is right for me :

css code

.user-not-member {
	background-color: var(--color-error-hover);