Skip to content

Vuetify-preset-rally

Rally is a personal finance app that uses Material Design components and Material Theming to create an on-brand experience with a data-driven aesthetic.

index.js 

require('./overrides.sass')

const preset = {
  theme: {
    dark: true,
    themes: {
      dark: {
        primary: '#1EB980',
        secondary: '#045D56',
        tertiary: '#FF6859',
        quaternary: '#FFCF44',
        quinary: '#B15DFF',
        senary: '#72DEFF',
      },
    },
  },
}

module.exports = { preset }

overrides.sass 

@import './variables.scss'

.theme--dark
  .v-card.v-sheet,
  .v-snack > .v-snack__wrapper
    box-shadow: $rally-box-shadow

  .v-card.v-sheet
    > .v-card__text,
    .v-card__subtitle
      color: $rally-text-color

  .v-tabs
    .v-tabs-slider
      background: $rally-tabs-slider-background

    .v-tab.v-tab--active
      color: $rally-text-color

  .v-navigation-drawer.v-navigation-drawer,
  .v-toolbar.v-toolbar
    background-color: map-get($material-dark, 'background')

  .v-dialog > .theme--dark.v-card.v-sheet
    background-color: $rally-dialog-background-color

variables.sass 

@import '~vuetify/src/styles/styles.sass';

// Rally specific variables
$rally-box-shadow: none;
$rally-dialog-background-color: #1F1E1F;
$rally-font-size: 16;
$rally-tabs-slider-background: transparent;
$rally-text-color: #FFFFFF;

// Preset variables
$body-font-family: 'Roboto Condensed', sans-serif;
$heading-font-family: 'Eczar', sans-serif;
$border-radius-root: 0;
$btn-font-size: #{14 / $rally-font-size}rem;
$btn-font-weight: 700;
$card-box-shadow: none;
$dialog-card-subtitle-padding: 24px;
$dialog-card-text-padding: 24px;
$dialog-card-title-padding: 24px;
$dialog-elevation: 0;
$headings: (
  'h1':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{96 / $rally-font-size}rem,
    'weight': 300
  ),
  'h2':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{60 / $rally-font-size}rem,
    'weight': 300
  ),
  'h3':(
    'font-family': $heading-font-family,
    'letter-spacing': initial,
    'size': #{48 / $rally-font-size}rem,
    'weight': 400
  ),
  'h4':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{34 / $rally-font-size}rem,
    'weight': 400
  ),
  'h5':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{24 / $rally-font-size}rem,
    'weight': 400
  ),
  'h6':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{20 / $rally-font-size}rem,
    'weight': 500
  ),
  'subtitle-1':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{16 / $rally-font-size}rem,
    'weight': 400
  ),
  'subtitle-2':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{14 / $rally-font-size}rem,
    'weight': 500
  ),
  'body-1':(
    'font-family': $heading-font-family,
    'letter-spacing': initial,
    'size': #{16 / $rally-font-size}rem,
    'weight': 400
  ),
  'body-2':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{14 / $rally-font-size}rem,
    'weight': 300
  ),
  'caption':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{12 / $rally-font-size}rem,
    'weight': 400
  ),
  'overline':(
    'font-family': $body-font-family,
    'letter-spacing': initial,
    'size': #{10 / $rally-font-size}rem,
    'weight': 400
  )
);
$material-dark: (
  'status-bar': (
    'regular': #27272f
  ),
  'background': #33333d,
  'cards': #373740,
  'dividers': #33333d,
  'tabs': rgba(255, 255, 255, .3)
);
$material-light: (
  'dividers': rgba(255, 255, 255, .12)
);
$navigation-drawer-border-width: 0;
$snackbar-background-color: rgba(39, 39, 47, .9);
$tab-font-size: 1.25rem;
$tab-font-weight: 500;
$tabs-item-min-width: 0;
$tabs-bar-background-color: map-get($material-dark, 'background');

Colors

Rally-color-system.png

Color Theme

Rally-color-theme.png

JavaScript Color Code 

const rallyColors = {
  green: {
    50: '#b6fff2',
    100: '#88fee1',
    200: '#5df7d2',
    300: '#37efba',
    400: '#00e5a8',
    500: '#1eb980',
    600: '#009c68',
    700: '#007d51',
    800: '#005f35',
    900: '#00391e',
  },
  cyan: /*DarkGreen*/ {
    50: '#deeeee',
    100: '#b7e1e1',
    200: '#8bd8d9',
    300: '#56d1ca',
    400: '#15d1c6',
    500: '#00aea4',
    600: '#00837b',
    700: '#045d56',
    800: '#004940',
    900: '#00312a',
  },
  orange: {
    50: '#ffd7d0',
    100: '#ffb3a6',
    200: '#ff857c',
    300: '#ff6859',
    400: '#ff3522',
    500: '#ff0600',
    600: '#df0000',
    700: '#b50000',
    800: '#8c0000',
    900: '#620002',
  },
  yellow: {
    50: '#fff8e5',
    100: '#ffebb0',
    200: '#ffdc78',
    300: '#ffcf44',
    400: '#ffbc2b',
    500: '#ffac12',
    600: '#ff8500',
    700: '#ff7000',
    800: '#f75500',
    900: '#e83400',
  },
  purple: {
    50: '#decaf7',
    100: '#cb9af8',
    200: '#b15dff',
    300: '#a932ff',
    400: '#a500ff',
    500: '#a000f1',
    600: '#9200c8',
    700: '#7f009f',
    800: '#63007c',
    900: '#460052',
  },
  blue: {
    50: '#eafdff',
    100: '#b2f2ff',
    200: '#72deff',
    300: '#5cceff',
    400: '#42c6ff',
    500: '#24b4ff',
    600: '#009bff',
    700: '#0082fb',
    800: '#0077e5',
    900: '#005ccc',
  },
};

See also

Favorite site