I need to build a custom theme based on customers design. So I need not only to customize the colors, but to create custom elements new appearance. Now I wonder, if someone did it already? Please share Your experience. Is it enough to use compass(sass)? Links to ready theme examples(with all ExtJS elements) containing .scss if exists are wellcome.
I did some color modifications using sencha command. For me it was a good starting point to the whole topic of extjs theming.
There is a good tutorial Theming Ext JS which describes the necessary steps to get a custom theme.
Related
I was on a project last year where I had some very specific requirements to create new table column and populate it dynamically with styled icons based on data combinations in each row. Iirc I was encountering some issues with the default theme styling approach for this design. MUI had recently introduced scss support and that was the perfect solution to the problem which gave me full control over dynamic styling.
But as a rule, does it make sense to always use themes as the default styling approach in MUI? Eg does the themes styling approach provide certain configuration abilities that are only really available or practical via that particular styling approach? Is MUI scss support realy only provided as a one-off way to provide flexibility to handle very specific one-off scenarios like the one I described in my first paragraph?
So if a team was laying out design and coding standards at the beginning of a project, would the logical approach be to lay out a standard to always use themes for styling MUI by default and leverage special scss styling only as needed? Or has anyone made a case at the outset of a MUI project that scss should be used as the default way to style a MUI project? Would that even be possible? Ie would you lose particular capabilities for leveraging certain aspects of MUI right off the bat?
I'm considering using Blueprintjs in an application.
Is it possible to use custom SVG icons in the button, menu and navbar components? All the examples I've seen use the built-in icon set.
The app I'm developing would rely heavily on custom icons so being restricted to the built-in set wouldn't work.
Seems like it would be an obvious thing to be able to do, so I presume I'm just not finding the samples. If anyone could point me to some, I'd appreciate it.
Custom icons are currently unsupported in the core components. You should follow this issue for future updates that might enable support for this kind of use case: https://github.com/palantir/blueprint/issues/365
In the Angular Material docs under the theming section it says:
If you need more custom styling (such as layout changes including
padding, margins, etc) you will need to either write CSS rules with
custom selectors, or build a custom version of the
angular-material.css file using SASS and custom variables
Does anyone know of any useful guides that walk through building a custom version of the css file? Are there any tools that come with the library that allow you do this?
Thanks
Angular material documentation is a little poor in this aspect, but there is an example on how customize buttons, I didn't try it, but I believe all the elements is the same way.
I'm very new to Angular's material design and I'm finding it hard to locate and proper tutorial for beginners. I am wanting to know if it is possible to use a predefined color palette(css) with the $mdThemingProvider? Is there any proper documentation that can explain to me what $mdThemingProvider actually does code wise. Any help would be much appreciated!
While it is possible to style your AngularJS Material Design objects with CSS (like any other HTML elements), it is not the recommended way. Instead, the AngularJS Material Design package provides us with themes that will allow for simple full-ui color changes in the future (and for our users to pick).
Firstly, read this page. From a code standpoint, it truly is what you need to know. You'll want to reference it often.
Secondly, and unfortunately, they don't really offer an easy way to create a new palette of colors for within your theme. In order to do that, you need to specify a hex code for all of the main color options in a palette OR extend a default palette and modify just a couple colors. I've created a theme generator to help you through this process and make things a little easier, which you can use here.
Thirdly, the big one when coming from more traditional setups is the need for "Warning" or "Success" themes that allow for operation-oriented themeing instead of site-wide themeing. There are many discussions about this across the net, but I'd recommend creating a theme for each of these typical "states" for use throughout your application. This allows you to use secondary palettes within any particular state- like being able to invert a warning theme without needing to rewrite the CSS. Here is a discussion about this.
In the end- it takes a change in perspective to theme with this package, much like it did when using AngularJS the first time after jQuery/Prototype.
Cheers!
I have started with this:
Configuring a theme
I've got several instances in my app where I'm using a png icon from the standard wp7 icon library. I need to be able to alternate between light and dark versions of this png depending on the theme that the handset device is set to.
Now, I know how to detect the theme. However, how should I handle alternating between two versions of my images?
Do I create 2 different resource dictionaries and programatically switch between them in code? (honestly I have no clue how to do this)
Do I set some static resource "flag" somewhere based on what theme is detected?
I'm having some difficulty with my approach here, and would appreciate some guidance.
Here are some solutions:
Option 1)
You could use one image and OpacityMask so that your icons will remain consistent in both light/dark themes.
Option 2) You can take a look at this discussion:
LockedHow to change Metro icons based on selected theme
If you are using the standard wp7 icons for the appbar then you only need to add the icons from the dark theme -- the phone will automatically switch them to the light theme without any additional programming.
However, if you are using custom icons you will have to do something along the lines of what BMiloshevska said and use the OpacityMask.