Dropdowns have wrong mark color in browsers

[Darshan-upadhyay1110]

Describe the bug

List view in format cell has weird dark background color.

• It is reproducible in Chrome V- 118.
• after updating to 8.2.1 --nc-color-primary-element-light value is sometimes has the correct "light" value #e5f0f5 and sometimes it comes with a "dark" color: #141f25
• i suspect regression bug. this was OK in 8.0.5

To Reproduce
Steps to reproduce the behavior:

1. Open to any .ods file
2. Right Click on any cell
3. Select Format Cell
4. You can see dark color for selcted item in list.

Expected behavior
In every browser it should be same color value to set in variable --nc-color-primary-element-light

Current behavior
In chrome i am getting dark color (color: #141f25 ) for --nc-color-primary-element-light

Richdocument version : 8.2.1
NC version: 27

Issue has already filed for Collabora online : CollaboraOnline/online#7451

Maybe the problem is on Nextcloud side because no sense to set dark color for light mode.

CC: @juliushaertl

[Darshan-upadhyay1110]

As i have dig some code bit in richdocument i have found this line where we are setting the colors :

richdocuments/src/helpers/coolParameters.js

Line 55 in 331f8f7

const cssVarMap = {

@juliushaertl can you please guide me where this color code are defined which is set inside --nc-color-primary-element-light ?

[juliusknorr]

The value of --nc-color-primary-element-light is extracted from nextcloud for both variants, dark and light mode here:

richdocuments/src/helpers/coolParameters.js

Lines 121 to 136 in 331f8f7

	'--color-primary-element-light',
	'--color-primary-element-light-hover',
	'--color-primary-element-light-text',
	'--color-primary-element-text-dark',
	'--primary-invert-if-bright',
	'--background-invert-if-bright',
	'--background-invert-if-dark',
	]
	for (const i in handover) {
	const varName = handover[i]
	const lightStyle = window.getComputedStyle(lightElement).getPropertyValue(varName)
	const darkStyle = window.getComputedStyle(darkElement).getPropertyValue(varName)
	str += varName.replace('--', '--nc-light-') + '=' + lightStyle.trim() + ';'
	str += varName.replace('--', '--nc-dark-') + '=' + darkStyle.trim() + ';'

Nextcloud itself generates this value based on the primary color and mixes it with the background (white or black) depending on light or dark mode. Maybe you can check the values of --nc-light-color-primary-element-light and --nc-dark-color-primary-element-light

[Darshan-upadhyay1110]

I have done some testing in Chrome and FF. it seems Chrome has strange thing going on. I am in light mode but the var color i got is dark.

and it seems to change after rich document version got change to 8.2.1
Why it depends on browser?

[Darshan-upadhyay1110]

Nextcloud itself generates this value based on the primary color and mixes it with the background (white or black) depending on light or dark mode.

About mixup color so you mean it generates the color dynamically? and if yes then can you give any pointer where i can look ?

[juliusknorr]

About mixup color so you mean it generates the color dynamically? and if yes then can you give any pointer where i can look ?

Yes, those values are also used within Nextcloud and generated by the server:
https://github.com/nextcloud/server/blob/ddb808e13629e9fb7216787ed9d76544236377b0/apps/theming/lib/Themes/CommonThemeTrait.php#L44

I cannot reproduce this. Can you maybe share the following:

• Nextcloud primary color (run this in the js console of nextcloud OCA.Theming.defaultColor)
• User primary color (run this in the js console of nextcloud OCA.Theming.color)
• Which apprearance setting in nextcloud is selected (https://nextcloud.local/index.php/settings/user/theming)
• Is the os/browser in dark/light mode?

[Darshan-upadhyay1110]

• Nextcloud primary color: #0082c9

• User primary color : #0082c9
  

• System default theme.
  

• yes i am using dark mode for both os and browser as well.

[juliusknorr]

Thanks 🙈 Should have guessed that with system dark mode

I think this is a regression of #3152 when trying to get both dark and light mode color variants

Getting the elements from

richdocuments/src/helpers/coolParameters.js

Lines 91 to 92 in 3c1a4b4

	const lightElement = document.getElementById('cool-var-source-light') ?? document.documentElement
	const darkElement = document.getElementById('cool-var-source-dark') ?? document.documentElement

fails as they are no longer loaded in Office.vue. They used to come from

richdocuments/templates/documents.php

Lines 12 to 13 in 3c1a4b4

	<div id="cool-var-source-light" data-theme-light></div>
	<div id="cool-var-source-dark" data-theme-dark></div>

but this is no longer the case for logged in users.

Easiest fix is likely to just add those two divs to the src/view/Office.vue component.

Debugger screenshot for reference

[Darshan-upadhyay1110]

ahaa okay but @juliushaertl i am not sure about where you are refering to add this two div. is it inside <template> directly or need to add new component.

i have added this into dom but no effect.

maybe i am adding wrong way i don't know :(

[juliusknorr]

Hm, all right, i think the viewer component is then not rendered early enough to put those divs into the DOM.

We probably could do something like this programatically then in coolParameters.js

const lightElement = document.createElement('div')
lightElement.setAttribute('data-theme-light', '')
document.body.appendChild(lightElement)

This should work to properly get the values for the light theme as well.