My Staff List (Sketches and Collections) are not readable with dark mode on Mobile Device

[shibomb]

p5.js version

No response

What is your operating system?

None

Web browser and version

No response

Actual Behavior

My Staff List (Sketches and Collections) are not readable with dark mode on Mobile Device.

Expected Behavior

The background color of the rows should be dark.

Steps to reproduce

Steps:

1. Open Web Editor on Mobile Device.
2. Set dark mode.
3. Open My Staff.

[lindapaiste]

Good catch! There might be some colors that are hardcoded instead of using theme variables.

Edit: it seems like we are using variables, but those variables don't have the colors that we want for the dark and contrast themes. We may want to create new variables instead of reusing these search- and modal- ones. We've talked about creating more generic/standardized properties like surface-0, surface-1 etc. but that has never been implemented.

p5.js-web-editor/client/styles/components/_sketch-list.scss

Lines 36 to 39 in fcbc05e

	@include themify() {
	border: 1px solid getThemifyVariable("modal-border-color");
	background-color: getThemifyVariable("search-background-color") !important;
	}

p5.js-web-editor/client/styles/components/_sketch-list.scss

Lines 53 to 55 in fcbc05e

	@include themify() {
	color: getThemifyVariable("modal-border-color");
	}

p5.js-web-editor/client/styles/abstracts/_variables.scss

Line 173 in fcbc05e

search-background-color: $lightest,

p5.js-web-editor/client/styles/abstracts/_variables.scss

Line 151 in fcbc05e

modal-border-color: $middle-dark,