Theming and Styles

Theming and Styles

Selldone Components are styled with Vuetify 3 plus a global SCSS bundle. Brand colors come from meta tags in your Layout's index.html, so one build can serve many shops with different colors. This page covers the Vuetify instance, theme colors, icon fonts and the global styles.

The Vuetify instance

VuetifyInstance(i18n) from @selldone/components-vue/plugins/vuetify/vuetify creates a Vuetify instance with:

• all Vuetify components and directives,
• light (default) and dark themes,
• the Material Design icon set (md, default) and Font Awesome (fa),
• a vue-i18n locale adapter, so Vuetify follows the active language (including right-to-left languages),
• vuetify-override.scss, which sets the root font size to 15px and the body font family to Inter.

import { VuetifyInstance } from "@selldone/components-vue/plugins/vuetify/vuetify";

const vuetify = VuetifyInstance(i18n);
app.use(vuetify);

Theme colors

Both themes use these colors:

Vuetify color	Source
primary	<meta name="color--theme-light"> (default #70557e)
secondary	<meta name="color--theme-dark"> (default #3a2c41)
accent	#FFA000
error	#FF5252
info	#9964e3
success	#4CAF50
warning	#FFC107

Set the meta tags in your index.html:

<meta name="color--theme-light" content="#70557e">
<meta name="color--theme-dark" content="#3a2c41">
<meta name="color--theme-deep-dark" content="#261b2d">
<meta name="color--theme-info" content="#9964e3">

The Storefront fills them from the environment variables VITE_APP_SAMPLE_THEME_COLOR_LIGHT, VITE_APP_SAMPLE_THEME_COLOR_DARK, VITE_APP_SAMPLE_THEME_COLOR_DEEP_DARK and VITE_APP_SAMPLE_THEME_COLOR_INFO in its .env file. If a tag is missing, Core's SetupService.GetMetaValue() looks for the same key in window.selldone_config, and then falls back to the defaults above.

Theme colors in components

TemplateMixin (@selldone/components-vue/mixin/template/TemplateMixin.ts) exposes the colors as data: ThemeColorLight, ThemeColorDark, ThemeColorDeepDark and ThemeColorInfo. It also adds isMobile and isStandalone (installed PWA) computed values.

To override the colors at runtime, define window.CUSTOME_TEMPLATE before the app mounts:

window.CUSTOME_TEMPLATE = {
  color_light: "#0061e0",
  color_dark: "#0b2545",
  color_deep: "#061528",
  color_info: "#13b5ea",
};

When this object exists, TemplateMixin uses its values instead of the meta tags. (The property name is spelled CUSTOME_TEMPLATE in the code.)

Icon fonts

Components use Material icon names (<v-icon>shopping_cart</v-icon>) and Font Awesome classes (fa:fas fa-angle-left). Load both in your entry file:

import "@fortawesome/fontawesome-free/css/all.css";
import "@selldone/components-vue/style/fonts/material-design-fonts/material-design-icons.scss";

For Persian, the Storefront also loads @selldone/components-vue/style/fonts/lang/fa/lang-fa-iransans.css.

Direction-aware icon names (for example arrow_back vs arrow_forward) come from the icons pack in Translate (global/icons/ltr and global/icons/rtl).

Global SCSS

createComponents() imports style/components.scss, which pulls in the shared Selldone styles: buttons, widgets, cards, animations and transitions, borders, overlays, ratios, responsive helpers, landing page styles, markdown, article and community styles, uploader styles and dynamic backgrounds. Class names from these files are used throughout the components, so keep the stylesheet loaded.

Dark sections and contrast

Many components accept a dark prop (for example UPrice) for use on dark backgrounds. Check a component's props for theme options before overriding styles with CSS.

Next steps

• Directives and Services
• Component Families
• Storefront wiki
• FAQ