refactor: use native CSS selectors for dark theme of input borders

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/assets/input-border.scss

@@ -2,31 +2,35 @@
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
- 
- @mixin boxShadow($borderColor) {
-	box-shadow: 0 -1px $borderColor,
-			0 0 0 1px color-mix(in srgb, $borderColor, 65% transparent);
-}
-
-@mixin boxShadowDark($borderColor) {
-	box-shadow: 0 1px $borderColor,
-			0 0 0 1px color-mix(in srgb, $borderColor, 65% transparent);
-}
 
 /**
  * Similar as inputBorder but without active styles.
  */
-@mixin inputLikeBorder($darkThemeSelector, $legacySelector, $borderColor: var(--color-border-maxcontrast)) {
+@mixin inputLikeBorder($legacySelector, $borderColor: var(--color-border-maxcontrast)) {
+	--input-border-box-shadow-light: 0 -1px #{$borderColor},
+		0 0 0 1px color-mix(in srgb, #{$borderColor}, 65% transparent);
+	--input-border-box-shadow-dark: 0 1px #{$borderColor},
+		0 0 0 1px color-mix(in srgb, #{$borderColor}, 65% transparent);
+	--input-border-box-shadow: var(--input-border-box-shadow-light);
 	border: none;
 	border-radius: var(--border-radius-element);
-	@include boxShadow($borderColor);
+	box-shadow: var(--input-border-box-shadow);
 
 	&:hover:not([disabled]) {
 		box-shadow: 0 0 0 1px $borderColor;
 	}
 
-	@at-root #{$darkThemeSelector} #{&} {
-		@include boxShadowDark($borderColor);
+	// override with system theme
+	@media (prefers-color-scheme: dark) {
+		--input-border-box-shadow: var(--input-border-box-shadow-dark);
+	}
+
+	// override with nextcloud theme
+	@at-root [data-theme-dark] #{&} {
+		--input-border-box-shadow: var(--input-border-box-shadow-dark);
+	}
+	@at-root [data-theme-light] #{&} {
+		--input-border-box-shadow: var(--input-border-box-shadow-light);
 	}
 
 	@at-root #{$legacySelector} #{&} {
@@ -42,8 +46,8 @@
  * Create a consistent border for an input element.
  * With Nextcloud 32+ there is no real border anymore but we use a box-shadow.
  */
-@mixin inputBorder($darkThemeSelector, $legacySelector, $borderColor: var(--color-border-maxcontrast)) {
-	@include inputLikeBorder($darkThemeSelector, $legacySelector, $borderColor);
+@mixin inputBorder($legacySelector, $borderColor: var(--color-border-maxcontrast)) {
+	@include inputLikeBorder($legacySelector, $borderColor);
 
 	&:focus-within:not([disabled]),
 	&:active:not([disabled]) {

src/components/NcInputField/NcInputField.vue

@@ -24,7 +24,6 @@ import { mdiAlertCircleOutline, mdiCheck } from '@mdi/js'
 import { computed, useAttrs, useTemplateRef, warn } from 'vue'
 import NcButton from '../NcButton/NcButton.vue'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
-import { useIsDarkTheme } from '../../composables/useIsDarkTheme/index.ts'
 import { createElementId } from '../../utils/createElementId.ts'
 import { isLegacy } from '../../utils/legacy.ts'
 
@@ -162,8 +161,6 @@ const attrs = useAttrs()
 
 const inputElement = useTemplateRef('input')
 
-const isDarkTheme = useIsDarkTheme()
-
 const hasTrailingIcon = computed(() => props.showTrailingButton || props.success)
 
 const internalPlaceholder = computed(() => {
@@ -234,7 +231,6 @@ function handleInput(event: Event) {
 	<div
 		class="input-field"
 		:class="[{
-			'input-field--dark': isDarkTheme,
 			'input-field--disabled': disabled,
 			'input-field--error': error,
 			'input-field--label-outside': labelOutside || !isValidLabel,
@@ -355,7 +351,7 @@ function handleInput(event: Event) {
 	}
 
 	&__input {
-		@include border.inputBorder('.input-field--dark', '.input-field--legacy', var(--input-border-color));
+		@include border.inputBorder('.input-field--legacy', var(--input-border-color));
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
 		border-radius: var(--input-border-radius);

src/components/NcSelect/NcSelect.vue

@@ -325,7 +325,6 @@ export default {
 	<VueSelect
 		class="select"
 		:class="{
-			'select--dark': isDark,
 			'select--legacy': isLegacy,
 			'select--no-wrap': noWrap,
 		}"
@@ -402,7 +401,6 @@ import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import NcEllipsisedOption from '../NcEllipsisedOption/NcEllipsisedOption.vue'
 import NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'
-import { useIsDarkTheme } from '../../composables/index.ts'
 import { t } from '../../l10n.ts'
 import { createElementId } from '../../utils/createElementId.ts'
 import { isLegacy } from '../../utils/legacy.ts'
@@ -781,8 +779,6 @@ export default {
 		const gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))
 		const avatarSize = clickableArea - 2 * gridBaseLine
 
-		const isDark = useIsDarkTheme()
-
 		return {
 			avatarSize,
 			isLegacy,
@@ -1122,7 +1118,7 @@ body {
 }
 
 .vs__dropdown-toggle {
-	@include border.inputLikeBorder('.select--dark', '.select--legacy', var(--vs-border-color));
+	@include border.inputLikeBorder('.select--legacy', var(--vs-border-color));
 }
 
 .vs__dropdown-menu {

src/components/NcTextArea/NcTextArea.vue

@@ -77,7 +77,6 @@ import type { VueClassType } from '../../utils/VueTypes.ts'
 import { mdiAlertCircleOutline, mdiCheck } from '@mdi/js'
 import { computed, useAttrs, useTemplateRef, watch } from 'vue'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
-import { useIsDarkTheme } from '../../composables/useIsDarkTheme/index.ts'
 import { createElementId } from '../../utils/createElementId.ts'
 import { isLegacy } from '../../utils/legacy.ts'
 import { logger } from '../../utils/logger.ts'
@@ -171,8 +170,6 @@ const attrs = useAttrs()
  */
 const textAreaElement = useTemplateRef('input')
 
-const isDarkTheme = useIsDarkTheme()
-
 const internalPlaceholder = computed(() => props.placeholder || (isLegacy ? props.label : undefined))
 
 // warn about invalid labels (missing label and no label outside)
@@ -229,7 +226,6 @@ function select() {
 		:class="[
 			$attrs.class,
 			{
-				'textarea--dark': isDarkTheme,
 				'textarea--disabled': disabled,
 				'textarea--legacy': isLegacy,
 			},
@@ -321,7 +317,7 @@ function select() {
 
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
-		@include border.inputBorder('.textarea--dark', '.textarea--legacy', var(--input-border-color));
+		@include border.inputBorder('.textarea--legacy', var(--input-border-color));
 
 		&:active:not([disabled]),
 		&:focus:not([disabled]) {