Problem: Lacking support for the newer wide P3 color gamut displays and therefore our branded colors would look render differently depending on what screen you’re viewing the app in.

Solution: Use CSS to override the background or color property when rendering on p3 color displays.

@primary_color: #1da0ef;
@primary_color_p3: ~"color(display-p3 0.114 0.627 0.937)";

@light_primary_color: #c0eaff;
@light_primary_color_p3: ~"color(display-p3 0.753 0.918 1)";

@dark_primary_color: #00538d;
@dark_primary_color_p3: ~"color(display-p3 0 0.325 0.553)";

@secondary_color: #FF5629;
@secondary_color_p3: ~"color(display-p3 1 0.337 0.161)";

@fp_green_color: #03d658;
@fp_green_color_p3: ~"color(display-p3 0.012 0.839 0.345)";

@fp_orange_color: #ffab3b;
@fp_orange_color_p3: ~"color(display-p3 1 0.671 0.231)";

Using P3 Color

Without P3 Color Support