Appearance
Styling
Switching theme
Start by choosing one of the following themes:
js
import {
lightTheme, // Applied by default
pastelTheme,
materialTheme,
darkTheme,
slateTheme
} from 'notivue'
Switch to a different theme by passing it to the theme
prop:
vue
<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:
vue
<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
css
/* 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:
css
--nv-success-accent: #28b780; /* Or -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)
).