Styling

The default stylesheet gives drawers a complete look out of the box. Customize it through CSS variables, or target the data attributes the container renders for anything the variables don't cover.

Including the Styles

Import the stylesheet once, next to where you install the instance:

main.ts

import '@drawerly/vue/style.css'

CSS Variables

All visual aspects are controlled by CSS variables defined on [data-drawerly-root]:

[data-drawerly-root] {
  --drawerly-backdrop-bg: rgba(0, 0, 0, 0.7);
  --drawerly-panel-bg: #1e1e1e;
  --drawerly-panel-width: 500px;
  --drawerly-panel-radius: 12px;
  --drawerly-transition-duration: 250ms;
  --drawerly-z-index: 1000;
}

The full list of variables and data attributes is in the core styling reference.

Dark Mode

Scope the variables to your theme selector:

:root[data-theme="dark"] [data-drawerly-root] {
  --drawerly-backdrop-bg: rgba(0, 0, 0, 0.8);
  --drawerly-panel-bg: #1e1e1e;
}

The same works with @media (prefers-color-scheme: dark).

Drawer Content

Your component fills the panel, so its layout is ordinary Vue styling. A typical drawer stretches to full height with a scrollable body:

<template>
  <div class="drawer">
    <header>...</header>
    <div class="body">...</div>
  </div>
</template>

<style scoped>
.drawer {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.body {
  flex: 1;
  overflow-y: auto;
}
</style>

Going Further

If variable overrides aren't enough, you can replace the stylesheet entirely and keep all the behavior. See Unstyled Mode.