Dear Xara...
...a time back I suggested the use of CSS Variables for inclusion in your HTML Filter export such that all elements that used a Theme Colour had their in-line style code reflect the set Theme Colour at that point instead of an absolute value.
Since then, SVGs have been incorporated and as in-line SVGs are not strictly part of the DOM, they cannot be manipulated with CSS.
That said the original ask is still valid for <span>s, overlays, gradients and elements that use in-line CSS style="...color: #value;...".
What you seem to have delivered in the external stylesheet, xr_main.css, is a list of ClassNames that match to the Theme labels (blanks replaced with underscores). One of my designs:
- .xr_c_Menu {color:#FF6300;}
- .xr_c_MenuHover {color:#6666D0;}
- .xr_c_Background_Grey_1 {color:#F8F9FA;}
- .xr_c_Light_Text {color:#FFFFFF;}
- .xr_c_Background_Grey_2 {color:#F1F3F5;}
- .xr_c_Black {color:#000000;}
- .xr_c_Theme_Color_1 {color:#0184FF;}
- .xr_c_T1_Darker {color:#01427F;}
- .xr_c_Theme_Color_2 {color:#FF2B2B;}
- .xr_c_T2_Darker {color:#7F1515;}
- .xr_c_Theme_Color_3 {color:#BF01FE;}
- .xr_c_T3_Darker {color:#60017F;}
- .xr_c_Theme_Color_4 {color:#C4FF01;}
- .xr_c_T4_Darker {color:#627F01;}
- .xr_c_Theme_Color_5 {color:#01FF41;}
- .xr_c_T5_Darker {color:#017F20;}
- .xr_c_Xara_Grey {color:#74787C;}
- .xr_c_XG_Darker {color:#3A3C3E;}
- .xr_c_XG_Lighter {color:#CFD1D3;}
- .xr_c_XG_Light {color:#A0A4A8;}
- .xr_c_XG_Dark {color:#575A5D;}
- .xr_c_T5_Lighter {color:#AAFFC0;}
- .xr_c_T5_Light {color:#56FF80;}
- .xr_c_T5_Dark {color:#01BF30;}
- .xr_c_T4_Lighter {color:#EBFFAB;}
- .xr_c_T4_Light {color:#D7FF56;}
- .xr_c_T4_Dark {color:#93BF01;}
- .xr_c_T3_Lighter {color:#EAAAFF;}
- .xr_c_T3_Light {color:#D456FF;}
- .xr_c_T3_Dark {color:#8F01BF;}
- .xr_c_T2_Lighter {color:#FFB8B8;}
- .xr_c_T2_Light {color:#FF7272;}
- .xr_c_T2_Dark {color:#BF2020;}
- .xr_c_T1_Dark {color:#0163BF;}
- .xr_c_T1_Light {color:#56ADFF;}
- .xr_c_T1_Lighter {color:#AAD6FF;}
- .xr_c_Text {color:#0F2F4C;}
- .xr_c_Contrasting_text {color:#E5F3FF;}
- .xr_c_Dark_Text {color:#343A40;}
For example, what I had expected would be:
:root {
--xr_c_Theme_Color_4:#C4FF01;
...
}
and for any instances of that colour value in in-line CSS to be replaced with var(--xr_c_Theme_Color_4).
That way, after publish, JS code could allow the value(s) to be changed, either as an overall 'skin' change (day to night mode, etc), or high contrast, or individual colour tweaks.
As now delivered, I have no clear vision on how access to the ClassNames will actually achieve anything.
Acorn
Bookmarks