Customization

Default Theme

Default css variables are ( --r-b1 & --r-b2 are background colors ):

:root {
  // colors
  --r-prm: 0, 168, 255;
  --r-red: 235, 59, 90;
  --r-green: 38, 222, 129;
  --r-yellow: 247, 159, 31;
  --r-gray: 249, 250, 251;
  --r-b1: 246, 246, 246;
  --r-b2: 255, 255, 255;
  --r-text: 18, 18, 18;
  --r-disabled: 116, 125, 140;
  --r-hover: 140, 140, 140;
  --r-border-color: 60, 60, 60;
  --r-shadow-color: 140, 140, 140;

  --r-radius: 6px;
  --r-radius-2: 14px;
  --r-space-1: 4px;
  --r-space-2: 8px;
  --r-space-3: 14px;
  --r-space-4: 22px;
  --r-space-5: 38px;
  --r-normal-padding: 8px 12px;
  --r-font-large: 1.18rem;
  --r-font-xlarge: 1.25rem;
  --r-font-small: 0.86rem;
  --r-font-xsmall: 0.74rem;
  --r-element-min-height: 32px;
  --r-border-width: 1px;
  --hover-alpha: 0.3;
  --r-shadow-alpha: 0.2;
  --r-disabled-alpha: 0.8;
  --r-duration: 0.2s;
  --light-alpha: 0.2;
  --info-alpha: 0.8;
  --disabled-alpha: 0.8;
  --border-alpha: 0.2;
  --border-active-alpha: 0.4;
  --r-focused-box-shadow-specs: 0px 0px 0px 2px;

  // shadows & borders
  --shadow: 0px 2px 6px -2px rgba(var(--r-shadow-color), var(--r-shadow-alpha));
  --border: 0 0 0 var(--r-border-width) rgba(var(--r-border-color), var(--border-alpha));
  --border-active: 0 0 0 var(--r-border-width) rgba(var(--r-border-color), var(--border-active-alpha));
  --popup-underlay-opacity: 0.2;
}
.dark {
  --r-gray: 22, 27, 33;
  --r-b1: 18, 18, 18;
  --r-b2: 30, 30, 30;
  --r-text: 246, 246, 246;
  --r-disabled: 116, 125, 140;
  --r-hover: 180, 180, 180;
  --r-border-color: 200, 200, 200;
  --r-shadow-color: 60, 60, 60;

  --shadow: 0px 2px 6px -2px rgba(var(--r-shadow-color), var(--r-shadow-alpha));
  --border: 0 0 0 1px rgba(var(--r-border-color), var(--border-alpha));
  --border-active: 0 0 0 1px rgba(var(--r-border-color), var(--border-active-alpha));
  --popup-underlay-opacity: 0.5;
}
prm
red
green
yellow

Custom Theme

CSS

To use your own theme you need to override the default theme colors provided by sevue, this can happen by setting your own css variables in :root or any parent element. The syntax should be rgb color without parantheses nor rgb. For example the color rgba(0, 168, 255) should be used as 0, 168, 255.

:root {
  --r-prm: 46, 204, 113;
  --r-red: 192, 57, 43;
  --r-text: 0, 0, 0;
}
.dark {
  --r-text: 255, 255, 255;
}

JavaScript

You can change the default colors using Javascipt by passing it into options. Accepted Formats are HEX, RGBA and RGB

app.use(Sevue, {
  colors: {
    prm: "#1abc9c",
    red: "rgb(211, 84, 0)",
    green: "rgb(39, 174, 96)",
    red: "rgba(241, 196, 15, 1.0)",
  },
});

Icons

Sevue does not use any icon packs by default, if you don't set any icon prefix classname it will use bx which is for boxicons. You will need to install and import it:

npm i boxicons # or yarn add boxicons
import "boxicons/css/boxicons.min.css";

Using a different icon library

In order to configure the icon set, pass iconPrefix to options when installing.

app.use(Sevue, {
    iconPrefix: 'fa'
  },
});

By result the rendered icon element will be <i :class="['fa', icon] "></i>

You can also pass an empty string if you don't want any icon prefixes.

Disabling Ripple

The Ripple Effect is using vue-material-design-ripple directive. You can disable by setting ripple: false in options.

app.use(Sevue, {
    ripple: false
  },
});
Table of Contents