Nuxt•4mo ago

Dark or Coloured DashboardSidebar on light theme

This is a fairly common design pattern where even for light theme the dark mode style dashboard sidebar is used or alternatively a coloured sidebar is used with text that may be set as light or dark depending on contrast values (a dribbble reference image provided) what would be the recommended way to accomplish this using nuxt-ui-pro

26 Replies

kapa.ai•4mo ago

Hi @SamKaizen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve a dark or colored DashboardSidebar while keeping the rest of your Nuxt UI Pro app in light mode, you should override the sidebar’s background and text colors using CSS variables or utility classes. This is a supported and recommended approach in Nuxt UI, as the theming system is built on CSS variables that can be scoped to specific components. 1. Override Sidebar Colors with CSS Variables You can target the sidebar and set custom CSS variables for background and text. For example, to make the sidebar dark in light mode:

/* app/assets/css/main.css */
.dashboard-sidebar-custom {
  --ui-bg: var(--ui-color-neutral-900);   /* dark background */
  --ui-text: var(--ui-color-neutral-100); /* light text */
}

/* app/assets/css/main.css */
.dashboard-sidebar-custom {
  --ui-bg: var(--ui-color-neutral-900);   /* dark background */
  --ui-text: var(--ui-color-neutral-100); /* light text */
}

Then, apply this class to your sidebar:

<template>
  <UDashboardSidebar class="dashboard-sidebar-custom">
    <!-- Sidebar content -->
  </UDashboardSidebar>
</template>

<template>
  <UDashboardSidebar class="dashboard-sidebar-custom">
    <!-- Sidebar content -->
  </UDashboardSidebar>
</template>

This will force the sidebar to use a dark background and light text, regardless of the global color mode. You can similarly use any color from your palette or custom values for a colored sidebar. 2. Use Utility Classes Nuxt UI exposes Tailwind utility classes for text and background colors, such as bg-default, bg-inverted, text-inverted, etc. You can use these directly on the sidebar or its slots:

<template>
  <UDashboardSidebar class="bg-inverted text-inverted">
    <!-- Sidebar content -->
  </UDashboardSidebar>
</template>

<template>
  <UDashboardSidebar class="bg-inverted text-inverted">
    <!-- Sidebar content -->
  </UDashboardSidebar>
</template>

- bg-inverted and text-inverted will use the dark mode palette even in light mode, as defined by Nuxt UI’s CSS variables and theme system [Theme: Neutral]. 3. Customizing via Theme Config If you want to set this globally for all sidebars, you can customize the sidebar’s theme in your app.config.ts or vite.config.ts:

// app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardSidebar: {
      slots: {
        root: 'bg-neutral-900 text-neutral-100', // or any Tailwind color class
      }
    }
  }
})

// app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardSidebar: {
      slots: {
        root: 'bg-neutral-900 text-neutral-100', // or any Tailwind color class
      }
    }
  }
})

This will apply your chosen background and text color to all DashboardSidebar components [DashboardSidebar Theme]. --- Summary:
- Use a custom class with CSS variables or Tailwind utility classes to override the sidebar’s background and text color. - This approach is fully compatible with Nuxt UI Pro’s theming system and does not interfere with the global color mode. - You can use any color from your palette, including brand or accent colors, and adjust text color for contrast. If you need to dynamically adjust text color based on background for accessibility, you would need to handle that logic yourself, as the knowledge sources do not mention built-in automatic contrast adjustment. For more details, see the Nuxt UI Theme documentation and DashboardSidebar Theme section. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•4mo ago

@kapa.ai 1 -> does not work actually 2 -> works but it doesn't fix the issues across the board 3 -> this would be fine but my app needs two sidebars next to each other ideally i think i'd need to extend the class or have something like MyPrimarySidebar where ui props are passed explicitly to UDashboardSidebar, any UNavigationMenu inside and possibly even the UNavigationMenuItem entries :| alternatively any way of us extending UDashboardSidebar to add custom variants for our usecase?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct that simply applying a class or overriding the theme globally may not be sufficient for more complex scenarios, such as having multiple sidebars with different color schemes, or ensuring that nested components like UNavigationMenu and UNavigationMenuItem also inherit the correct styles. 1. Passing ui Props Explicitly Nuxt UI Pro components, including UDashboardSidebar and UNavigationMenu, support a ui prop that allows you to override slot classes on a per-instance basis. This is the recommended way to apply custom styles to individual components without affecting others. For example:

<UDashboardSidebar
  :ui="{
    root: 'bg-primary-700 text-white',
    header: 'bg-primary-800',
    body: 'bg-primary-700',
    footer: 'bg-primary-800'
  }"
>
  <UNavigationMenu
    :ui="{
      root: 'bg-primary-700 text-white',
      item: 'hover:bg-primary-600'
    }"
    :items="items"
  />
</UDashboardSidebar>

<UDashboardSidebar
  :ui="{
    root: 'bg-primary-700 text-white',
    header: 'bg-primary-800',
    body: 'bg-primary-700',
    footer: 'bg-primary-800'
  }"
>
  <UNavigationMenu
    :ui="{
      root: 'bg-primary-700 text-white',
      item: 'hover:bg-primary-600'
    }"
    :items="items"
  />
</UDashboardSidebar>

You can create your own wrapper component (e.g., MyPrimarySidebar) that passes these ui props down, ensuring consistency and reusability. 2. Extending UDashboardSidebar with Custom Variants The knowledge sources do not explicitly mention a built-in way to add custom variants directly to UDashboardSidebar via the theme config. The theme system is based on Tailwind Variants, and you can customize existing variants in app.config.ts, but adding entirely new custom variants (e.g., variant="primary") is not documented. However, you can override the slot classes for specific variants in your app.config.ts:

export default defineAppConfig({
  uiPro: {
    dashboardSidebar: {
      variants: {
        myPrimary: {
          root: 'bg-primary-700 text-white',
          header: 'bg-primary-800',
          body: 'bg-primary-700',
          footer: 'bg-primary-800'
        }
      }
    }
  }
})

export default defineAppConfig({
  uiPro: {
    dashboardSidebar: {
      variants: {
        myPrimary: {
          root: 'bg-primary-700 text-white',
          header: 'bg-primary-800',
          body: 'bg-primary-700',
          footer: 'bg-primary-800'
        }
      }
    }
  }
})

But there is no documentation confirming that you can add arbitrary new variant keys (like myPrimary)—the documented variants are for menu, side, and toggleSide only [DashboardSidebar Theme]. 3. The Most Reliable Approach Given the above, the most reliable and documented approach is to use the ui prop on each component instance, and to create wrapper components if you need to reuse the same style logic in multiple places. This also allows you to pass ui props to nested components like UNavigationMenu and UNavigationMenuItem. Summary - Use the ui prop for per-instance, per-slot styling—this is the most flexible and documented method. - You can create wrapper components to encapsulate your custom styles and logic. - The knowledge sources do not confirm support for adding arbitrary custom variants to UDashboardSidebar via the theme config. - For deeply nested components, pass the ui prop down as needed. For more on the ui prop and theming, see the Nuxt UI Theme documentation and DashboardSidebar Theme section. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SamKaizenOP•4mo ago

@kapa.ai mmm i think custom variants would make more sense for cases when u'd be reusing the component with those particular variants multiple times rt? given a sidebar is maybe used once or twice across the whole app.. it's probably not good to clutter the app.config.ts unnecessarily in either case 🤔

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're absolutely right—custom variants in the theme config are most beneficial when you need to reuse a component with the same style in multiple places. For components like a sidebar, which are typically used only once or twice in an app, it may not be necessary (or efficient) to add extra variants to your global app.config.ts. Instead, using the ui prop directly on the component instance or creating a small wrapper component for your specific use case keeps your configuration clean and focused. The knowledge sources confirm that the ui prop is designed for per-instance customization and is the recommended approach for fine-tuning individual components without cluttering the global theme config [Nuxt UI Theme]. There is no explicit documentation supporting the addition of arbitrary custom variants for UDashboardSidebar beyond the documented ones, so relying on the ui prop is both practical and in line with Nuxt UI Pro’s intended usage [DashboardSidebar Theme]. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Omnislash•4mo ago

I have two methods in mind My favorite one would be to use bg-inverted and text-inverted on it The second one (that I failed to do recently) would be to wrap your left bar in the dark class, it should put it in dark mode I dislike the second approach because you mind want a dark mode with a different navbar that will not look like the dark mode (and distort invert or use properly and having a lighter bar in dark mode) So I wouldn't "mix" light and dark and go with invert I'm currently creating a little tool to create a nuxt ui config, you can play around with it and see how invert react : https://nuxtheme.preprod.tech/theming

SamKaizenOP•4mo ago

mmm i'm playing with creating my own version using the templated slots like so.. it's a work in progress but i'm hopeful..

<UDashboardSidebar collapsible resizable :ui="{ body: 'flex flex-row p-0 gap-0' }" :min-size="4" :default-size="30"
    :max-size="40" :collapsed-size="4">
    <!-- NOTE : tailwind size --spacing var by default is 0.25rem while for the UDashboardGroup we have set unit as rem so for min-w-16 we need to set it to 0.25rem * 16 = 4rem -->

    <!-- we do not need the full width header -->
    <!-- <template #header="{ collapsed }">
      <h1>App Name</h1>
    </template> -->

    <!-- default body slot  -->
    <!-- the narrow coloured div always visible in lg and larger screens at least -->
    <div class="bg-primary text-inverted h-full min-w-16">
      <UNavigationMenu tooltip collapsed orientation="vertical" variant="link" :items="keyMenuItems" color="neutral"
        type="single" :ui="{ root: '' }">
        <template #components-leading>
          <-- TODO : Get icons to look larger by default, size-5 is tiny apparently -->
        </template>
      </UNavigationMenu>
    </div>
    <div class="flex-1"></div>
  </UDashboardSidebar>

<UDashboardSidebar collapsible resizable :ui="{ body: 'flex flex-row p-0 gap-0' }" :min-size="4" :default-size="30"
    :max-size="40" :collapsed-size="4">
    <!-- NOTE : tailwind size --spacing var by default is 0.25rem while for the UDashboardGroup we have set unit as rem so for min-w-16 we need to set it to 0.25rem * 16 = 4rem -->

    <!-- we do not need the full width header -->
    <!-- <template #header="{ collapsed }">
      <h1>App Name</h1>
    </template> -->

    <!-- default body slot  -->
    <!-- the narrow coloured div always visible in lg and larger screens at least -->
    <div class="bg-primary text-inverted h-full min-w-16">
      <UNavigationMenu tooltip collapsed orientation="vertical" variant="link" :items="keyMenuItems" color="neutral"
        type="single" :ui="{ root: '' }">
        <template #components-leading>
          <-- TODO : Get icons to look larger by default, size-5 is tiny apparently -->
        </template>
      </UNavigationMenu>
    </div>
    <div class="flex-1"></div>
  </UDashboardSidebar>

this is so cool!

Omnislash•4mo ago

Ooooh I don't know Nuxt UI Pro, only the free one, I like making my layouts myself. so I didn't considered how much is "wrapped" indeed. I guess template is the only way to go to fully customize what's inside thanks, happy you like it 🙂

SamKaizenOP•4mo ago

i don't know enough either i'm unleashing ai on it and testing :D like an example on the docs mentioned #components-trailing so seems like i ought to be able to do #components-leading too

Omnislash•4mo ago

if you fully change everything in it, isn't it faster to make your own ?

SamKaizenOP•4mo ago

is there a way to start from the default nuxt-ui config first or is that what it is loaded at first load? it's sometimes difficult figuring out which vars go where and impact what all stuff i don't want to give up on niceties like automatic mobile menus and resizing etc.. i'll customise only what i absolutely want to :P for the rest of it the baked in patterns are still pretty nice!

Omnislash•4mo ago

That's a good point, I should put the default nuxt ui colors by default XDXD It will not be the EXACT same because my code to generate the shades sucks at the moment, but the -500 will be the good ones indeed

SamKaizenOP•4mo ago

that's good enough coz it'd tell us oh ths one is the bit i need to tweak 👍 and also the generate shade part being inbuilt is COOL coz usually we only (painfully) manage to pick one brand color and maybe one accent color and a background shade :D that's the extent for me as a dev anyway

Omnislash•4mo ago

yeah same for me XDXD I was using this to generated my shades when needed for the main colors just : https://www.tints.dev I'll probably not make it as customisable but I think they use HSL to use the lightness amount to have clean shades

SamKaizenOP•4mo ago

saving link! thanks!

Omnislash•4mo ago

looks like that's the default colors https://tailwindcss.com/docs/colors

Colors - Core concepts

Using and customizing the color palette in Tailwind CSS projects.

Omnislash•4mo ago

I'm sure, they have a lot of repetition :/

SamKaizenOP•4mo ago

the default tailwind colors are known but the trouble is if u want to create a similar -50 to -950 paletter for a different shade and like yeah there are tools but it's cool to have it be integrated in a nuxt-ui config generator itself :)

Omnislash•4mo ago

yeah for sure 🙂 I think I'm not gonna put the default nuxt color by default because there is not much variety I'll add a "default nuxt colors" button though

SamKaizenOP•4mo ago

that works!

Omnislash•4mo ago

https://nuxtheme.preprod.tech/theming done 🙂 I didn't modified the muted/accented and all yet, but I'll change it by the nuxt default. Givent what it is, it'll be enough

Gaming

Programming

Dark or Coloured DashboardSidebar on light theme

Did you find this page helpful?