Styling

Switching theme

Start by choosing one of the following themes:

import {
  lightTheme, // Applied by default
  pastelTheme,
  materialTheme,
  darkTheme,
  slateTheme
} from 'notivue'

Switch to a different theme by passing it to the theme prop:

<script setup>
import {
  Notivue,
  Notification,
  pastelTheme
} from 'notivue'
</script>

<template>
  <Notivue v-slot="item">
    <Notification
      :item="item"
      :theme="pastelTheme" 
    />
  </Notivue>

  <!-- RouterView, etc. -->
</template>

Editing / creating a theme

This is the recommended way to adapt built-in notifications to your design. Each theme is just an object holding some CSS variables.

Themes are designed to be highly customizable by just setting a few key variables. In addition to that, you have type-safety and autocompletion in your IDE.

For example, this is the theme in use on this website:

<script setup lang="ts">
import { Notivue, Notification, slateTheme, type NotivueTheme } from 'notivue'

const theme: NotivueTheme = {
  ...slateTheme,
  '--nv-global-bg': '#1c1d20',
  '--nv-global-border': '#313237',
  '--nv-radius': '0.25rem',
  '--nv-tip-width': '3px',
  '--nv-icon-size': '1.15rem'
}
</script>

<template>
  <Notivue v-slot="item">
    <Notification :item="item" :theme="theme" />
  </Notivue>
  <!-- ... -->
</template>

Push:

Theme Object

const theme = {
  // Layout
  '--nv-width': '350px', // Automatically set to 100% on mobile devices
  '--nv-min-width': 'auto', // Minimum width
  '--nv-spacing': '0.625rem', // Padding and column gap
  '--nv-y-align': 'center', // Icon and close button vertical alignment: flex-start, flex-end
  '--nv-y-align-has-title': 'center', // Icon and close button vertical alignment when title is present
  '--nv-radius': '0.75rem', // Container border radius
  '--nv-border-width': '1px', // Container border width
  '--nv-icon-size': '1.25rem', // Icon and close button size
  '--nv-title-size': '0.925rem', // Title font size
  '--nv-message-size': '0.925rem', // Message font size
  '--nv-shadow': '0 0.5rem 0.5rem rgba(0, 0, 0, 0.1)', // Container box shadow
  '--nv-tip-width': '0px', // Tip width, will inherit accent color
  '--nv-progress-height': '4px', // Progress bar height

  // Colors
  '--nv-global-bg': '#fff', // Container background
  '--nv-global-fg': '#000', // Title, message, close icon color
  '--nv-global-accent': '#28b780', // Icon and tip color
  '--nv-global-border': '#000' // Container border color
}

Each notification type may have its own colors which take precedence over global ones:

const theme = {
  ...slateTheme,
  '--nv-success-accent': '#28b780', // And -bg, -fg, -border
  '--nv-error-accent': '#e74c3c',
  '--nv-warning-accent': '#f59e0b',
  '--nv-info-accent': '#3b82f6',
  '--nv-promise-accent': '#6366f1'
}

Recommendation

If you struggle to reach the desired result by editing/creating the theme, that's a good sign that you should consider using Custom Components instead.

Font Family

The font-family is inherited from the parent element (html < body < ol (Notivue Root)).