Club System

2026-06-02 20:54:09 +02:00
parent 1affe88683
commit e8158dde8d
47 changed files with 319 additions and 131 deletions
--- a/style_properties.less
+++ b/style_properties.less
@@ -14,10 +14,12 @@
@xf-borderRadiusMedium: 0px;
@xf-borderRadiusSmall: 0px;
@xf-buttonBg: @xf-paletteColor3;
+@xf-buttonCtaBg: @xf-paletteAccent2;
@xf-buttonPrimaryBg: @xf-paletteAccent3;
@xf-buttonTextColor: @xf-paletteNeutral1;
@xf-chromeBg: @xf-paletteColor1;
@xf-chromeTextColor: @xf-paletteNeutral1;
+@xf-contentAccentBg: @xf-paletteAccent1;
@xf-contentAltBg: @xf-paletteColor3;
@xf-contentBg: @xf-paletteColor2;
@xf-contentHighlightBg: @xf-paletteColor3;
@@ -25,11 +27,13 @@
@xf-errorColor: @xf-paletteNeutral1;
@xf-fontFamilyBody: 'Segoe UI', 'San Francisco', 'Helvetica Neue', sans-serif;
@xf-fontFamilyUi: 'Segoe UI', 'San Francisco', 'Helvetica Neue', sans-serif;
+@xf-inlineModHighlightColor: @xf-paletteAccent1;
@xf-linkColor: @xf-paletteAccent3;
@xf-linkHoverColor: @xf-paletteAccent2;
@xf-linkUgcColor: @xf-paletteAccent3;
@xf-linkUgcHoverColor: @xf-paletteAccent2;
@xf-pageBg: @xf-paletteColor1;
+@xf-paletteAccent1: hsl(35, 90%, 95%);
@xf-paletteAccent2: #e56700;
@xf-paletteAccent3: #ff7300;
@xf-paletteColor1: #1e1e1e;
@@ -40,14 +44,19 @@
@xf-paletteNeutral1: #f1f1f1;
@xf-paletteNeutral2: #a1a1aa;
@xf-paletteNeutral3: #111111;
+@xf-selectedItemBgColor: @xf-paletteAccent1;
+@xf-selectedItemColor: @xf-paletteAccent3;
@xf-styleType: dark;
@xf-subNavBg: @xf-paletteColor2;
@xf-successBg: #81c784;
@xf-successColor: @xf-paletteNeutral1;
@xf-successFeatureColor: #388e3c;
@xf-textColor: @xf-paletteNeutral1;
+@xf-textColorAccentContent: @xf-paletteAccent3;
+@xf-textColorDimmed: mix(@xf-textColor, @xf-textColorMuted);
@xf-textColorEmphasized: @xf-paletteAccent3;
@xf-textColorFeature: @xf-paletteNeutral1;
+@xf-textColorMuted: @xf-paletteNeutral2;

 .xf-blockTabHeaderSelected()
 {
--- a/style_properties/_metadata.json
+++ b/style_properties/_metadata.json
@@ -1,33 +1,33 @@
 {
    "blockTabHeaderBg.json": {
-        "hash": "5207750cec31f74935a0c209f2bb7d5d"
+        "hash": "f548168a30a1d58f885379c826512664"
    },
    "blockTabHeaderSelected.json": {
        "hash": "47eac3b302ad0fe474a0d0960d01e059"
    },
    "blockTabHeaderTextColor.json": {
-        "hash": "d2d647878d3725763debf391d47486db"
+        "hash": "60987b64d0d5440a964a29356f62c9a6"
    },
    "borderColor.json": {
-        "hash": "d336471427f3a4028996bddb971f2afa"
+        "hash": "188643a00ec1edff6b6c9a56ac2ee460"
    },
    "borderColorAccentContent.json": {
-        "hash": "f2aff3c91a3241c9203b07e0c574828c"
+        "hash": "d66b2a8f03254ebf5526514258d40246"
    },
    "borderColorFaint.json": {
-        "hash": "be6f17463760417b337cebbd89773430"
+        "hash": "7be6c7b8d9b69a388381311c812ac54f"
    },
    "borderColorFeature.json": {
-        "hash": "2d8206ba58e695a661d20712db761817"
+        "hash": "166710f3e43991e1d4693c735f13d16c"
    },
    "borderColorHeavy.json": {
-        "hash": "ad04822f5a3a42927dd967c341e45d63"
+        "hash": "1f06279972da1695c6b46f21b0e92ab5"
    },
    "borderColorHighlight.json": {
-        "hash": "2ab3fdc69004f2f6a50af84ad45cc7c2"
+        "hash": "7e4e4b3b3d1483dd69b4cd2cec00ec2a"
    },
    "borderColorLight.json": {
-        "hash": "aff3cdcedc1516d511dd6aca180a8236"
+        "hash": "e505c1138e48608af68155d642da1c5f"
    },
    "borderRadiusLarge.json": {
        "hash": "6c8e75e1fcedd0b096d7bf911230a1c4"
@@ -39,31 +39,37 @@
        "hash": "03a46b0de545083de0e402a483ca6f1e"
    },
    "buttonBg.json": {
-        "hash": "a8535a0dff9ac6ed83955c83d73253a0"
+        "hash": "c1634e1f6ff0cac089c1326d49980800"
+    },
+    "buttonCtaBg.json": {
+        "hash": "810922cf9b02cafca3cb1476eeb19dbc"
    },
    "buttonPrimaryBg.json": {
-        "hash": "9d6e7069664536ec94ec4a9cb00ae102"
+        "hash": "20d797f8ed23f15e4d4f5489eff32d27"
    },
    "buttonTextColor.json": {
-        "hash": "474dfe468f35e3a7f7f7744620b9aafa"
+        "hash": "ab55be34da1e9618d8a1c11ba00c9cae"
    },
    "chromeBg.json": {
-        "hash": "7fbcf3a7cfd4a1a7cf052382201f61c5"
+        "hash": "57cea2ca2670bbc1efd611347e7ef7fa"
    },
    "chromeTextColor.json": {
-        "hash": "7d59fddb50e545f6dc4ee746d57300f9"
+        "hash": "95ef3871aec2885a46045ed9117f32ca"
+    },
+    "contentAccentBg.json": {
+        "hash": "6c073c7846e2fcbfb6e42e31ee12e149"
    },
    "contentAltBg.json": {
-        "hash": "475dbbcaf0266619fc0013038f6e1e9e"
+        "hash": "0468aaff60170b86470fae92621d5451"
    },
    "contentBg.json": {
-        "hash": "d5e9973a4e83961dc45fdaaf6e81c83b"
+        "hash": "a602585bd026fe54b911c34051a92f64"
    },
    "contentHighlightBg.json": {
-        "hash": "7ee9346c8d25ea473dacd9a9e21206e7"
+        "hash": "3f25b8f5a6851ecae0eaf5e3791c9cd9"
    },
    "errorBg.json": {
-        "hash": "5b0fa167f49f5c9955d7946d5e102f4c"
+        "hash": "0640f2a117475e7615a8004007937f3a"
    },
    "errorColor.json": {
        "hash": "e4469cb3a0e2c9cdc3840008700d8742"
@@ -74,73 +80,94 @@
    "fontFamilyUi.json": {
        "hash": "45a85d0b24fa4ea774734402210aaf2e"
    },
+    "inlineModHighlightColor.json": {
+        "hash": "cb98086bf3814d6b4322d49d2bd5b22b"
+    },
    "linkColor.json": {
-        "hash": "7ca02736780e9e4b47bf7d6d960bcffe"
+        "hash": "9831d4fa8c2918fc50b50c90388192e2"
    },
    "linkHoverColor.json": {
-        "hash": "24233df430149979043c3864a9e94d4d"
+        "hash": "e66a8617ad8ea84d1c9e688acc427e07"
    },
    "linkUgcColor.json": {
-        "hash": "a092f48a4f951cf3e92ed461659ae894"
+        "hash": "1a38ff8d88512e77e68c0931ee7f72d5"
    },
    "linkUgcHoverColor.json": {
-        "hash": "2e1385c3bfe51e1874c0ec8805217d8d"
+        "hash": "fd483e9f6ebed528993ea0c5b3db6880"
    },
    "pageBg.json": {
-        "hash": "3975020da986bf3e13a65be134449908"
+        "hash": "25b20f46219dd7b5cbccc5a1bc93d63d"
+    },
+    "paletteAccent1.json": {
+        "hash": "87cf0a292eb7205172307c668732865b"
    },
    "paletteAccent2.json": {
-        "hash": "00cb79f56e2ae668475327758cdd4ce2"
+        "hash": "4349b4660d958eb33ab63cef998e4f17"
    },
    "paletteAccent3.json": {
-        "hash": "e9322fb2aa0043a573713fc3f96ca79a"
+        "hash": "56ba082c5e25fc8d3033242058d2de50"
    },
    "paletteColor1.json": {
-        "hash": "976763c8be910c28f4c0008c9a277448"
+        "hash": "5d31b63804de05124fff929c11b5267f"
    },
    "paletteColor2.json": {
-        "hash": "eecdd3bf62255ec43dfc912fb56ab08c"
+        "hash": "33c7c95dcc4c860a1adb200e7f852709"
    },
    "paletteColor3.json": {
-        "hash": "e1603121b3eee6f5c4518966d685ef69"
+        "hash": "1eb9e549beb1af1ccbb432382f2a32f0"
    },
    "paletteColor4.json": {
-        "hash": "c645a133d49ed59c98e33fe3cc17b5c4"
+        "hash": "e9faae6096c6bdfbab02281e1db92805"
    },
    "paletteColor5.json": {
-        "hash": "23dedee0b4f9b9b88f3e99a5135dbfca"
+        "hash": "567468795753c5a7111a5f866ee32a09"
    },
    "paletteNeutral1.json": {
-        "hash": "2a6c79989236ec6cbc8bf81344b52496"
+        "hash": "c3cdb06fe904db889e392ccf4446102b"
    },
    "paletteNeutral2.json": {
-        "hash": "e6d5fa3553c3542a42c954eed332dc47"
+        "hash": "06b15abfcfd3ec5eb01c917d0e6f12d9"
    },
    "paletteNeutral3.json": {
-        "hash": "e08775923d2c98300549be6ed17147d8"
+        "hash": "1ec2ef5d3d83ad10b6b7232aaa08c440"
+    },
+    "selectedItemBgColor.json": {
+        "hash": "1b6dcccfb12810ca097e9609b6190590"
+    },
+    "selectedItemColor.json": {
+        "hash": "b31443445198bba66ac1fe266b242e27"
    },
    "styleType.json": {
        "hash": "a06efd294967581901bd111dfe7511c2"
    },
    "subNavBg.json": {
-        "hash": "b61b38b236ab81ab58134cac3fa4963b"
+        "hash": "cf02b59b25e4764d10333085d206326e"
    },
    "successBg.json": {
-        "hash": "1c9a192fe62a1bdbaf49d0d776919de8"
+        "hash": "e9a29a0bf4949a28c64b0379c43d362c"
    },
    "successColor.json": {
-        "hash": "c17c8090edddc7a86df397787808c105"
+        "hash": "1448166e4c2a23f70a2f41568ec6f52c"
    },
    "successFeatureColor.json": {
-        "hash": "25ab19e3c11c371f8b53ad56af94a5a0"
+        "hash": "915e092c9c59a762d40a7b6a0c80ceca"
    },
    "textColor.json": {
-        "hash": "df26881141502f16be13b75b9903f48f"
+        "hash": "3707f47d0f8dc6307af0bbaa21f2a5d9"
+    },
+    "textColorAccentContent.json": {
+        "hash": "a77a12cc25c97dbec7938c01a50357ac"
+    },
+    "textColorDimmed.json": {
+        "hash": "f8a9b3ad55cabe63e15bbb285598e615"
    },
    "textColorEmphasized.json": {
-        "hash": "7069705f62fdf89df20fcc7eab85959e"
+        "hash": "9bc63d4911cbfaf41224390ac3595d0b"
    },
    "textColorFeature.json": {
-        "hash": "f149f8945b9e6497264151339755a294"
+        "hash": "982f1f7d5af442215b1feb98243f51a7"
+    },
+    "textColorMuted.json": {
+        "hash": "b13405edd626276a29712e73a70dbe34"
    }
 }
--- a/style_properties/blockTabHeaderBg.json
+++ b/style_properties/blockTabHeaderBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "blockTabHeader",
    "property_value": {
-        "default": "@xf-paletteColor2",
-        "alternate": "@xf-paletteColor4"
+        "default": "@xf-paletteColor2"
    },
    "display_order": 6500
 }
--- a/style_properties/blockTabHeaderTextColor.json
+++ b/style_properties/blockTabHeaderTextColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "blockTabHeader",
    "property_value": {
-        "default": "@xf-paletteNeutral1",
-        "alternate": "@xf-paletteColor2"
+        "default": "@xf-paletteNeutral1"
    },
    "display_order": 6600
 }
--- a/style_properties/borderColor.json
+++ b/style_properties/borderColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "borderBasic",
    "property_value": {
-        "default": "@xf-paletteColor5",
-        "alternate": "xf-intensify(@xf-contentBg,  10%)"
+        "default": "@xf-paletteColor5"
    },
    "display_order": 4000
 }
--- a/style_properties/borderColorAccentContent.json
+++ b/style_properties/borderColorAccentContent.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "borderOther",
    "property_value": {
-        "default": "@xf-paletteAccent2",
-        "alternate": "mix(@xf-paletteAccent3, @xf-paletteAccent2)"
+        "default": "@xf-paletteAccent2"
    },
    "display_order": 5200
 }
--- a/style_properties/borderColorFaint.json
+++ b/style_properties/borderColorFaint.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "borderBasic",
    "property_value": {
-        "default": "@xf-paletteColor5",
-        "alternate": "xf-diminish(@xf-borderColor, 6%)"
+        "default": "@xf-paletteColor5"
    },
    "display_order": 4100
 }
--- a/style_properties/borderColorFeature.json
+++ b/style_properties/borderColorFeature.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "borderOther",
    "property_value": {
-        "default": "@xf-paletteAccent3",
-        "alternate": "@xf-paletteColor3"
+        "default": "@xf-paletteAccent3"
    },
    "display_order": 5100
 }
--- a/style_properties/borderColorHeavy.json
+++ b/style_properties/borderColorHeavy.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "borderBasic",
    "property_value": {
-        "default": "@xf-paletteColor5",
-        "alternate": "xf-intensify(@xf-borderColor, 4%)"
+        "default": "@xf-paletteColor5"
    },
    "display_order": 4300
 }
--- a/style_properties/borderColorHighlight.json
+++ b/style_properties/borderColorHighlight.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "borderOther",
    "property_value": {
-        "default": "@xf-paletteAccent3",
-        "alternate": "@xf-paletteColor4"
+        "default": "@xf-paletteAccent3"
    },
    "display_order": 5000
 }
--- a/style_properties/borderColorLight.json
+++ b/style_properties/borderColorLight.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "borderBasic",
    "property_value": {
-        "default": "@xf-paletteColor5",
-        "alternate": "xf-diminish(@xf-borderColor, 4%)"
+        "default": "@xf-paletteColor5"
    },
    "display_order": 4200
 }
--- a/style_properties/buttonBg.json
+++ b/style_properties/buttonBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "buttons",
    "property_value": {
-        "default": "@xf-paletteColor3",
-        "alternate": "@xf-paletteColor4"
+        "default": "@xf-paletteColor3"
    },
    "display_order": 8200
 }
--- a/style_properties/buttonPrimaryBg.json
+++ b/style_properties/buttonPrimaryBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "buttons",
    "property_value": {
-        "default": "@xf-paletteAccent3",
-        "alternate": "@xf-paletteColor3"
+        "default": "@xf-paletteAccent3"
    },
    "display_order": 8300
 }
--- a/style_properties/buttonTextColor.json
+++ b/style_properties/buttonTextColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "buttons",
    "property_value": {
-        "default": "@xf-paletteNeutral1",
-        "alternate": "@xf-paletteColor1"
+        "default": "@xf-paletteNeutral1"
    },
    "display_order": 8100
 }
--- a/style_properties/chromeBg.json
+++ b/style_properties/chromeBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "chrome",
    "property_value": {
-        "default": "@xf-paletteColor1",
-        "alternate": "@xf-paletteColor5"
+        "default": "@xf-paletteColor1"
    },
    "display_order": 6000
 }
--- a/style_properties/chromeTextColor.json
+++ b/style_properties/chromeTextColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "chrome",
    "property_value": {
-        "default": "@xf-paletteNeutral1",
-        "alternate": "@xf-paletteColor2"
+        "default": "@xf-paletteNeutral1"
    },
    "display_order": 6050
 }
--- a/style_properties/contentAltBg.json
+++ b/style_properties/contentAltBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "contentBackground",
    "property_value": {
-        "default": "@xf-paletteColor3",
-        "alternate": "darken(@xf-contentBg, 4%)"
+        "default": "@xf-paletteColor3"
    },
    "display_order": 2200
 }
--- a/style_properties/contentBg.json
+++ b/style_properties/contentBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "contentBackground",
    "property_value": {
-        "default": "@xf-paletteColor2",
-        "alternate": "@xf-paletteNeutral3"
+        "default": "@xf-paletteColor2"
    },
    "display_order": 2000
 }
--- a/style_properties/contentHighlightBg.json
+++ b/style_properties/contentHighlightBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "contentBackground",
    "property_value": {
-        "default": "@xf-paletteColor3",
-        "alternate": "@xf-paletteColor5"
+        "default": "@xf-paletteColor3"
    },
    "display_order": 2300
 }
--- a/style_properties/errorBg.json
+++ b/style_properties/errorBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "errorMessage",
    "property_value": {
-        "default": "#e57373",
-        "alternate": "hsl(358, 70%, 20%)"
+        "default": "#e57373"
    },
    "display_order": 10410
 }
--- a/style_properties/linkColor.json
+++ b/style_properties/linkColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "links",
    "property_value": {
-        "default": "@xf-paletteAccent3",
-        "alternate": "@xf-paletteColor2"
+        "default": "@xf-paletteAccent3"
    },
    "display_order": 1000
 }
--- a/style_properties/linkHoverColor.json
+++ b/style_properties/linkHoverColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "links",
    "property_value": {
-        "default": "@xf-paletteAccent2",
-        "alternate": "@xf-paletteColor1"
+        "default": "@xf-paletteAccent2"
    },
    "display_order": 1100
 }
--- a/style_properties/linkUgcColor.json
+++ b/style_properties/linkUgcColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "links",
    "property_value": {
-        "default": "@xf-paletteAccent3",
-        "alternate": "@xf-paletteColor2"
+        "default": "@xf-paletteAccent3"
    },
    "display_order": 1200
 }
--- a/style_properties/linkUgcHoverColor.json
+++ b/style_properties/linkUgcHoverColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "links",
    "property_value": {
-        "default": "@xf-paletteAccent2",
-        "alternate": "@xf-paletteColor1"
+        "default": "@xf-paletteAccent2"
    },
    "display_order": 1300
 }
--- a/style_properties/pageBg.json
+++ b/style_properties/pageBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "contentBackground",
    "property_value": {
-        "default": "@xf-paletteColor1",
-        "alternate": "darken(@xf-contentBg, 8%)"
+        "default": "@xf-paletteColor1"
    },
    "display_order": 2100
 }
--- a/style_properties/paletteAccent2.json
+++ b/style_properties/paletteAccent2.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "accent",
    "property_value": {
-        "default": "#e56700",
-        "alternate": "hsl(35, 85%, 45%)"
+        "default": "#e56700"
    },
    "display_order": 2100
 }
--- a/style_properties/paletteAccent3.json
+++ b/style_properties/paletteAccent3.json
@@ -11,7 +11,7 @@
    "value_group": "accent",
    "property_value": {
        "default": "#ff7300",
-        "alternate": "hsl(35, 85%, 15%)"
+        "alternate": "#e56700"
    },
    "display_order": 2200
 }
--- a/style_properties/paletteColor1.json
+++ b/style_properties/paletteColor1.json
@@ -11,7 +11,7 @@
    "value_group": "primary",
    "property_value": {
        "default": "#1e1e1e",
-        "alternate": "hsl(206, 60%, 75%)"
+        "alternate": "#f0f0f0"
    },
    "display_order": 1000
 }
--- a/style_properties/paletteColor2.json
+++ b/style_properties/paletteColor2.json
@@ -11,7 +11,7 @@
    "value_group": "primary",
    "property_value": {
        "default": "#252526",
-        "alternate": "hsl(204, 60%, 60%)"
+        "alternate": "#ffffff"
    },
    "display_order": 1100
 }
--- a/style_properties/paletteColor3.json
+++ b/style_properties/paletteColor3.json
@@ -11,7 +11,7 @@
    "value_group": "primary",
    "property_value": {
        "default": "#2d2d30",
-        "alternate": "hsl(205, 60%, 40%)"
+        "alternate": "#e8e8e8"
    },
    "display_order": 1200
 }
--- a/style_properties/paletteColor4.json
+++ b/style_properties/paletteColor4.json
@@ -11,7 +11,7 @@
    "value_group": "primary",
    "property_value": {
        "default": "#3e3e42",
-        "alternate": "hsl(205, 60%, 20%)"
+        "alternate": "#dcdcdc"
    },
    "display_order": 1300
 }
--- a/style_properties/paletteColor5.json
+++ b/style_properties/paletteColor5.json
@@ -11,7 +11,7 @@
    "value_group": "primary",
    "property_value": {
        "default": "#3f3f46",
-        "alternate": "hsl(205, 60%, 10%)"
+        "alternate": "#d0d0d0"
    },
    "display_order": 1400
 }
--- a/style_properties/paletteNeutral1.json
+++ b/style_properties/paletteNeutral1.json
@@ -11,7 +11,7 @@
    "value_group": "neutral",
    "property_value": {
        "default": "#f1f1f1",
-        "alternate": "hsl(0, 0%, 100%)"
+        "alternate": "#454545"
    },
    "display_order": 3000
 }
--- a/style_properties/paletteNeutral2.json
+++ b/style_properties/paletteNeutral2.json
@@ -11,7 +11,7 @@
    "value_group": "neutral",
    "property_value": {
        "default": "#a1a1aa",
-        "alternate": "hsl(0, 0%, 54%)"
+        "alternate": "#737373"
    },
    "display_order": 3100
 }
--- a/style_properties/paletteNeutral3.json
+++ b/style_properties/paletteNeutral3.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "neutral",
    "property_value": {
-        "default": "#111111",
-        "alternate": "hsl(0, 0%, 8%)"
+        "default": "#111111"
    },
    "display_order": 3200
 }
--- a/style_properties/subNavBg.json
+++ b/style_properties/subNavBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "chrome",
    "property_value": {
-        "default": "@xf-paletteColor2",
-        "alternate": "@xf-contentAltBg"
+        "default": "@xf-paletteColor2"
    },
    "display_order": 6080
 }
--- a/style_properties/successBg.json
+++ b/style_properties/successBg.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "successMessage",
    "property_value": {
-        "default": "#81c784",
-        "alternate": "hsl(122, 70%, 20%)"
+        "default": "#81c784"
    },
    "display_order": 10210
 }
--- a/style_properties/successColor.json
+++ b/style_properties/successColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "successMessage",
    "property_value": {
-        "default": "@xf-paletteNeutral1",
-        "alternate": "hsl(116, 70%, 85%)"
+        "default": "@xf-paletteNeutral1"
    },
    "display_order": 10220
 }
--- a/style_properties/successFeatureColor.json
+++ b/style_properties/successFeatureColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "successMessage",
    "property_value": {
-        "default": "#388e3c",
-        "alternate": "hsl(122, 70%, 50%)"
+        "default": "#388e3c"
    },
    "display_order": 10230
 }
--- a/style_properties/textColor.json
+++ b/style_properties/textColor.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "textBasic",
    "property_value": {
-        "default": "@xf-paletteNeutral1",
-        "alternate": "darken(@xf-paletteNeutral1, 12%)"
+        "default": "@xf-paletteNeutral1"
    },
    "display_order": 100
 }
--- a/style_properties/textColorEmphasized.json
+++ b/style_properties/textColorEmphasized.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "textOther",
    "property_value": {
-        "default": "@xf-paletteAccent3",
-        "alternate": "@xf-paletteColor1"
+        "default": "@xf-paletteAccent3"
    },
    "display_order": 3100
 }
--- a/style_properties/textColorFeature.json
+++ b/style_properties/textColorFeature.json
@@ -10,8 +10,7 @@
    "depends_on": "",
    "value_group": "textOther",
    "property_value": {
-        "default": "@xf-paletteNeutral1",
-        "alternate": "@xf-paletteColor2"
+        "default": "@xf-paletteNeutral1"
    },
    "display_order": 3000
 }
--- a/templates/_metadata.json
+++ b/templates/_metadata.json
@@ -3,7 +3,7 @@
        "addon_id": "XF",
        "version_id": 2031070,
        "version_string": "2.3.10",
-        "hash": "92f8334dbbaac2af86e9e9de3b22fc45"
+        "hash": "e098e67a0283c3eb15bc2168a05bc545"
    },
    "public/account_alerts_popup.html": {
        "addon_id": "XF",
@@ -27,7 +27,7 @@
        "addon_id": "XF",
        "version_id": 2031070,
        "version_string": "2.3.10",
-        "hash": "e0de841c22fac6099c25062c8030fb57"
+        "hash": "e68bad3c3c389551475965641615dadf"
    },
    "public/member_tooltip.html": {
        "addon_id": "XF",
@@ -45,7 +45,7 @@
        "addon_id": "",
        "version_id": 0,
        "version_string": "",
-        "hash": "96718ec22da14ac5d4615109068a2dc2"
+        "hash": "9f45a4c55e49ec4481f9e58b20038717"
    },
    "public/romhackplaza_js.html": {
        "addon_id": "",
@@ -57,6 +57,6 @@
        "addon_id": "RomhackPlaza/Master",
        "version_id": 1000000,
        "version_string": "1.0.0",
-        "hash": "25beddff5231f873351af8fa9ce2e980"
+        "hash": "43295bbcf4a68c9bf7f8036e942963d0"
    }
 }
--- a/templates/public/PAGE_CONTAINER.html
+++ b/templates/public/PAGE_CONTAINER.html
@@ -10,7 +10,7 @@
 	data-logged-in="{{ $xf.visitor.user_id ? 'true' : 'false' }}"
 	data-cookie-prefix="{$xf.cookie.prefix}"
 	data-csrf="{{ csrf_token()|escape('js') }}"
-	class="has-no-js {{ $template ? 'template-' . $template : '' }}"
+	class="has-no-js {{ $template ? 'template-' . $template : '' }} {{ $xf.visitor.style_variation === 'alternate' ? '$light-mode' : '' }}"
 	{{ $xf.runJobs ? ' data-run-jobs=""' : '' }}>
 <head>
 	<xf:set var="$siteName" value="{$xf.options.boardTitle}" />
@@ -82,7 +82,7 @@
 </head>
 <body data-template="{$template}">

-<div id="app">
+<main id="app">
 	<nav id="menu">
 		<div class="$menu-header">
 			<div class="$menu-logo">
@@ -310,7 +310,15 @@
 				arg-variant="bottom" />
 			<xf:ad position="container_breadcrumb_bottom_below" />
 		</div>
+		<div class="u-bottomFixer js-bottomFixTarget">
+			<xf:if is="$notices.floating">
+				<xf:macro id="notice_macros::notice_list" arg-type="floating" arg-notices="{$notices.floating}" />
+			</xf:if>
+			<xf:if is="$notices.bottom_fixer">
+				<xf:macro id="notice_macros::notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" />
+			</xf:if>
 		</div>
+	</main>

 	<xf:comment>
 		<footer class="p-footer" id="footer">
@@ -417,16 +425,7 @@
 			</div>
 		</footer>
 	</xf:comment>
-</div> <!-- closing p-pageWrapper -->
-
-<div class="u-bottomFixer js-bottomFixTarget">
-	<xf:if is="$notices.floating">
-		<xf:macro id="notice_macros::notice_list" arg-type="floating" arg-notices="{$notices.floating}" />
-	</xf:if>
-	<xf:if is="$notices.bottom_fixer">
-		<xf:macro id="notice_macros::notice_list" arg-type="bottom_fixer" arg-notices="{$notices.bottom_fixer}" />
-	</xf:if>
-</div>
+</main> <!-- closing p-pageWrapper -->

 <div class="u-navButtons js-navButtons">
 	<xf:button href="javascript:" class="button--scroll"><xf:fa icon="{{ $xf.isRtl ? 'fa-arrow-right' : 'fa-arrow-left' }}" /><span class="u-srOnly">{{ phrase('back') }}</span></xf:button>
--- a/templates/public/extra.less
+++ b/templates/public/extra.less
@@ -71,6 +71,32 @@ ul {
    --menu-user-avatar-bg: #555;
 }

+.\$light-mode {
+
+    /* RHPZ color */
+    --rhpz-orange: #ff7300;
+    --rhpz-orange-hover: #e56700;
+
+    /* Background colors */
+    --bg: #f0f0f0;
+    --bg2: #ffffff;
+    --bg3: #e8e8e8;
+    --bg4: #dcdcdc;
+
+    /* Text */
+    --text: #454545;
+    --text2: #737373;
+    --text3: #111111;
+
+    /* Elements */
+    --border: #d0d0d0;
+    --error: #e57373;
+    --info: #1976d2;
+    --success: #81c784;
+    --success2: #388e3c;
+
+}
+

 /* File: resources/css/components/cards.css */
 /* STAT CARDS */
@@ -1695,6 +1721,165 @@ ul {
 }


+/* File: resources/css/components/settings.css */
+.\$settings-dropdown {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    width: 240px;
+    background-color: var(--bg2);
+    border: 1px solid var(--border);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    z-index: 2000;
+}
+
+.\$settings-header {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border);
+    background-color: var(--bg3);
+    font-weight: 600;
+    font-size: 0.9rem;
+    color: var(--text);
+}
+
+.\$settings-section {
+    padding: 12px 16px;
+}
+
+.\$settings-section-title {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 0.78rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.7px;
+    color: var(--text2);
+    margin-bottom: 10px;
+}
+
+.\$settings-separator {
+    border-top: 1px solid var(--border);
+}
+
+.\$settings-themes {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.\$settings-theme-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color:  var(--text);
+    transition: transform 0.15s, border-color 0.15s;
+    padding: 0;
+
+    &:hover {
+        transform: scale(1.15);
+    }
+
+    .\$active {
+        border-color: var(--text);
+        transform: scale(1.1);
+    }
+}
+
+.\$settings-theme-toggle {
+    width: 100%;
+    background-color: var(--bg3);
+    border: 1px solid var(--border);
+    color: var(--text);
+    padding: 8px 12px;
+    cursor: pointer;
+    font-family: var(--typography);
+    font-size: 0.88rem;
+    transition: background-color 0.1s;
+    text-align: left;
+
+    &:hover {
+        background-color: var(--bg4);
+    }
+}
+
+.\$settings-theme-toggle-inner {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.\$settings-theme-toggle-badge {
+    margin-left: auto;
+    background-color: var(--rhpz-orange);
+    color: #111;
+    font-size: 0.65rem;
+    font-weight: 700;
+    padding: 2px 6px;
+}
+
+.\$settings-perpage {
+    display: flex;
+    gap: 6px;
+}
+
+.\$settings-perpage-btn {
+    flex: 1;
+    padding: 6px 4px;
+    background-color: var(--bg3);
+    border: 1px solid var(--border);
+    color: var(--text2);
+    font-size: 0.85rem;
+    cursor: pointer;
+    font-family: var(--typography);
+    transition: all 0.1s;
+
+    &:hover {
+        background-color: var(--bg4);
+        color: var(--text);
+    }
+
+    .\$active {
+        background-color: var(--rhpz-orange);
+        border-color: var(--rhpz-orange);
+        color: var(--text3);
+        font-weight: 600;
+    }
+}
+
+.\$settings-link {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 8px 10px;
+    color: var(--text);
+    text-decoration: none;
+    font-size: 0.88rem;
+    transition: background-color 0.1s;
+    border: 1px solid transparent;
+
+    &:hover {
+        background-color: var(--bg3);
+        border-color: var(--border);
+        text-decoration: none;
+    }
+}
+
+.\$settings-link--danger {
+    color: var(--error);
+
+    &:hover {
+        background-color: rgba(229, 115, 115, 0.08);
+        border-color: rgba(229, 115, 115, 0.3);
+    }
+}
+
+
 /* File: resources/css/layout/content.css */
 #main-wrapper {
    flex-grow: 1;
--- a/templates/public/romhackplaza_css.html
+++ b/templates/public/romhackplaza_css.html
@@ -1,3 +1,3 @@
 <style>
-	svg { fill: none !important; }
+	.lucide { fill: none !important; }
 </style>
--- a/templates/public/topbar_actions.html
+++ b/templates/public/topbar_actions.html
@@ -22,7 +22,7 @@
        <a href="{{ link('approval-queue') }}" class="$btn">
            <i data-lucide="message-circle-check" size="18"></i>
        </a>
-        <a href="{{ link('reports') }}" class="$btn">
+        <a href="{{ link('reports') }}" class="$btn badgeContainer badgeContainer--visible {{ ($xf.session.reportCounts.total && ($xf.session.reportCounts.lastBuilt > $xf.session.reportLastRead) OR $xf.session.reportCounts.assigned) ? ' badgeContainer--highlighted' : '' }}" data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}">
            <i data-lucide="triangle-alert" size="18"></i>
        </a>
    </xf:if>