Customize

Dashpro is designed to be flexible and easy to customize. Whether you’re looking to create a unique style, add new JavaScript functionality, or modify the default color and typography, Dashpro provides a solid foundation for tailoring your admin dashboard to fit your project’s needs.

How to Create a New Style

One of the key features of Dashpro is its reliance on Tailwind CSS for styling. This utility-first approach allows you to create new styles quickly by either extending the Tailwind framework or adding custom CSS. Below, we’ll cover two methods: editing the core Tailwind styles and applying custom CSS directly in your HTML files.

To create a new style within the Tailwind framework, open the src/tailwindcss/tailwindcss.css file. You can define your custom class here, using Tailwind’s @apply directive to apply utilities to your custom class. For example, to create a class that adds relative positioning, you can write:

                  
                    .test-class {
                      @apply relative;
                    }

This should be added after the Tailwind directives:

                  
                    @tailwind base;
                    @tailwind components;
                    @tailwind utilities;

Alternatively, You can easily modify the style used in html by replacing Tailwind's utility classes.

How to Create a New Javascript

Customizing Dashpro’s interactivity is simple with JavaScript. You have multiple options for adding functionality, from using Alpine.js to writing vanilla JavaScript. Alpine.js is a lightweight framework that works perfectly alongside Tailwind and is ideal for small, reactive components without needing a build step.

To use Alpine.js, you can add JavaScript directly in your HTML file. For example, to create a toggle button for hiding and showing content, you can use Alpine.js as follows:

                  
                    <div x-data="{ open: false }">
                      <button @click="open = !open">Toggle Content</button>
                      <div x-show="open">This content is visible when open is true.</div>
                    </div>

If you prefer to write your custom JavaScript without using any framework, you can do so by placing the script just before the closing </body> tag. This ensures that your JavaScript is loaded after the DOM is fully parsed, allowing it to manipulate any elements on the page.

                  
                    document.addEventListener('DOMContentLoaded', () => {
                      const button = document.querySelector('#toggleButton');
                      const content = document.querySelector('#content');

                      button.addEventListener('click', () => {
                        content.classList.toggle('hidden');
                      });
                    });

Custom Color

Tailwind CSS provides a highly customizable color system. You can easily modify the default colors used in Dashpro by replacing Tailwind's utility classes with the desired color values. For instance, if you want to change the purple color scheme to blue, you can do this directly in your HTML by replacing:

                  
                    <div class="text-purple-500">

With:

                  
                    <div class="text-blue-500">

Additionally, if you wish to extend Tailwind's default color palette, you can do so in the tailwind.config.js file by adding custom colors under the theme.extend.colors key.

Custom Skin / Dark Mode

Dashpro comes with built-in support for dark mode. To enable dark mode, simply add the dark class to the <html> element. Here's an example of how to enable dark mode globally across your application:

                  
                    <html class="dark" lang="en">

This will activate dark mode and apply Tailwind's dark color scheme to all elements that utilize the dark: prefix for their styling. For example, a text color class like text-gray-800 can be changed to dark:text-gray-100 when dark mode is active.

Edit Default Font

Tailwind allows you to customize the default font used throughout your project. To change the font, open the tailwind.config.js file and modify the fontFamily key within the theme section. For example, to use the "Nunito Sans" font for sans-serif elements and "Merriweather" for serif elements, you can add the following configuration:

                  
                    theme: {
                      extend: {},
                      fontFamily: {
                        sans: ['Nunito Sans', 'sans-serif'],
                        serif: ['Merriweather', 'serif'],
                      },
                    }

Additionally, ensure that you include the Google Fonts link in the <head> section of your HTML:

                  
                    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

This will load the desired font styles, ensuring that they are applied correctly to your text elements.