Create custom theme


Topic: Create custom theme

Fiocre asked 3 years ago

Hi,

i use an input example like this :

<mdb-btn color="danger" type="button" class="btn-block z-depth-2">Log in</mdb-btn>

I have see on this page (https://mdbootstrap.com/docs/jquery/css/colors/) in the MDB colors the "default-color" (#2BBBAD), so i trying this :

<mdb-btn color="default-color" type="button" class="btn-block z-depth-2">Log in</mdb-btn>

but no change, the button become white...

I don't understand how to change color of button (and all items).

And if i want a specific color #xxxxxx, how i can do ?Can i override the default color per example with an custom.scss ? If yes do you have example ?

Thanks


Magdalena Dembna staff premium answered 3 years ago

Hi, You can find examples how to style buttons here: https://mdbootstrap.com/docs/vue/components/buttons/ . Your code doesn't work because it's should look like this: code="default". If you wish to use your own color, the simplest way would be to add your own css class.

<template>
    <mdb-btn class="custom">Hi!</mdb-btn>
</template>
<script>
import { mdbBtn } from 'mdbvue';
export default {
    components: {
        mdbBtn
    }
}
</script>
<style scoped>
    .custom {
        background-color: #....;
    }
</style>

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.3.0
  • Device: computer
  • Browser: firefox
  • OS: windows 10
  • Provided sample code: No
  • Provided link: Yes
Tags