AnsweredAssumed Answered

Changing the primary button color

Question asked by Darin Webb on Sep 12, 2019
Latest reply on Sep 13, 2019 by Darin Webb

According to the "Themes" documentation, I can change my primary button color by setting the following in my "custom/themes/clients/base/default/variables.php" file.

 

<?php

$lessdefs = [
    'colors' => [
        'PrimaryButton' => '#0F0',
    ],
];

?>

In theory, doing so should give me bright green buttons. In practice, it gives me a bright green button that is still blue when you hover over it.

 

This seems like a failed implementation of customization. Not only are we limited to only three variable customizations, they don't even work properly.

 

At the moment, the only way I've found to cusomize the button more completely has been to put the following in my "custom/themes/custom.less" file.

.btn-primary {
    &:not(.disabled) {
        &:not(.btn-invisible) {
            &:hover {
                background: #0A0;
            }
            &:focus {
                background: #0A0;
            }
            &:active {
                background: #0F0;
            }
        }

    }
}

That code is super ugly, and doesn't feel very upgrade safe. What's the right way to accomplish a primary color change across the application?

Outcomes