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

💻 Development
1

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"
					:key="user.name"
					class="user-entry"
					:class="$store.getters.isMember($route.params.space, user) || !$route.params.group ? '' : 'user-not-member'">
					<div>
						<div class="icon-member" :class="$store.getters.isMember($route.params.space, user) ? 'is-member' : ''" />
						<NcAvatar :display-name="user.name" :user="user.uid" />
						<div class="user-name">
							<span> {{ user.name }} </span>
						</div>
					</div>
					<div class="user-entry-actions">
						<div v-if="!$store.getters.isGEorUGroup($route.params.space, $route.params.group)">
							<input type="checkbox"
								class="role-toggle"
								:checked="user.role === 'admin'"
								@change="toggleUserRole(user)">
							<label>{{ t('workspace', 'S.A.') }}</label>
						</div>
						<NcActions>
							<NcActionButton icon="icon-delete"
								@click="removeUserFromBatch(user)">
								{{ t('workspace', 'remove users from selection') }}
							</NcActionButton>
						</NcActions>
					</div>
				</div>

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 ?

2

Hey @z4k

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

3

I think a better link is this one https://github.com/nextcloud/server/blob/master/apps/theming/css/default.css

4

Maybe we should update the docs?

3 Likes
5

@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 ?

6

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

7

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 :

image
image681×585 18.6 KB

css code

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