Change THEME_DEFAULTS

[moebaca]

Hey I'd like to change the primary color in the public/js/admin.js file, but every time I change the color to a different value my PHPStorm says its been changed and then within moments it goes back to saying nothing has changed and I cannot commit the changes.

I am not familiar with webpack or any of the preprocessor tools that this project incorporates. Is this webpack's doing? Is there any way I can change this value and keep it persistent to commit to version control?

Thanks.

[Kroskinski]

You shouldn't edit the files in public/js, as they will be overwritten.

Edit the file in "resources/js/admin/admin.js"and after that run "npm run dev" or "npm run watch" or "npm run prod". This will create the files in "public/admin/js". (And overwrite the existing files there.)

Hope this helps.

[moebaca]

Inside of resources/js/admin/admin.js how would I add the THEME_DEFAULTS object in order to override it in the generated public/js/admin.js?

Just adding this towards the end of the resources file doesn't accomplish it.

var THEME_DEFAULTS = { primary: '#BF360C', secondary: '#424242', accent: '#82B1FF', error: '#FF5252', info: '#2196F3', success: '#4CAF50', warning: '#FB8C00' // orange.darken1 };

I also tried adding the THEME_DEFAULTS object inside the data section of the vue code in resources/js/admin/admin.js to no avail.

I just can't find where the THEME_DEFAULTS is set at all besides the final output inside of the public/js/admin.js

Thanks in advance for any help.

[moebaca]

I've found where the THEME_DEFAULTS is initially set. It's deep into the node_modeules under Vuetify/mixins/theme.ts..

Unfortunately I can't modify this file as its not in version control. So I guess my question is the same as the last post. How could I override the values inside of the admin.js you've mentioned above?

Thanks again.

[Kroskinski]

In resources/js/admin/admin.js change the default to

Vue.use(Vuetify, { theme: { primary: '#3f51b5', secondary: '#b0bec5', accent: '#8c9eff', error: '#b71c1c' } })

That should do the trick. (Sorry for short answer, doing this from my phone.)

[moebaca]

Inside of resources/js/admin/admin.js I tried the following based off your feedback and ran 'npm run dev' each change:

1) Modified:

Vue.use(Vuetify); to look like:

Vue.use(Vuetify, {
    theme: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c'
    }
});

2) Removed the stuff from first attempt and set it back to Vue.use(Vuetify); then right below that I wrote this block:

Vue.use(Vuetify, {
    theme: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c'
    }
});

====

Neither of those approaches ended up changing the public/js/admin.js output after 'npm run dev'.

Wish I knew more about this topic to be of more help.

[darryldecode]

Hello, all points mentioned above by @Kroskinski are correct. Those are the right thing to do and do not touch anything in public folder since they will be overwritten. Those vue theme config actually work, it's just that some buttons weren't utilizing those variables for themes. Like other buttons are using class blue instead of primary. So it's taking effect on some UX. I will try to replace those hardcoded color classes in some UX and will push later.

[darryldecode]

And you can actually just change any button or UX color classes on any color you want and then just recompile. It's all up to you.

[moebaca]

Interesting. I will take a more thorough look around as I was mostly just searching anywhere in the repo where #1976D2 was being used. But you've now brought up that things might have been hard coded to 'blue darken-2' instead, which is definitely possible. I'll look around and report.

My main goal is to change the visited links (for example on the side menu bar) from blue to a color of my choosing (in my case, red).

Thanks for the feedback regardless my dudes!

[moebaca]

Okay so I had a gut feeling when I did it again today that it was going to work. Don't ask my why the magic wasn't working for me yesterday! Ha... I am truly just going to not care and move on. Hopefully this ticket helps someone down the road with the same question.

Thanks for the fix, here is all I had to do to my admin.js under resources which I had mentioned I tried the other day:

Change:

Vue.use(Vuetify);

to:

Vue.use(Vuetify, {
    theme: {
        primary: '#BF360C',
        secondary: '#424242',
        accent: '#82B1FF',
        error: '#FF5252',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FB8C00' // orange.darken1
    }
});