White Checkbox on Login Page

0
0

Hi,

I am trying to change the check box inner color (of the checkbox itself) to be white on my login page. (see sample images)

I have looked in the theme builder and I can see that maybe I can change the icon to inherit from icon-light rather than dark so I thought Id give it a hot.

I have created a mixin and added the Appearance Key but the checkbox just disappears.

Here is what I am starting with :-

{
“name”: “whitecheckbox”,

““appearances””: {
““checkbox””: {
““inherit””: ““checkbox””,
““components””: {
““icon””: {
““inherit””: ““icon-light””
}
}
}
}

}

Any assistance, guidance or examples would be muchly appreciated.

Thanks,

Daniel.

 

Attachment
Unchecked.PNG Checked.PNG
General
Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

Hi Daniel,

I’ve attached another sample that suits your needs.

I’ve added a whiteCheckbox AppearanceKey, If the checkbox in the designer disappeared, make sure that:

  1. You have the mixin loaded in the designer.
  2. That you’ve typed the AppearanceKey correctly, as it usually follows the camelCase naming convention

The theme file in the sample is based off of the Blue-3 theme.

Hope this helps!

Best regards,
Alaa

Attachment
WhiteCheckBox.zip
  • You must to post comments
0
0

Thanks for the sample.

I have applied that and I do get a White Checkbox however I was more after just a way to do it for this page only, as I will need the standard checkbox on other windows.

If I applied the theme through the Default.json file I get the white checkboxes, however if I set the AppearanceKey to the name of the theme, the checkbox disappears.

I was hoping to use a mixin theme for this one Checkbox control as I will be using the Blue-3 theme for the rest of the application.

Thanks,

Daniel.

  • You must to post comments
0
0

Hi Daniel,

If the CheckBox disappears in the Theme Builder, it’s just because the light-theme applies a white foreground to an Icon.

You can change the textColor property of icon-light to something darker in order for you to see it.

You can find the icon-light appearance under the Appearances tree.

I have attached a sample that has a mixin included, hopefully that helps.

Best regards,
Alaa

Attachment
WhiteCheckBox.zip
  • You must to post comments
Showing 3 results
Your Answer

Please first to submit.