How to change vuexy color dynamically with laravel
Hello, in this blog we will get to know how you can check the color of vuexy dynamically.
Below I am writing a bit about the vuexy
Basically Vuexy – Vuejs, Next.js, HTML, Laravel, ASP.NET & Django Admin Dashboard Template for creating SPA website using ready made template
If you see the vuexy color pattern it's running on top of bootstrap vue and colors are managed via _variables.scss file, so definitely you can't make those preprocessor files dynamic.
So for that reason you have create you own .css file where you can write code and we can make that file dynamically via laravel.
Step : 1 Create A file
Create a file named as custom.css and put it into the public/css folder of your project.
Step: 2 Add the below code into it
Next thing is in that file add the below code
:root .text-primary {
color: #ff5722 !important;
}
:root .bg-primary {
background-color: #ff5722 !important;
}
:root .border-primary {
border-color: #ff5722 !important;
}
:root .btn-primary {
background-color: #ff5722 !important;
border-color: #ff5722 !important;
color: #fff !important;
}
:root .btn-primary:hover,
:root .btn-primary:focus,
:root .btn-primary:active {
background-color: #e64a19 !important;
border-color: #e64a19 !important;
color: #fff !important;
}
:root .alert-primary {
background-color: #ff5722 !important;
border-color: #ff5722 !important;
color: #fff !important;
}
:root .badge-primary {
background-color: #ff5722 !important;
color: #fff !important;
}
:root .list-group-item-primary {
background-color: #ff5722 !important;
color: #fff !important;
}
:root .text-bg-primary {
background-color: #ff5722 !important;
color: #fff !important;
}
Step: 4 give path in app.blade.php
Go to app.blade.php and pass the path of your CSS file, and then do shift + ctrl+ r to see the changes
Below I am adding just a code snippet over how you can create this thing dynamically via laravel
📁 1. Create a blade-style string for the CSS
In a controller or service, generate the CSS string:
public function generateCustomCss()
{
$primary = '#ff5722';
$primaryHover = '#e64a19';
$textOnPrimary = '#fff';
$css = <<<CSS
:root .text-primary {
color: {$primary} !important;
}
:root .bg-primary {
background-color: {$primary} !important;
}
:root .border-primary {
border-color: {$primary} !important;
}
:root .btn-primary {
background-color: {$primary} !important;
border-color: {$primary} !important;
color: {$textOnPrimary} !important;
}
:root .btn-primary:hover,
:root .btn-primary:focus,
:root .btn-primary:active {
background-color: {$primaryHover} !important;
border-color: {$primaryHover} !important;
color: {$textOnPrimary} !important;
}
:root .alert-primary {
background-color: {$primary} !important;
border-color: {$primary} !important;
color: {$textOnPrimary} !important;
}
:root .badge-primary {
background-color: {$primary} !important;
color: {$textOnPrimary} !important;
}
:root .list-group-item-primary {
background-color: {$primary} !important;
color: {$textOnPrimary} !important;
}
:root .text-bg-primary {
background-color: {$primary} !important;
color: {$textOnPrimary} !important;
}
CSS;
// Save to public path
file_put_contents(public_path('css/custom-overrides.css'), $css);
return response()->json(['message' => 'CSS override file generated.']);
}
🛠️ 2. Route to trigger the generation (optional)
Route::get('/generate-css', [YourController::class, 'generateCustomCss']);
You can call this endpoint after changing color settings in your admin panel.
I hope this blog post help you to understand how you can set your vuexy primary color dynamically if you need hand we are open to help you.
