Custom Theme

If the base Vault themes don't fit your project, you can configure your own color theme. Check the custom light and custom dark themes in the snippet below:

To make a custom theme of your own, you need to override the values of the internal CSS variables as follows:

<style>    [data-dhx-theme='custom-theme-dark'] {
        /* font */
        --dhx-font-color-primary: var(--dhx-color-gray-200);
        --dhx-font-color-secondary: var(--dhx-color-gray-400);
        /* end font */
 
        /* border */
        --dhx-border-color: #007a99;
        /* end border */
 
        /* color scheme */
        --dhx-h-primary: 45;
        --dhx-s-primary: 100%;
        --dhx-l-primary: 35%;
 
        --dhx-h-secondary: 185;
        --dhx-s-secondary: 5%;
        --dhx-l-secondary: 50%;
 
        --dhx-h-danger: 330;
        --dhx-s-danger: 65%;
        --dhx-l-danger: 50%;
 
        --dhx-h-success: 175;
        --dhx-s-success: 60%;
        --dhx-l-success: 40%;
 
        --dhx-h-background: 190;
        --dhx-s-background: 100%;
        --dhx-l-background: 10%;
        /* end color scheme */
 
        /* theme colors */
        --dhx-background-primary: hsl(
            var(--dhx-h-background), 
            var(--dhx-s-background), 
            var(--dhx-l-background)
        );
        --dhx-background-secondary: hsl(
            var(--dhx-h-background), 
            var(--dhx-s-background), 
            calc(var(--dhx-l-background) + 8%)
        );
        --dhx-background-additional: hsl(
            var(--dhx-h-background), 
            var(--dhx-s-background), 
            calc(var(--dhx-l-background) + 12%)
        );
        /* end theme colors */
    }
</style>
 
<script>    const vault = new dhx.Vault("vault_container", {
        uploader: {
            target: "https://docs.dhtmlx.com/vault/backend/upload"
        },
        downloadURL: "https://docs.dhtmlx.com",
    });
 
    dhx.setTheme("custom-theme-dark");
</script>