This might be an extremely naive question but does anyone has managed to adjust the colour themes in the front end? I don’t really have experience in Vue but havent been able to adjust things outside the Vuetify.js file
The frontend component uses the Vuetify plugin for Vue.
The current implementation hosts all the global colour theming in the the Vuetify plugin itself.
You can find this in: speckle-server/packages/frontend/src/plugins/vuetify.js
theme: {
options: { customProperties: true },
dark: isDarkMode,
themes: {
light: {
primary: '#047EFB', //blue
secondary: '#7BBCFF', //light blue
accent: '#FCF25E', //yellow
error: '#FF5555', //red
warning: '#FF9100', //orange
info: '#313BCF', //dark blue
success: '#4caf50', // green
text: '#000000', // black
background: '#f5f6f7' // white
},
dark: {
primary: '#047EFB', //blue
secondary: '#7BBCFF', //light blue
accent: '#FCF25E', //yellow
error: '#FF5555', //red
warning: '#FF9100', //orange
info: '#9298f0', //dark blue
success: '#4caf50', // green
text: '#FFFFFF', // white
background: '#1a1a1a' // black / dark grey
}
}
}
2 Likes
Yep, and as a note, we don’t really have “themes” per se, just a bunch of defined primary colors.
We’re working on a complete revamp of the frontend though as we speak, so would like to hear why you need to change themes, or what you’d want to customise - so that we can try to make it easier in the future 
1 Like
Hi Jonathon, thanks! I tried that yesterday but some element don’t get the colors updates (for example the v-cards or most of the texts) so maybe the theme is not applied to all the elements. I was looking for the roots of this colours but haven’t been able to find them yet, without having to manually adjust each component.
I’m more a react kinda guy so probably I’m just missing something completely obvious from Vue haha
Thanks Dimitrie! I’m changing the colors and some elements to go in line with the Design System we have and to have a common language with the main Design Tool we are developing in house.
At the moment the only things I care to customize and haven’t been able are the colours palette, but other than that I would say the limitation is my lack of knowledge of Vue.
Building and Deploying the server was shockingly fast and easy (other than some small issues with Dockers running on my computer) so kudos to the whole team for creating a platform that accessible for non pro coders like myself!
2 Likes
The inconsistency you are seeing is a consequence of iterative growth and so this is something that is being addressed in a review.
In the meantime Vue is pretty straightforward. Most overrides will be within components, I don’t have my fingers in that area, sounds like you’ll find it’s soon as I could.
If you haven’t already, install the vue-dev-tools chrome extension, not for styles directly but will show component structure of a yarn dev build.
Can imagine! Nevertheless it’s working super nice! Thanks for the tip on Vue dev tools! Looks super promising!
1 Like
Just in case someone else wants to customize the front end of the server a bit, I’ll leave my discoveries from this days:
-First of all, infinites thanks to @jonathon for the Vue Dev Tools. Made my life so much easier!
-Most of the buttons have the colour linked to vuetify.js file that Jonathon mentioned earlier. Most of them also have an override with the elevations so in order to make them flat I’ve had to go one by one to adapt the style.
-The cards don’t adjust to the background colours so they need to be modified in ./main/packages/frontend/src/main/components/common/SectionCard.vue this affect all the cards which makes it super convenient.
-Some texts need to have the text--text class added in order to get the colours from vuetify.
Once I started to understand the logic it was super clear! One suggestion is that there are some variables that are hardcoded in different components that are repeated across like in main/packages/frontend/src/main/dialogs/NewBranch.vue
Maybe they could get fetched from a file that contain all of those restrictions. In my case I just created a .js with exported const with some reserved words and restricted selection (because I created a gh plug-in that requires a certain pattern for the branch name, I’m forcing the user to add some data to the name)
So far it’s been a real pleassure to work with the deployment! Thanks again to the whole team.
1 Like
if you’re curious, a new frontend is being developed, you can see the corresponding branches in the repo 
2 Likes