I am working on an application using Vue.js 2.0. and Vuex for state management. I need to implement the possibility of so-called "branding", i.e. the user needs to have the ability to select a theme for their account, a specific color which will then be applied to the application's style.
The first option I went for and managed to implement as a proof of concept was to use Vuex to store the desired style in the application store as an object with Vuex which I then used for binding to the style of the elements it needs to be applied to. The color picker for choosing the color triggers a mutation on the state to change the color. This works completely fine and isn't even too hard to use as it allows for just using an expression like :style ="$store.state.brand" on the html elements it needs to be applied to. It updates on all components as I change the color. This option has its advantages as it is pretty straight forward and also allows the user to select whichever color he/she wants from a color picker. However, it has its limitations in terms of design, as complicated styles cannot be implemented in this way (e.g.color change on hover, active classes for tabs or pages etc.)
So the second option I would like to try and suggest to our client is to have a set of predefined themes from which the user can choose. Those themes would be defined in css files (using sass/less or something similar). What I need to implement now is the following:
When the user chooses a theme, let's say from a dropdown, I want to load the style for the application from the appropriate css file and reload the application to reflect those changes.
What is the most efficient and best practice way to do this in Vue?
So in case anyone else needs this, we ended up using styled components. For more details, checkout https://www.npmjs.com/package/vue-styled-components. We created styled components for elements that need to receive the specified theme's color (button, radio button, header, menu items etc.) and passed them the required color in as a prop. The value of the prop comes from the Vuex store so it is consistent across the whole application. The benefit of this approach is that the color choices are limitless for the client (compared to the predefined themes we were considering). Furthermore another benefit is that now the client can let's say change the color in the vuex store through a color picker and see the theme changing live. Finally, this approach also enables you to use all features of css like creating more complex styles with css selectors for example. This was not possible with regular vue style bindings. Feel free to contact me if you need more details on this.
Related
Background
We currently have large client site in Optimizely (ASP.NET MVC) which hosts many, smaller sites, for their regional markets and large, important customers.
Currently, there are various themes that are built by our front end guys (SASS -> CSS) and a dropdown per site in Optimizely that allows us to set the theme - it simply renders this value in the master layout and thus the page requests the corresponding style sheet.
Due to the time it takes to develop these themes for the whole site, the client has requested that for newer sites, we have the ability to set a few basic colours (primary, secondary and tertiary) that can be set, per site, in Optimizely.
So for their customers that want a completely branded site, they can pay and have a custom theme (colours and structure).
The rest will use a generic theme (structure) with the colours taken from Optimizely.
The question
Is there a simple way of getting colours defined server side into the transpiled CSS. Adding the colours to the page is not a problem if required but I see no way to get CSS to pick this up. (I tried adding a colour variable defined in the SASS to the master layout but the CSS didn't pick it up as expected).
Possibilities
Obviously, I could render the specific CSS classes to the page with the colour property set and marked with !important to override colours set in SASS.
But, we obviously use variables in SASS so colours do not have to be defined (or overriden) in a thousand places.
We could modify the CSS at runtime when colours change in the CMS (alas, CDN). Or use Javascript to change the colours after the page has loaded (meaning original colours would be visible until the JS kicks in). Both these methods I could do but they seem clunky.
This seems to be something that "should" be simple but I've not found anything online that helps.
Is this something anyone has had to deal with? Any clever solutions I've not thought of?
Cheers
We ended up resolving this with CSS variables as suggested by #Pete.
We allowed a hex ref to be entered into the CMS for a colour, converted that to a .net Color, and created an extension method to allow us to extract the individual H, S and L components. These were added as the values of CSS variables in the view, and the SCSS used these variables to either define a colour or manipulate it first.
I am using react and meteor for web development. I want to able to change font family respect to language change. I am using i18n to translate to different language. For english I want 'Century Gothelic' and for thai text I want to change it to Sukhumvit font.
How I can achieve this.
You might try to use a global css class and relatively change font-family based on language.
On how you can achieve that, if you're using redux, it's pretty easy, every time you change language (click button or something), dispatch an action to change the state that related to the global css class.
Otherwise, you have to figure out how to store that language change to express it so that main app component can detect that change.
I want to implement a simple feature into my node.js/express app that allows the users (registered and nonregistered) to quickly change some settings in the CSS theme.
Is there a way of implementing it in a way that I don't have to record the user's preference into the db, instead the app just remembers the preference of the current browsing session and shows a different CSS theme depending on what the user selected.
And I need these styles to not be in a separate CSS file, but some kind of adjustment to the existing ones.
What would be the best way to implement it?
I thought about adding a few style modifications in a separate CSS file and then when the user selects a different theme, recording it as the current preference and loading that additional css for those users.
Do you think it's a good way or there's a more efficient one?
Look into LocalStorage (available in just about every modern browser) for storing the preference, or instead store the preference in a non-expiring cookie. The first approach is best if your preferences are complex (like overriding individual elements) and the second if they're simpler (like just one file override).
As for the updated CSS, don't modify existing files. Use the cascading nature of the language, which is built for overrides. In other words, inline the changed CSS into your html. It will usually take precedence over separate CSS files unless individual rule weights are different for some reason (like more specific selectors, which increase rule weight/priority).
I have an idea for a web application that would allow users to create their own profile pages, and apply custom or pre-defined themes to change the look/feel of their profile page. It would be similar to Wordpress themes, or any other product that utilizes a similar idea. My idea was to build the css using less. The users would be able to create/edit their own themes through a GUI interface (pick colors, fonts, etc). When saving a theme, it would update the variables in the .less files, and rebuild the css accordingly.
Is this a feasible or even possible way to apply style themes to a page? Are there any existing solutions out there that already accomplish this?
One problem i see here is that the user can change other parts of the page which shouldn't be changeable. For examlpe menus, login buttons etc. This could be a security problem.
So you must limit the users ways how to change the styles. For example only allow to change certain classes with certain params.
You can look at jQueryUI themeroller it's one way to let users change the style of their profile while limiting the styles to colors and layout mostly. There are jQuery plugins that let them select a theme from a drop down.
A more custom method would be to possibly set inline styles throughout your template wrap them with php and work that into your GUI. So users select a color of a navigation bar and the hex or rgb color is stored into a db table.
I would like the user to have limited access to controlling certain CSS attributes of divs. The divs would all be similar, all have a some class name, and be displayed across the site with the styling rule of the user. So kind of like a user CSS stylesheet, except with certain rules that they can change.
Allow change to:
.className{
font:all attributes;
all four borders:all attributes;
float:cannot change;
}
Would the best way to be to store these in a database? Store the color, border width, etc in a MySQL database? Seems like a lot, with all of the information.
Allowing the user to have their own CSS document is risky, and I do not want them to be able to change the layout. I want to make this a part of my site, one anyone can use with no knowledge of CSS. I would like for them to have their choice of styles; like letting them have their own theme on a Drupal site, but make the changes easy to make for anyone (like have a list of pre-defined or something). But also they must have full control if they want, of the attributes I allow them to change.
Would preprocessing this information from a database and putting it in a style tag be inefficient? Seems like a lot of queries unless it was all in one query.
You should check out the jQuery UI ThemeRoller script, it uses a number of fields which are passed via the URL. Click on any of the themes on the left and see what happens to the URL.
You could easily replicate it to fit your needs, and instead save those values in a database. You could use the same naming convention too, if you like.
I think it's a great place to start.
To have your users able to generate and preview the styles dynamically, they must be parsed with Javascript (or server side to get tricky). Either way, you have to get a CSS rule out of it somehow, so you might as well do it before you throw it into the database. You're doing what you were going to do anyway, but saving yourself the trouble of making a big table.