CSS Guide - attempting to change color scheme

Hi everyone,

Just getting started with Vue Storefront. Had some issues with loading the docker version, currently just using the demo site to test out the theming side of things. A tad confused, coming from a shopify background and with some exposure to react.js and not much else, how on earth do I make changes to the css?

I want to take the template theme and make the colour scheme completely different along with the fonts.

Cheers!

Hi,

It’s best to start by making your own theme, if you haven’t already.
https://docs.vuestorefront.io/guide/core-themes/themes.html

Color settings are defined in [theme]/css/variables/_colors.scss. You can define new Primary, Secondary, and Accent colors for text, backgrounds and borders. If you need to do more than that, it get’s a bit more complicated. Anyway, you’ll also need to be familiar with SASS / Sassy CSS.

Font settings are in [theme]/css/variables/_typography.scss

There’s more information here
https://docs.vuestorefront.io/guide/core-themes/stylesheets.html

A custom theme doesn’t have to use the same technology stack, but I think it’s a good place to start :slight_smile: