[6.x] Cards light/dark mode

[vitalijalbu]

Bug description

Dark mode seems still not supported at 100%

How to reproduce

Logs

Environment

Environment
Application Name: AUREA
Laravel Version: 12.46.0
PHP Version: 8.4.16
Composer Version: 2.9.2
Environment: local
Debug Mode: ENABLED
URL: crowd-2.test
Maintenance Mode: OFF
Timezone: UTC
Locale: it

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: mysql
Logs: stack / single
Mail: log
Queue: background
Session: file

Storage
public/storage: NOT LINKED

Statamic
Addons: 0
Sites: 1
Stache Watcher: Enabled
Static Caching: half
Version: 6.0.0-alpha.21 PRO

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

[ebeauchamps]

Did you set a coherent scale from "gray50" to "gray950"? Looks to me that you are in light mode but with a very dark color for input backgrounds. May I suggest you play with the "volt" color in order to detect which step is in use where?

[JayGeorge]

Hi @vitalijalbu , please could you share your theme yaml so I can take a look? It'll be in /resources/preferences.yaml

It'll be something like this:

theme:
  id: 11
  name: 'Color Moods - La French Touch'
  colors:
    danger: '#E0000F'
    body-bg: '#F9F9F9'
    gray-50: '#f9f9f9'
    primary: '#000091'
    gray-100: '#eeeeef'
    gray-150: '#E1E1E6'
    gray-200: '#d4d4dd'
    gray-300: '#b7b7d0'
    gray-400: '#9c9ccb'
    gray-500: '#8282ca'
    gray-600: '#6767cb'
    gray-700: '#4a4acc'
    gray-800: '#2a2abe'
    gray-850: '#2020AB'
    gray-900: '#161697'
    gray-925: '#0B0B94'
    gray-950: '#000091'
    switch-bg: '#000091'
    progress-bar: '#E0000F'
    ui-accent-bg: '#000091'
    focus-outline: '#0062FF'
    content-border: '#E1E1E6'
    ui-accent-text: '#E0000F'
    global-header-bg: '#000091'
    dark-danger: '#E0000F'
    dark-gray-50: '#e0f0fc'
    dark-primary: '#0062FF'
    dark-success: 'oklch(0.792 0.209 151.711)'
    dark-gray-100: '#c3e1f8'
    dark-gray-150: '#A8D3F6'
    dark-gray-200: '#8dc4f3'
    dark-gray-300: '#50a4ea'
    dark-gray-400: '#4284cc'
    dark-gray-500: '#3362ac'
    dark-gray-600: '#264491'
    dark-gray-700: '#192376'
    dark-gray-800: '#160b47'
    dark-gray-850: '#0E0A3C'
    dark-gray-900: '#050930'
    dark-gray-925: '#040825'
    dark-gray-950: '#020619'
    dark-switch-bg: '#0062FF'
    dark-progress-bar: '#E0000F'
    dark-ui-accent-bg: '#160B47'
    dark-focus-outline: '#0062FF'
    dark-ui-accent-text: '#0062FF'
    dark-global-header-bg: '#160b47'

[vitalijalbu]

@JayGeorge

theme:
    id: 8
    name: 'Color Moods - East Texas'
    colors:
      danger: 'oklch(0.505 0.213 27.518)'
      body-bg: '#F8F7F6'
      gray-50: '#fbfaf9'
      primary: '#00386C'
      gray-100: '#f8f7f6'
      gray-150: '#F5F4F2'
      gray-200: '#f2f0ee'
      gray-300: '#ebe8e5'
      gray-400: '#e2deda'
      gray-500: '#dcd7d2'
      gray-600: '#b5aba0'
      gray-700: '#928272'
      gray-800: '#62574c'
      gray-850: '#4A4139'
      gray-900: '#312b26'
      gray-925: '#24201C'
      gray-950: '#171412'
      switch-bg: '#FFC333'
      progress-bar: '#FFD749'
      ui-accent-bg: '#FFC333'
      focus-outline: '#1172DE'
      content-border: '#F2F0EE'
      ui-accent-text: '#FFC333'
      global-header-bg: '#00386C'
      dark-ui-accent-bg: '#FFC333'
      dark-ui-accent-text: '#FFC333'
  locale: it
  favorites: {  }
  color_mode: dark

[vitalijalbu]

my mac uses dark mode, chrome light (i always use light mode for websites)

[JayGeorge]

That's really odd—I can't replicate this. Can you double-check in incognito to make sure a browser extension isn't interfering?

This is what I see

macOS dark mode, theme dark mode

macOS dark mode, theme light mode

[heidkaemper]

I can't reproduce it either. But maybe the theme settings aren't in Global Preferences at all, but in User Preferences?

@vitalijalbu Could you check if there are theme preferences in your user file? (a .yaml file in users/ directory)
Something like this:

preferences:
  theme:
    id: custom
    name: Custom
    colors: ...