Codey

Appearance

Installation ​

This package provides the theme setup for PrimeVue back-office applications. It contains the required tailwindcss plugin to set the correct theme tokens. The custom prime theme is available on the codey CDN.

bash
npm i @xerius/back-office-theme

Setup tailwindcss config ​

In your tailwind.config.js file, add the backOfficeThemePlugin and extend the scanned content to include the primevue components. The darkMode should be set to 'class' to enable the dark mode switcher.:

js
// tailwind.config.js
import { xeriusTailwindPlugin } from "@xerius/back-office-theme";

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}",
  ],
  plugins: [xeriusTailwindPlugin],
  darkMode: "class",
};

Using the theme CDN ​

The custom prime theme is available on the codey CDN. To use it, add the following link to your index.html file:

Note

As this is set in the base index.html file, there is no access to javascript to provide the codey cdn url or back-office-theme package version used. This is why the url will be hard coded and should be updated along with the package version.

Be aware

The extra style element containing the @layer directive is required to ensure the correct order of the css. In case the css files are not loaded in the correct order, the theme & tailwind combo will fail. This statement ensure the layer configuration is the frist thing that is set.

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->
    <style type="text/css">
      @layer tailwind-base, primevue, tailwind-utilities;
    </style>
    <link
      id="theme-link"
      rel="stylesheet"
      type="text/css"
      href="https://cdn.xerius.be/back-office-theme/1.0.0/xerius-light/theme.min.css"
    />
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>