Resource icon

XF 2.x Custom [ShikiSuen] Fake HSV Color System + One Hue Color Domination

ShikiSuen

New member
Registered
Joined
Apr 29, 2020
Messages
4
Reaction score
4
Points
12
Location
Japan

Reputation:

New resource:

[ShikiSuen] Fake HSV Color System + One Hue Color Domination - Simplifying your workloads of managing the color of your style.

A lite version for free users (just a concept & hint):

I guess this may get implemented into XenForo 2.2 or later.

Imagine that you only change one hue color to controls all color hues in a style. Really crazy.

Code:
mix(mix("@HSV_HUE", white, "@HSV_SATURATION%"),black,"@HSV_VALUE%")
Note that these two HUE colors in these two properties shall have their "HSL Saturation as 100%" and "HSL Lightness as 50%" and must be written as the solid color in either RGB or HEX format. Otherwise, this method may be unable to return the correct results. (You shall be able to know the difference between HSV and HSL in this case. Otherwise, no one can save you from your stupidity.)

Example:
Code:
// Color 1:
mix(mix(@xf-styleHueMain, white, 6%),black,99%)
// Accent 3:
mix(mix(@xf-styleHueAccent, white, 95%),black, 67%)
Complete XML style template file, using my method to realize the official color template of XenForo 2.1.x:
XML:
<?xml version="1.0" encoding="utf-8"?>
<style title="XenForo 2.1 Default Style EX - One Hue" description="Added one-hue design." user_selectable="1" base_version_id="2010970" export_version="2">
  <templates/>
  <properties>
    <property property_name="styleHueAccent" group_name="palette" title="Accented style color hue" description="In normal cases you might want to use an inverted hue from @xf-styleHueMain, unless you have your own idea." property_type="value" value_type="color" depends_on="" value_group="setup" display_order="50" addon_id="">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"#ff6a00"</value>
    </property>
    <property property_name="styleHueMain" group_name="palette" title="Main style color hue" description="You can use this to determine the hue of any color variable in this theme that uses this variable.&lt;br /&gt;&#10;&lt;strong&gt;XenForo 2.1 does not support HSL and HSV. We use this hex / RGB color to define the main Hue.&lt;/strong&gt;" property_type="value" value_type="color" depends_on="" value_group="setup" display_order="0" addon_id="">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"#0095ff"</value>
    </property>
    <property property_name="paletteAccent1" group_name="palette" title="Accent 1" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2000" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(mix(@xf-styleHueAccent, white, 10%),black,100%)"</value>
    </property>
    <property property_name="paletteAccent2" group_name="palette" title="Accent 2" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2100" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(mix(@xf-styleHueAccent, white, 95%),black, 95%)"</value>
    </property>
    <property property_name="paletteAccent3" group_name="palette" title="Accent 3" description="" property_type="value" value_type="color" depends_on="" value_group="accent" display_order="2200" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(mix(@xf-styleHueAccent, white, 95%),black, 67%)"</value>
    </property>
    <property property_name="paletteColor1" group_name="palette" title="Color 1" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1000" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(mix(@xf-styleHueMain, white, 6%),black,99%)"</value>
    </property>
    <property property_name="paletteColor2" group_name="palette" title="Color 2" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1100" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(mix(@xf-styleHueMain, white, 22.5%),black,96%)"</value>
    </property>
    <property property_name="paletteColor3" group_name="palette" title="Color 3" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1200" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(mix(@xf-styleHueMain, white, 70%),black,91.5%)"</value>
    </property>
    <property property_name="paletteColor4" group_name="palette" title="Color 4" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1300" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(mix(@xf-styleHueMain, white, 79%),black,69%)"</value>
    </property>
    <property property_name="paletteColor5" group_name="palette" title="Color 5" description="" property_type="value" value_type="color" depends_on="" value_group="primary" display_order="1400" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(mix(@xf-styleHueMain, white, 82%),black,53%)"</value>
    </property>
    <property property_name="paletteNeutral1" group_name="palette" title="Neutral 1" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3000" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(white, black, 99.6%)"</value>
    </property>
    <property property_name="paletteNeutral2" group_name="palette" title="Neutral 2" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3100" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(white, black, 55%)"</value>
    </property>
    <property property_name="paletteNeutral3" group_name="palette" title="Neutral 3" description="" property_type="value" value_type="color" depends_on="" value_group="neutral" display_order="3200" addon_id="XF">
      <value_parameters>hidePalette=true</value_parameters>
      <value>"mix(white, black, 8%)"</value>
    </property>
  </properties>
</style>
Now you are good to go.

Read more about this resource...
 
Top