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

/* 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:

--nv-success-accent: #28b780; /* Or -bg, -fg, -border */
--nv-error-accent: #e74c3c;
--nv-warning-accent: #f59e0b;
--nv-info-accent: #3b82f6;
--nv-promise-accent: #6366f1;

Font family

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