So I have a site and I'm using Bootstrap 3.3.7 and sass. I'm being asked to have a "dark theme" page and the ability to set different types of color themes based on certain pages.
There might be a page with white-label branding, or a dark theme, or a blue theme.
I'm being asked to keep everything else the same.
I'm thinking about having those pages add a class to the body tag that changes the CSS colors, but what are the best practices for changing all colors in a bootstrap 3.3.7 sass style controllers.
Bootstrap colour code are present under variables file(bootstrap/**/_variables.scss) were we can play on it.
But when it comes to theme development best way to handle the colour is we can have separate scss for colour code, where the folder or file structure can be followed like bootstrap or as per the developer style.
Related
I'm currently using Vue i18n in an application with a bunch of custom messages for localisation. https://vue-i18n.intlify.dev/
Is there any way I can add a wrapper or something to add some custom CSS while in development to show all localised text in red? We're sweeping through an existing application adding localisation.
At the moment it's difficult to identify which parts of the application have been localised and which haven't. If I was able to add a class or something to all areas that use the t() function easily, and colour them all in red and bold or something, that would help identify areas that we've missed in localisation.
Long story short, I'm having some serious trouble getting themes to work in general - even for the "HelloWorld" base app that comes preinstalled with Vuetify. For some reason Vue/Vuetify do not apply any colors to anything unless I use the "color=" tag and even when I use "color=" it only uses the color I specify an not any shades or highlights of that color. When I change the theme from "light" to "dark" or vice versa nothing happens (again, I'm having the same issue with the "HelloWorld" app). I feel like I've gone through all the documentation for themes a hundred times and am looking for anyone to point me in the right direction. I should add that for one reason or another the theme IS working on a random v-list-group in the nav drawer but not to the items above or below the group. I'm using Vue 2 and Vuetify 2.
Things I've Tried
Making a new theme using the theme generator on the Vuetify website and inserting it into the ./src/plugins/vuetify.js file as instructed by the documentation.
Attempted inserting the theme at the bottom of ./src/App.vue between the <script> </script> elements. This worked for someone else but didn't do it for me.
Completely uninstalled and reinstalled Vue-CLI using the command line.
Completely deleted and recreated my project.
Remaking my project using Vue 3 and Vuetify 3. This does work but Vuetify 3 does not yet have the components I need for my project.
For example, if I have a link like https://cultivate-newsletter-html.s3.amazonaws.com/html-mtrgr0fqddar2d1movb1qeutr0sne3mg29uuvk81 , how can I turn this to have a dark mode experience?
Currently I am rendering this in an web view on react native, and I also do have access to the actual html document.
One way I could think of would be to directly modify the css on the html document...but I am not confident that I can grab all the elements that should change to white texts on all types of html document.
The default font is a bit large for my target application.
I saw that loadTheme could change the primary theme color, but is there a way to change the default font size across all components?
IFontStyles has a variety of sizes specified, so is there a way to set the font size for all the fabric react components to "small" (FontSizes.small)?
I have tried to set the css font-size to something smaller directly in the outer containers and inside the Fabric component, but the components still seem to render around 14px (ms-font-size-m) once rendering goes inside the Fabric component.
The theme code is fairly confusing to me but it looks like fabric-react uses a combination of fabric-core scss, fabric-react scss and glamor (runtime js->css) to generate stylesheets as needed and return the classnames to react code for className property. There does not appear to be use of inline styles.
loadTheme can override font-szie.
I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.