Discord-Dashboard Tutorial #2.3: Theme Customization

Okay, now that you know how the Discord-Dashboard works by design… Time to configure the look!

Each theme is customizable in its own way and to its own degree. This means that you have the option to customize the text, images, and even the design in fact.

We cover the dbd-dark-dashboard theme in this tutorial.

Default customization

Changing the text is trivial, because in config Theme you just change some values in a trivial way. The basic config for dark theme looks like this, and is fully editable:

theme: DarkDashboard({
        information: {
            createdBy: "iMidnight",
            websiteTitle: "iMidnight",
            websiteName: "iMidnight",
            websiteUrl: "https:/www.imidnight.ml/",
            dashboardUrl: "http://localhost:3000/",
            supporteMail: "[email protected]",
            supportServer: "https://discord.gg/yYq4UgRRzz",
            imageFavicon: "https://www.imidnight.ml/assets/img/logo-circular.png",
            iconURL: "https://www.imidnight.ml/assets/img/logo-circular.png",
            loggedIn: "Successfully signed in.",
            mainColor: "#2CA8FF",
            subColor: "#ebdbdb",
            preloader: "Loading..."
        },
    
        index: {
            card: {
                category: "iMidnight's Panel - The center of everything",
                title: `Welcome to the iMidnight discord where you can control the core features to the bot.`,
                image: "https://i.imgur.com/axnP93g.png",
                footer: "Footer",
            },
            
            information: {
                category: "Category",
                title: "Information",
                description: `This bot and panel is currently a work in progress so contact me if you find any issues on discord.`,
                footer: "Footer",
            },
            
            feeds: {
                category: "Category",
                title: "Information",
                description: `This bot and panel is currently a work in progress so contact me if you find any issues on discord.`,
                footer: "Footer",
            },
        },

        commands: [
            {
                category: `Starting Up`,
                subTitle: `All helpful commands`,
                list: [{
                    commandName: 'bug',
                    commandUsage: `;bug <bug>`,
                    commandDescription: `test`,
                    commandAlias: 'No aliases'
                },
                {
                    commandName: "2nd command",
                    commandUsage: "oto.nd <arg> <arg2> [op]",
                    commandDescription: "Lorem ipsum dolor sth, arg sth arg2 stuff",
                    commandAlias: "Alias",
                },
                {
                    commandName: "Test command",
                    commandUsage: "prefix.test <arg> [op]",
                    commandDescription: "Lorem ipsum dolor sth",
                    commandAlias: "Alias",
                },
                ],
            },
        ],
})

As you can see, by customizing things in config you can also change the colors of text, elements, and even images (as a URL, so you can use our CDN for images).

Optional Customization

These settings are magic – with them you can change not only the basic settings, but also choose from the available components the one that suits you best and/or add tags, custom HTML, etc.

custom_html: {
    head: "",
    body: "",
},
guilds: {
    cardTitle: "Guilds",
    cardDescription: "Here are all the guilds you currenly have permissions for:",
    type: "blurlist"
},
guildInfo: {
    cardTitle: "Server Information",
    cardDescription: "An overview about your server",
},
guildSettings: {
    cardTitle: "Guilds",
    cardDescription: "Here you can manage all the settings for your guild:",
    customFooterCard: {
        subtitle: "tes",
        title: "test",
        customHTML: "html",
        footer: "footer",
    }
},
popupMsg: {
    savedSettings: "Saved settings", 
    noPerms: "Error",
},
sidebar: {
    keepDefault: true,
        list: [{
            icon: `<svg style="position: absolute; margin-left: 8px; margin-top: 2px;" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#2CA8FF">    <path d="M0 0h24v24H0z" fill="none"/> <path d="M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0  0 0 1.74-1 10 10 0 0 0-.27-10.44z"/> <path d="M10.59 15.41a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z"/></svg>`,
            title: "Title",
            link: "/commands",
            id: "commands",
        }]
},

Theme Options

There is also an option to customize elements even just for this theme. Just add themeOptions to the options!

...
//This must be defined in the first switch option: 
themeOptions: {
    minimalbutton: {
        first: true,
    }
}
...
...
//This must be defined in all switches except the first and last switch option
themeOptions: {
    minimalbutton: true
}
...
...
//This must be defined in the last switch option: 
themeOptions: {
    minimalbutton: {
        last: true,
    }
}
...

And those aren’t the only capabilities of Themes, so make sure you always read their documentation (e.g. here’s the dbd-dark-dashboard documentation) to use them to their full potential.

Table of Contents