fix(theme): override automatic text color with classes (#22475)

Author: KaelWD

packages/vuetify/src/composables/__tests__/__snapshots__/theme.spec.ts.snap

@@ -7,6 +7,7 @@ exports[`createTheme > should allow for themes to be scoped 1`] = `
     type="text/css"
   >
     @layer vuetify-utilities.theme {
+  @layer base {
   :root {
     --v-theme-background: 255,255,255;
     --v-theme-background-overlay-multiplier: 1;
@@ -63,6 +64,8 @@ exports[`createTheme > should allow for themes to be scoped 1`] = `
     --v-theme-on-kbd: 0, 0, 0;
     --v-theme-code: 245, 245, 245;
     --v-theme-on-code: 0, 0, 0;
+    --v-theme-on-dark: 255, 255, 255;
+    --v-theme-on-light: 0, 0, 0;
   }
   .v-theme--light {
     color-scheme: normal;
@@ -121,6 +124,8 @@ exports[`createTheme > should allow for themes to be scoped 1`] = `
     --v-theme-on-kbd: 0, 0, 0;
     --v-theme-code: 245, 245, 245;
     --v-theme-on-code: 0, 0, 0;
+    --v-theme-on-dark: 255, 255, 255;
+    --v-theme-on-light: 0, 0, 0;
   }
   .v-theme--dark {
     color-scheme: dark;
@@ -179,6 +184,9 @@ exports[`createTheme > should allow for themes to be scoped 1`] = `
     --v-theme-on-kbd: 255, 255, 255;
     --v-theme-code: 52, 52, 52;
     --v-theme-on-code: 204, 204, 204;
+    --v-theme-on-dark: 255, 255, 255;
+    --v-theme-on-light: 0, 0, 0;
+  }
   }
   @layer background {
     .bg-background {
@@ -374,6 +382,7 @@ exports[`createTheme > should allow for themes to be scoped 1`] = `
     type="text/css"
   >
     @layer vuetify-utilities.theme {
+  @layer base {
   :where(#my-app) {
     --v-theme-background: 255,255,255;
     --v-theme-background-overlay-multiplier: 1;
@@ -430,6 +439,8 @@ exports[`createTheme > should allow for themes to be scoped 1`] = `
     --v-theme-on-kbd: 0, 0, 0;
     --v-theme-code: 245, 245, 245;
     --v-theme-on-code: 0, 0, 0;
+    --v-theme-on-dark: 255, 255, 255;
+    --v-theme-on-light: 0, 0, 0;
   }
   :where(#my-app) .v-theme--light {
     color-scheme: normal;
@@ -488,6 +499,8 @@ exports[`createTheme > should allow for themes to be scoped 1`] = `
     --v-theme-on-kbd: 0, 0, 0;
     --v-theme-code: 245, 245, 245;
     --v-theme-on-code: 0, 0, 0;
+    --v-theme-on-dark: 255, 255, 255;
+    --v-theme-on-light: 0, 0, 0;
   }
   :where(#my-app) .v-theme--dark {
     color-scheme: dark;
@@ -546,6 +559,9 @@ exports[`createTheme > should allow for themes to be scoped 1`] = `
     --v-theme-on-kbd: 255, 255, 255;
     --v-theme-code: 52, 52, 52;
     --v-theme-on-code: 204, 204, 204;
+    --v-theme-on-dark: 255, 255, 255;
+    --v-theme-on-light: 0, 0, 0;
+  }
   }
   @layer background {
     :where(#my-app) .bg-background {
@@ -746,6 +762,7 @@ exports[`createTheme > should create style element 1`] = `
     type="text/css"
   >
     @layer vuetify-utilities.theme {
+  @layer base {
   :root {
     --v-theme-background: 255,255,255;
     --v-theme-background-overlay-multiplier: 1;
@@ -802,6 +819,8 @@ exports[`createTheme > should create style element 1`] = `
     --v-theme-on-kbd: 0, 0, 0;
     --v-theme-code: 245, 245, 245;
     --v-theme-on-code: 0, 0, 0;
+    --v-theme-on-dark: 255, 255, 255;
+    --v-theme-on-light: 0, 0, 0;
   }
   .v-theme--light {
     color-scheme: normal;
@@ -860,6 +879,8 @@ exports[`createTheme > should create style element 1`] = `
     --v-theme-on-kbd: 0, 0, 0;
     --v-theme-code: 245, 245, 245;
     --v-theme-on-code: 0, 0, 0;
+    --v-theme-on-dark: 255, 255, 255;
+    --v-theme-on-light: 0, 0, 0;
   }
   .v-theme--dark {
     color-scheme: dark;
@@ -918,6 +939,9 @@ exports[`createTheme > should create style element 1`] = `
     --v-theme-on-kbd: 255, 255, 255;
     --v-theme-code: 52, 52, 52;
     --v-theme-on-code: 204, 204, 204;
+    --v-theme-on-dark: 255, 255, 255;
+    --v-theme-on-light: 0, 0, 0;
+  }
   }
   @layer background {
     .bg-background {

packages/vuetify/src/composables/__tests__/color.spec.ts

@@ -18,8 +18,7 @@ describe('color.ts', () => {
       [{ bg: null }, [[], {}]],
       [{ bg: '' }, [[], {}]],
       [{ bg: 'primary' }, [['bg-primary'], {}]],
-      [{ bg: '#FF00FF' }, [[], { backgroundColor: '#FF00FF', color: '#fff', caretColor: '#fff' }]],
-      // [{ bg: '#FF00FF' }, [[], { backgroundColor: '#FF00FF' }]],
+      [{ bg: '#FF00FF' }, [['v-theme-on-dark'], { backgroundColor: '#FF00FF' }]],
     ])('should return correct color classes and styles', (value, [classes, styles]) => {
       const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => value.bg)
 
@@ -33,7 +32,7 @@ describe('color.ts', () => {
       [{ background: null }, [[], {}]],
       [{ background: '' }, [[], {}]],
       [{ background: 'primary' }, [['bg-primary'], {}]],
-      [{ background: '#FF00FF' }, [[], { backgroundColor: '#FF00FF', color: '#fff', caretColor: '#fff' }]],
+      [{ background: '#FF00FF' }, [['v-theme-on-dark'], { backgroundColor: '#FF00FF' }]],
       [{ text: null }, [[], {}]],
       [{ text: '' }, [[], {}]],
       [{ text: 'primary' }, [['text-primary'], {}]],

packages/vuetify/src/composables/color.ts

@@ -1,6 +1,6 @@
 // Utilities
 import { toValue } from 'vue'
-import { destructComputed, getForeground, isCssColor, isParsableColor, parseColor } from '@/util'
+import { destructComputed, hasLightForeground, isCssColor, isParsableColor, parseColor } from '@/util'
 
 // Types
 import type { CSSProperties, MaybeRefOrGetter, Ref } from 'vue'
@@ -63,10 +63,10 @@ export function computeColor (colors: MaybeRefOrGetter<{ background?: ColorValue
       if (!_colors.text && isParsableColor(_colors.background)) {
         const backgroundColor = parseColor(_colors.background)
         if (backgroundColor.a == null || backgroundColor.a === 1) {
-          const textColor = getForeground(backgroundColor)
-
-          styles.color = textColor
-          styles.caretColor = textColor
+          classes.push(hasLightForeground(backgroundColor)
+            ? 'v-theme-on-dark'
+            : 'v-theme-on-light'
+          )
         }
       }
     } else {

packages/vuetify/src/composables/theme.ts

@@ -17,8 +17,8 @@ import {
   darken,
   deprecate,
   getCurrentInstance,
-  getForeground,
   getLuma,
+  hasLightForeground,
   IN_BROWSER,
   lighten,
   mergeDeep,
@@ -32,6 +32,7 @@ import {
 import type { VueHeadClient } from '@unhead/vue/client'
 import type { HeadClient } from '@vueuse/head'
 import type { App, DeepReadonly, InjectionKey, Ref } from 'vue'
+import type { Color } from '@/util'
 
 type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T
 
@@ -71,29 +72,29 @@ interface InternalThemeDefinition {
 }
 
 export interface Colors extends BaseColors, OnColors {
-  [key: string]: string
+  [key: string]: Color
 }
 
 interface BaseColors {
-  background: string
-  surface: string
-  primary: string
-  secondary: string
-  success: string
-  warning: string
-  error: string
-  info: string
+  background: Color
+  surface: Color
+  primary: Color
+  secondary: Color
+  success: Color
+  warning: Color
+  error: Color
+  info: Color
 }
 
 interface OnColors {
-  'on-background': string
-  'on-surface': string
-  'on-primary': string
-  'on-secondary': string
-  'on-success': string
-  'on-warning': string
-  'on-error': string
-  'on-info': string
+  'on-background': Color
+  'on-surface': Color
+  'on-primary': Color
+  'on-secondary': Color
+  'on-success': Color
+  'on-warning': Color
+  'on-error': Color
+  'on-info': Color
 }
 
 export interface ThemeInstance {
@@ -166,6 +167,8 @@ function genDefaults () {
           'theme-on-kbd': '#000000',
           'theme-code': '#F5F5F5',
           'theme-on-code': '#000000',
+          'theme-on-dark': '#FFF',
+          'theme-on-light': '#000',
         },
       },
       dark: {
@@ -203,6 +206,8 @@ function genDefaults () {
           'theme-on-kbd': '#FFFFFF',
           'theme-code': '#343434',
           'theme-on-code': '#CCCCCC',
+          'theme-on-dark': '#FFF',
+          'theme-on-light': '#000',
         },
       },
     },
@@ -261,7 +266,7 @@ function genCssVariables (theme: InternalThemeDefinition, prefix: string) {
   return variables
 }
 
-function genVariation (name: string, color: string, variations: VariationsOptions | false) {
+function genVariation (name: string, color: Color, variations: VariationsOptions | false) {
   const object: Record<string, string> = {}
   if (variations) {
     for (const variation of (['lighten', 'darken'] as const)) {
@@ -291,7 +296,7 @@ function genVariations (colors: InternalThemeDefinition['colors'], variations: V
   return variationColors
 }
 
-function genOnColors (colors: InternalThemeDefinition['colors']) {
+function genOnColors (colors: InternalThemeDefinition['colors'], variables: InternalThemeDefinition['variables']) {
   const onColors = {} as InternalThemeDefinition['colors']
 
   for (const color of Object.keys(colors)) {
@@ -300,7 +305,9 @@ function genOnColors (colors: InternalThemeDefinition['colors']) {
     const onColor = `on-${color}` as keyof OnColors
     const colorVal = parseColor(colors[color])
 
-    onColors[onColor] = getForeground(colorVal)
+    onColors[onColor] = hasLightForeground(colorVal)
+      ? variables['theme-on-dark']
+      : variables['theme-on-light']
   }
 
   return onColors
@@ -368,7 +375,7 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
         ...original,
         colors: {
           ...colors,
-          ...genOnColors(colors),
+          ...genOnColors(colors, original.variables),
         },
       }
     }
@@ -383,6 +390,8 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
     const lines: string[] = []
     const scoped = parsedOptions.scoped ? parsedOptions.prefix : ''
 
+    lines.push('@layer base {\n')
+
     if (current.value?.dark) {
       createCssClass(lines, ':root', ['color-scheme: dark'], parsedOptions.scope)
     }
@@ -396,6 +405,8 @@ export function createTheme (options?: ThemeOptions): ThemeInstance & { install:
       ], parsedOptions.scope)
     }
 
+    lines.push('}\n')
+
     if (parsedOptions.utilities) {
       const bgLines: string[] = []
       const fgLines: string[] = []

packages/vuetify/src/styles/generic/_index.scss

@@ -1,5 +1,6 @@
 @use './layers';
 @use './animations';
+@use './theme';
 @use './colors';
 @use './reset';
 @use './transitions';

packages/vuetify/src/styles/generic/_layers.scss

@@ -13,7 +13,7 @@
 @layer vuetify-utilities {
   @layer helpers;
   @layer theme {
-    @layer background, foreground;
+    @layer base, background, foreground;
   }
 }
 

packages/vuetify/src/styles/generic/_theme.scss

@@ -0,0 +1,10 @@
+@use '../tools';
+
+@include tools.layer('utilities.theme.base') {
+  .v-theme-on-light {
+    color: rgb(var(--v-theme-on-light));
+  }
+  .v-theme-on-dark {
+    color: rgb(var(--v-theme-on-dark));
+  }
+}

packages/vuetify/src/util/colorUtils.ts

@@ -290,7 +290,7 @@ export function getContrast (first: Color, second: Color) {
   return (light + 0.05) / (dark + 0.05)
 }
 
-export function getForeground (color: Color) {
+export function hasLightForeground (color: Color) {
   const blackContrast = Math.abs(APCAcontrast(parseColor(0), parseColor(color)))
   const whiteContrast = Math.abs(APCAcontrast(parseColor(0xffffff), parseColor(color)))
 
@@ -304,5 +304,5 @@ export function getForeground (color: Color) {
   // }
 
   // Prefer white text if both have an acceptable contrast ratio
-  return whiteContrast > Math.min(blackContrast, 50) ? '#fff' : '#000'
+  return whiteContrast > Math.min(blackContrast, 50)
 }