N
Nuxt•2mo ago
23brewert

Nuxt UI, Text Does not appear in light mode - iOS only?

Hello everyone, I recently built a site with nuxt 3 and nuxt ui version 3.0.0 The theme for UI components is generally working out, however when I try to view the website from my iPhone that has a system-level light mode, the text disappears, but it re-appears if I enable dark mode. [see attached video] Here is my configs for the theme /assets/css/main.css 
@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme static {
  
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

.subsectionHeader{
    font-weight: 700;
    font-size: 19pt;
}

img {
  display: block;
  width: auto;
  height: auto;
}
@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme static {
  
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

.subsectionHeader{
    font-weight: 700;
    font-size: 19pt;
}

img {
  display: block;
  width: auto;
  height: auto;
}
nuxt.config.ts 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: [
    '@nuxt/content',
    '@nuxt/ui',
    '@sidebase/nuxt-auth'
  ],
  css: ['~/assets/css/main.css'],
})
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: [
    '@nuxt/content',
    '@nuxt/ui',
    '@sidebase/nuxt-auth'
  ],
  css: ['~/assets/css/main.css'],
})
and the pages dont really use any special font coloring with the exception of the UButton, all the other colors are default. I tried adding the "dark" class to the layout pages but it didn't change anything. Thank you in advance!
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @23brewert. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with text disappearing in light mode on iOS is likely related to how the Nuxt UI theme tokens are being applied. Based on the knowledge sources, this could be related to the CSS variables that control text colors in light and dark modes. Possible Solution: Add Neutral Palette Tokens The main issue appears to be that your CSS configuration might be missing the necessary neutral palette tokens that define text colors for light mode. In Nuxt UI v3, these tokens are crucial for proper text rendering across different color modes. Try adding these neutral palette tokens to your main.css file: 
@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme static {
  --font-sans: 'Public Sans', sans-serif;
  --breakpoint-3xl: 1920px;
  
  /* Your green color definitions */
  --color-green-50: #EFFDF5;
  /* ... other green colors ... */
}

/* Add these light mode text color definitions */
:root {
  --ui-text-dimmed: var(--ui-color-neutral-400);
  --ui-text-muted: var(--ui-color-neutral-500);
  --ui-text-toned: var(--ui-color-neutral-600);
  --ui-text: var(--ui-color-neutral-700);
  --ui-text-highlighted: var(--ui-color-neutral-900);
  
  --ui-bg: var(--color-white);
}

/* Add dark mode text color definitions */
.dark {
  --ui-text-dimmed: var(--ui-color-neutral-500);
  --ui-text-muted: var(--ui-color-neutral-400);
  --ui-text-toned: var(--ui-color-neutral-300);
  --ui-text: var(--ui-color-neutral-200);
  --ui-text-highlighted: var(--color-white);
  
  --ui-bg: var(--ui-color-neutral-900);
}

/* Your other styles */
.subsectionHeader{
    font-weight: 700;
    font-size: 19pt;
}

img {
  display: block;
  width: auto;
  height: auto;
}
@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme static {
  --font-sans: 'Public Sans', sans-serif;
  --breakpoint-3xl: 1920px;
  
  /* Your green color definitions */
  --color-green-50: #EFFDF5;
  /* ... other green colors ... */
}

/* Add these light mode text color definitions */
:root {
  --ui-text-dimmed: var(--ui-color-neutral-400);
  --ui-text-muted: var(--ui-color-neutral-500);
  --ui-text-toned: var(--ui-color-neutral-600);
  --ui-text: var(--ui-color-neutral-700);
  --ui-text-highlighted: var(--ui-color-neutral-900);
  
  --ui-bg: var(--color-white);
}

/* Add dark mode text color definitions */
.dark {
  --ui-text-dimmed: var(--ui-color-neutral-500);
  --ui-text-muted: var(--ui-color-neutral-400);
  --ui-text-toned: var(--ui-color-neutral-300);
  --ui-text: var(--ui-color-neutral-200);
  --ui-text-highlighted: var(--color-white);
  
  --ui-bg: var(--ui-color-neutral-900);
}

/* Your other styles */
.subsectionHeader{
    font-weight: 700;
    font-size: 19pt;
}

img {
  display: block;
  width: auto;
  height: auto;
}
This approach follows the Nuxt UI v3 design system which uses CSS variables for text colors in both light and dark modes as described in the Neutral Palette documentation. Alternative Solution: Font Issue Interestingly, there was a similar issue mentioned in a Stack Overflow post where the problem was related to the font type. The user found that changing from the Tajwal font resolved their issue with text alignment and visibility Stack Overflow Post. While your issue might be different, it could be worth trying a different font if the above solution doesn't work. Additional Considerations 1. Make sure your body element has the proper text color applied. Nuxt UI automatically applies these styles: 
   body {
     @apply antialiased text-(--ui-text) bg-(--ui-bg);
   }
   
   body {
     @apply antialiased text-(--ui-text) bg-(--ui-bg);
   }
2. If you're using custom color aliases, ensure they're properly defined for both light and dark modes as shown in the Color Shades documentation. 3. You might also want to check if the color mode is being properly detected on iOS. The useColorMode composable from Nuxt Color Mode should handle this, but you can add explicit checks if needed. Let me know if these suggestions help resolve your issue! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@345465284582178826> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
23brewert
23brewertOP•2mo ago
also here is the login page 
<template>
    <div class="h-screen flex items-center justify-center">
        <div class="p-3 center mh-5 bg-slate-700 rounded-xl items-center  text-center justify-center">
        <div style="margin-top: -80px;" class="flex justify-center">
            <img class="bg-slate-700" style="padding: 10px; border-radius: 100%; width: 150px; height: 150px;" src="~/assets/images/CADS_ICON.png" alt="">
        </div>

        <div v-if="errorCode" class="p-1 bg-red-500 rounded-md font-bold text-white justify-center text-lg bg-error"> Authentication error {{ errorCode }}. Please try again!</div>

        <div style="font-weight: 700; font-size: 25pt;">Sign In</div>
        <div>Please authenticate to continue.</div>
        <div class="flex mt-2 mb-2
        justify-center pt-4 pb-3 gap-2">
            <UButton @click="signIn('discord')"  size="xl" color="secondary" class="text-white" leadingIcon="ic:baseline-discord">Login with Discord</UButton>
        </div>
        <div class="font-extralight italic text-sm">By signing in you agree to our <a>TOS</a> and <a>Privacy Policy</a>.</div>

    </div>
    </div>
</template>
<template>
    <div class="h-screen flex items-center justify-center">
        <div class="p-3 center mh-5 bg-slate-700 rounded-xl items-center  text-center justify-center">
        <div style="margin-top: -80px;" class="flex justify-center">
            <img class="bg-slate-700" style="padding: 10px; border-radius: 100%; width: 150px; height: 150px;" src="~/assets/images/CADS_ICON.png" alt="">
        </div>

        <div v-if="errorCode" class="p-1 bg-red-500 rounded-md font-bold text-white justify-center text-lg bg-error"> Authentication error {{ errorCode }}. Please try again!</div>

        <div style="font-weight: 700; font-size: 25pt;">Sign In</div>
        <div>Please authenticate to continue.</div>
        <div class="flex mt-2 mb-2
        justify-center pt-4 pb-3 gap-2">
            <UButton @click="signIn('discord')"  size="xl" color="secondary" class="text-white" leadingIcon="ic:baseline-discord">Login with Discord</UButton>
        </div>
        <div class="font-extralight italic text-sm">By signing in you agree to our <a>TOS</a> and <a>Privacy Policy</a>.</div>

    </div>
    </div>
</template>
turns out setting root in css to the dark mode fixed it! 
:root {
  --ui-text-dimmed: var(--ui-color-neutral-500);
  --ui-text-muted: var(--ui-color-neutral-400);
  --ui-text-toned: var(--ui-color-neutral-300);
  --ui-text: var(--ui-color-neutral-200);
  --ui-text-highlighted: var(--color-white);
  
  --ui-bg: var(--ui-color-neutral-900);
}
:root {
  --ui-text-dimmed: var(--ui-color-neutral-500);
  --ui-text-muted: var(--ui-color-neutral-400);
  --ui-text-toned: var(--ui-color-neutral-300);
  --ui-text: var(--ui-color-neutral-200);
  --ui-text-highlighted: var(--color-white);
  
  --ui-bg: var(--ui-color-neutral-900);
}

Did you find this page helpful?