How to Change Theme Default Colors

[cssorlandi]

Hello, What's up?

While using Airframe in a project I needed to modify one of the default theme colors, I need to replace Primary with a darker blue.

Could you help me on how to do such a thing?

[christerjohansson]

@0wczar I second this. We need a more detailed documentation on how to utilize and use this product. If you are serious about your open source product, please support it and produce better documentation.

It does not have to be much, just a short readme on how to override color schemas, use custom fonts and where to put logos etc. I am sure you want this product to serve as your beacon of light in the marketing darkness on Internet. It is a good product, but it needs some extra love to really take off. No need to focus on new features, supporting more frameworks etc. Make some good documentation and this will come automatically.

[0wczar]

@christerjohansson Sorry for the late reply. The situation got complicated.

1. I need to earn money to support my family.
2. Airframe doesn't earn, so I have a hard time keeping it up.
3. I am currently looking after my family, my wife works in a hospital (Covid)

If you have ideas for help with "Airframe" I will be grateful!

[christerjohansson]

@christerjohansson Sorry for the late reply. The situation got complicated.

1. I need to earn money to support my family.
2. Airframe doesn't earn, so I have a hard time keeping it up.
3. I am currently looking after my family, my wife works in a hospital (Covid)

If you have ideas for help with "Airframe" I will be grateful!

Sorry to hear that! I have seen Airframe being on sale over at WrapBootstrap.com, I will buy it to support it. I am merely looking for a quick and dirty text on how to change things. It does not have to be fancy, just a text file explaining roughly how to do it. If I manage to fix it, I'll help out making a documentation for it. I really like this one, you've done a great job with it.

[Pyroboomka]

@christerjohansson Did you come up with something decent? Currently trying to do the same thing

[christerjohansson]

@christerjohansson Did you come up with something decent? Currently trying to do the same thing

No, I did not... Airframe is a "beta" product, not quite ready to use yet. You can change stuff in it, and it do have theming...but it will require more dev-time to reach its full potential. I really hope the author gets some time do finish it, and make a proper documentation for it. I ended up purchasing one of his other products instead.

[dyaacov]

Has anyone succeeded with changing $primary color?

[ofekkazes]

Hi All,

I succeeded in replacing the colors, use the following:

1. Make sure the color you want is within bootstrap's colors SCSS map: ~/node_modules/@owczar/dashboard-style--airframe/scss/bootstrap/_variables.scss For example we want to add a darker gray, which is within the variable $gray-900

2. Add it in the $color-alternatives SCSS variable in: ~/node_modules/@owczar/dashboard-style--airframe/scss/_theme-variants.scss For example we will name our new color as 'darkgray', the $color-alternatives variable will look like this: $color-alternatives: ( 'primary': $primary, 'success': $success, 'info': $info, 'danger': $danger, 'warning': $warning, 'indigo': $indigo, 'purple': $purple, 'pink': $pink, 'yellow': $yellow, 'darkgray': $gray-900 );

3. Add the new color we created in the colorOptions array in ThemeSelector React component: ~app/components/Theme/ThemeSelector.js We will add a new object in to the array with a name we can choose and the value set as the $color-alternatives we created earlier. { name: 'Dark Gray', value: 'darkgray' } Our colorOptions array will now looks like this: colorOptions: [ { name: 'Primary', value: 'primary' }, { name: 'Success', value: 'success' }, { name: 'Info', value: 'info' }, { name: 'Danger', value: 'danger' }, { name: 'Warning', value: 'warning' }, { name: 'Indigo', value: 'indigo' }, { name: 'Purple', value: 'purple' }, { name: 'Pink', value: 'pink' }, { name: 'Yellow', value: 'yellow' }, { name: 'Dark Gray', value: 'darkgray' } ]

4. That's it, if we go to the app and choose 'Color' for the Nav Style and choose 'Dark Gray' as Nav Color we will see the changes across the app.

Moreover if we want to create a whole new theme or change the current theme options, all can be found within the _theme-variants.scss file in: ~/node_modules/@owczar/dashboard-style--airframe/scss/_theme-variants.scss

Please note, every change you make will only be applied on the local project due to most of the code being in the node_modules folder, if you send it to git make sure to include the _theme-variants.scss from the @owczar/dashboard-style--airframe package and the bootstrap _variables.scss file if you add new color variables on Bootstrap.