Merge pull request #8574 from weseek/support/142443-customtheme-hufflepuff

support: New Hufflepuff theme

packages/preset-themes/public/images/hufflepuff/hufflepuff-dark-bg.svg

@@ -0,0 +1,27 @@
+<svg width="1266" height="585" viewBox="0 0 1266 585" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M807.925 584.671H764L1264.17 234H1265.82V263.638L807.925 584.671ZM898.214 584.671H854.289L1265.82 296.144V326.94L898.214 584.671ZM990.944 584.671H947.02L1265.82 361.158V391.954L990.944 584.671ZM1080.68 584.671H1036.76L1265.82 424.074V454.87L1080.68 584.671ZM1170.97 584.671H1127.05L1265.82 487.378V518.174L1170.97 584.671Z" fill="#38311B"/>
+<path d="M1153.56 495.502C1152.23 493.115 1148.09 491.552 1144.79 493.638C1146.45 490.441 1140.6 475.709 1139.59 475.709C1138.57 475.709 1134.22 486.14 1135.01 494.399C1129.59 489.494 1121.82 496.423 1125.48 502.469C1126.79 506.063 1133.14 505.243 1130.89 501.28C1127.53 503.078 1128.35 496.222 1132.06 496.645C1136.11 497.105 1138.13 499.752 1137.48 503.6C1137.07 506.076 1136.21 506.509 1134.12 508.187C1137.89 511.92 1138.98 518.5 1139.71 518.5C1140.51 518.5 1140.11 513.118 1144.95 508.187C1142.49 506.403 1141.87 506.084 1141.64 503.79C1141.22 499.68 1143.8 497.51 1145.8 496.85C1151.58 494.951 1150.61 500.705 1147.8 502.905C1151.24 508.572 1156.79 499.13 1153.56 495.502Z" fill="#38311B"/>
+<path d="M928.652 495.502C927.325 493.115 923.178 491.552 919.879 493.638C921.537 490.441 915.694 475.709 914.68 475.709C913.667 475.709 909.313 486.14 910.1 494.399C904.685 489.494 896.908 496.423 900.575 502.469C901.886 506.063 908.236 505.243 905.978 501.28C902.626 503.078 903.439 496.222 907.154 496.645C911.198 497.105 913.218 499.752 912.573 503.6C912.159 506.076 911.297 506.509 909.208 508.187C912.977 511.92 914.068 518.5 914.8 518.5C915.604 518.5 915.197 513.118 920.041 508.187C917.577 506.403 916.966 506.084 916.732 503.79C916.312 499.68 918.89 497.51 920.896 496.85C926.668 494.951 925.702 500.705 922.89 502.905C926.334 508.572 931.884 499.13 928.652 495.502Z" fill="#38311B"/>
+<path d="M703.745 495.502C702.418 493.115 698.272 491.552 694.973 493.638C696.631 490.441 690.788 475.709 689.774 475.709C688.76 475.709 684.407 486.14 685.194 494.399C679.779 489.494 672.002 496.423 675.669 502.469C676.98 506.063 683.33 505.243 681.071 501.28C677.72 503.078 678.533 496.222 682.248 496.645C686.292 497.105 688.311 499.752 687.667 503.6C687.253 506.076 686.391 506.509 684.302 508.187C688.071 511.92 689.162 518.5 689.894 518.5C690.698 518.5 690.291 513.118 695.135 508.187C692.671 506.403 692.06 506.084 691.825 503.79C691.405 499.68 693.984 497.51 695.99 496.85C701.762 494.951 700.796 500.705 697.984 502.905C701.428 508.572 706.978 499.13 703.745 495.502Z" fill="#38311B"/>
+<path d="M478.839 495.502C477.512 493.115 473.365 491.552 470.067 493.638C471.725 490.441 465.881 475.709 464.868 475.709C463.854 475.709 459.501 486.14 460.287 494.399C454.872 489.494 447.096 496.423 450.763 502.469C452.073 506.063 458.423 505.243 456.165 501.28C452.814 503.078 453.627 496.222 457.341 496.645C461.386 497.105 463.405 499.752 462.761 503.6C462.346 506.076 461.485 506.509 459.396 508.187C463.165 511.92 464.256 518.5 464.988 518.5C465.791 518.5 465.385 513.118 470.229 508.187C467.764 506.403 467.154 506.084 466.919 503.79C466.499 499.68 469.078 497.51 471.084 496.85C476.855 494.951 475.889 500.705 473.078 502.905C476.521 508.572 482.071 499.13 478.839 495.502Z" fill="#38311B"/>
+<path d="M253.933 495.502C252.606 493.115 248.459 491.552 245.161 493.638C246.819 490.441 240.975 475.709 239.962 475.709C238.948 475.709 234.595 486.14 235.381 494.399C229.966 489.494 222.189 496.423 225.857 502.469C227.167 506.063 233.517 505.243 231.259 501.28C227.907 503.078 228.72 496.222 232.435 496.645C236.48 497.105 238.499 499.752 237.855 503.6C237.44 506.076 236.578 506.509 234.49 508.187C238.259 511.92 239.35 518.5 240.081 518.5C240.885 518.5 240.479 513.118 245.322 508.187C242.858 506.403 242.247 506.084 242.013 503.79C241.593 499.68 244.171 497.51 246.178 496.85C251.949 494.951 250.983 500.705 248.171 502.905C251.615 508.572 257.165 499.13 253.933 495.502Z" fill="#38311B"/>
+<path d="M29.0246 495.502C27.6976 493.115 23.5508 491.552 20.2525 493.638C21.9104 490.441 16.0669 475.709 15.0534 475.709C14.0396 475.709 9.68649 486.14 10.473 494.399C5.05791 489.494 -2.71871 496.423 0.948441 502.469C2.25885 506.063 8.60883 505.243 6.35055 501.28C2.99926 503.078 3.81224 496.222 7.52697 496.645C11.5714 497.105 13.5906 499.752 12.9465 503.6C12.5319 506.076 11.6702 506.509 9.5814 508.187C13.3503 511.92 14.4415 518.5 15.1732 518.5C15.9769 518.5 15.5704 513.118 20.4142 508.187C17.95 506.403 17.3391 506.084 17.1048 503.79C16.6848 499.68 19.2631 497.51 21.2694 496.85C27.0409 494.951 26.075 500.705 23.2633 502.905C26.707 508.572 32.257 499.13 29.0246 495.502Z" fill="#38311B"/>
+<path d="M1043.65 337.186C1042.32 334.798 1038.18 333.236 1034.88 335.322C1036.54 332.124 1030.69 317.393 1029.68 317.393C1028.67 317.393 1024.31 327.824 1025.1 336.082C1019.68 331.178 1011.91 338.107 1015.58 344.153C1016.89 347.746 1023.24 346.927 1020.98 342.964C1017.63 344.762 1018.44 337.905 1022.15 338.328C1026.2 338.788 1028.22 341.436 1027.57 345.283C1027.16 347.759 1026.3 348.193 1024.21 349.87C1027.98 353.604 1029.07 360.184 1029.8 360.184C1030.6 360.184 1030.2 354.802 1035.04 349.87C1032.58 348.087 1031.97 347.768 1031.73 345.473C1031.31 341.364 1033.89 339.194 1035.9 338.534C1041.67 336.635 1040.7 342.389 1037.89 344.589C1041.33 350.256 1046.88 340.814 1043.65 337.186Z" fill="#38311B"/>
+<path d="M818.745 337.186C817.418 334.798 813.272 333.236 809.973 335.322C811.631 332.124 805.788 317.393 804.774 317.393C803.76 317.393 799.407 327.824 800.194 336.082C794.779 331.178 787.002 338.107 790.669 344.153C791.98 347.746 798.33 346.927 796.071 342.964C792.72 344.762 793.533 337.905 797.248 338.328C801.292 338.788 803.311 341.436 802.667 345.283C802.253 347.759 801.391 348.193 799.302 349.87C803.071 353.604 804.162 360.184 804.894 360.184C805.698 360.184 805.291 354.802 810.135 349.87C807.671 348.087 807.06 347.768 806.825 345.473C806.405 341.364 808.984 339.194 810.99 338.534C816.762 336.635 815.796 342.389 812.984 344.589C816.428 350.256 821.978 340.814 818.745 337.186Z" fill="#38311B"/>
+<path d="M593.839 337.186C592.512 334.798 588.365 333.236 585.067 335.322C586.725 332.124 580.881 317.393 579.868 317.393C578.854 317.393 574.501 327.824 575.287 336.082C569.872 331.178 562.096 338.107 565.763 344.153C567.073 347.746 573.423 346.927 571.165 342.964C567.814 344.762 568.627 337.905 572.341 338.328C576.386 338.788 578.405 341.436 577.761 345.283C577.346 347.759 576.485 348.193 574.396 349.87C578.165 353.604 579.256 360.184 579.988 360.184C580.791 360.184 580.385 354.802 585.229 349.87C582.764 348.087 582.154 347.768 581.919 345.473C581.499 341.364 584.078 339.194 586.084 338.534C591.855 336.635 590.889 342.389 588.078 344.589C591.521 350.256 597.071 340.814 593.839 337.186Z" fill="#38311B"/>
+<path d="M368.933 337.186C367.606 334.798 363.459 333.236 360.161 335.322C361.819 332.124 355.975 317.393 354.962 317.393C353.948 317.393 349.595 327.824 350.381 336.082C344.966 331.178 337.189 338.107 340.857 344.153C342.167 347.746 348.517 346.927 346.259 342.964C342.907 344.762 343.72 337.905 347.435 338.328C351.48 338.788 353.499 341.436 352.855 345.283C352.44 347.759 351.578 348.193 349.49 349.87C353.259 353.604 354.35 360.184 355.081 360.184C355.885 360.184 355.479 354.802 360.322 349.87C357.858 348.087 357.247 347.768 357.013 345.473C356.593 341.364 359.171 339.194 361.178 338.534C366.949 336.635 365.983 342.389 363.171 344.589C366.615 350.256 372.165 340.814 368.933 337.186Z" fill="#38311B"/>
+<path d="M144.025 337.186C142.698 334.798 138.551 333.236 135.253 335.322C136.91 332.124 131.067 317.393 130.053 317.393C129.04 317.393 124.686 327.824 125.473 336.082C120.058 331.178 112.281 338.107 115.948 344.153C117.259 347.746 123.609 346.927 121.351 342.964C117.999 344.762 118.812 337.905 122.527 338.328C126.571 338.788 128.591 341.436 127.947 345.283C127.532 347.759 126.67 348.193 124.581 349.87C128.35 353.604 129.442 360.184 130.173 360.184C130.977 360.184 130.57 354.802 135.414 349.87C132.95 348.087 132.339 347.768 132.105 345.473C131.685 341.364 134.263 339.194 136.269 338.534C142.041 336.635 141.075 342.389 138.263 344.589C141.707 350.256 147.257 340.814 144.025 337.186Z" fill="#38311B"/>
+<path d="M1153.56 178.869C1152.23 176.482 1148.09 174.919 1144.79 177.006C1146.45 173.808 1140.6 159.077 1139.59 159.077C1138.57 159.077 1134.22 169.508 1135.01 177.766C1129.59 172.862 1121.82 179.79 1125.48 185.836C1126.79 189.43 1133.14 188.61 1130.89 184.647C1127.53 186.445 1128.35 179.589 1132.06 180.012C1136.11 180.472 1138.13 183.119 1137.48 186.967C1137.07 189.443 1136.21 189.876 1134.12 191.554C1137.89 195.287 1138.98 201.867 1139.71 201.867C1140.51 201.867 1140.11 196.485 1144.95 191.554C1142.49 189.771 1141.87 189.451 1141.64 187.157C1141.22 183.047 1143.8 180.877 1145.8 180.217C1151.58 178.318 1150.61 184.073 1147.8 186.272C1151.24 191.939 1156.79 182.497 1153.56 178.869Z" fill="#38311B"/>
+<path d="M928.652 178.869C927.325 176.482 923.178 174.919 919.879 177.006C921.537 173.808 915.694 159.077 914.68 159.077C913.667 159.077 909.313 169.508 910.1 177.766C904.685 172.862 896.908 179.79 900.575 185.836C901.886 189.43 908.236 188.61 905.978 184.647C902.626 186.445 903.439 179.589 907.154 180.012C911.198 180.472 913.218 183.119 912.573 186.967C912.159 189.443 911.297 189.876 909.208 191.554C912.977 195.287 914.068 201.867 914.8 201.867C915.604 201.867 915.197 196.485 920.041 191.554C917.577 189.771 916.966 189.451 916.732 187.157C916.312 183.047 918.89 180.877 920.896 180.217C926.668 178.318 925.702 184.073 922.89 186.272C926.334 191.939 931.884 182.497 928.652 178.869Z" fill="#38311B"/>
+<path d="M703.745 178.869C702.418 176.482 698.272 174.919 694.973 177.006C696.631 173.808 690.788 159.077 689.774 159.077C688.76 159.077 684.407 169.508 685.194 177.766C679.779 172.862 672.002 179.79 675.669 185.836C676.98 189.43 683.33 188.61 681.071 184.647C677.72 186.445 678.533 179.589 682.248 180.012C686.292 180.472 688.311 183.119 687.667 186.967C687.253 189.443 686.391 189.876 684.302 191.554C688.071 195.287 689.162 201.867 689.894 201.867C690.698 201.867 690.291 196.485 695.135 191.554C692.671 189.771 692.06 189.451 691.825 187.157C691.405 183.047 693.984 180.877 695.99 180.217C701.762 178.318 700.796 184.073 697.984 186.272C701.428 191.939 706.978 182.497 703.745 178.869Z" fill="#38311B"/>
+<path d="M478.839 178.869C477.512 176.482 473.365 174.919 470.067 177.006C471.725 173.808 465.881 159.077 464.868 159.077C463.854 159.077 459.501 169.508 460.287 177.766C454.872 172.862 447.096 179.79 450.763 185.836C452.073 189.43 458.423 188.61 456.165 184.647C452.814 186.445 453.627 179.589 457.341 180.012C461.386 180.472 463.405 183.119 462.761 186.967C462.346 189.443 461.485 189.876 459.396 191.554C463.165 195.287 464.256 201.867 464.988 201.867C465.791 201.867 465.385 196.485 470.229 191.554C467.764 189.771 467.154 189.451 466.919 187.157C466.499 183.047 469.078 180.877 471.084 180.217C476.855 178.318 475.889 184.073 473.078 186.272C476.521 191.939 482.071 182.497 478.839 178.869Z" fill="#38311B"/>
+<path d="M253.933 178.869C252.606 176.482 248.459 174.919 245.161 177.006C246.819 173.808 240.975 159.077 239.962 159.077C238.948 159.077 234.595 169.508 235.381 177.766C229.966 172.862 222.189 179.79 225.857 185.836C227.167 189.43 233.517 188.61 231.259 184.647C227.907 186.445 228.72 179.589 232.435 180.012C236.48 180.472 238.499 183.119 237.855 186.967C237.44 189.443 236.578 189.876 234.49 191.554C238.259 195.287 239.35 201.867 240.081 201.867C240.885 201.867 240.479 196.485 245.322 191.554C242.858 189.771 242.247 189.451 242.013 187.157C241.593 183.047 244.171 180.877 246.178 180.217C251.949 178.318 250.983 184.073 248.171 186.272C251.615 191.939 257.165 182.497 253.933 178.869Z" fill="#38311B"/>
+<path d="M29.0246 178.869C27.6976 176.482 23.5508 174.919 20.2525 177.006C21.9104 173.808 16.0669 159.077 15.0534 159.077C14.0396 159.077 9.68649 169.508 10.473 177.766C5.05791 172.862 -2.71871 179.79 0.948441 185.836C2.25885 189.43 8.60883 188.61 6.35055 184.647C2.99926 186.445 3.81224 179.589 7.52697 180.012C11.5714 180.472 13.5906 183.119 12.9465 186.967C12.5319 189.443 11.6702 189.876 9.5814 191.554C13.3503 195.287 14.4415 201.867 15.1732 201.867C15.9769 201.867 15.5704 196.485 20.4142 191.554C17.95 189.771 17.3391 189.451 17.1048 187.157C16.6848 183.047 19.2631 180.877 21.2694 180.217C27.0409 178.318 26.075 184.073 23.2633 186.272C26.707 191.939 32.257 182.497 29.0246 178.869Z" fill="#38311B"/>
+<path d="M1265 17.967C1263.37 17.5106 1261.47 17.6272 1259.79 18.6892C1261.45 15.4915 1255.6 0.760254 1254.59 0.760254C1253.57 0.760254 1249.22 11.1911 1250.01 19.4495C1244.59 14.5451 1236.82 21.4738 1240.48 27.52C1241.79 31.1137 1248.14 30.2938 1245.89 26.3309C1242.53 28.1288 1243.35 21.2727 1247.06 21.6954C1251.11 22.1555 1253.13 24.8028 1252.48 28.6506C1252.11 30.8711 1251.38 31.4488 1249.72 32.7549C1249.53 32.905 1249.33 33.0647 1249.12 33.2377C1251.54 35.6425 1252.86 39.2287 1253.69 41.4763C1254.14 42.7177 1254.45 43.5508 1254.71 43.5508C1254.97 43.5508 1255.1 43.0016 1255.32 42.0933C1255.79 40.1583 1256.65 36.5936 1259.95 33.2377C1259.82 33.1416 1259.69 33.0498 1259.57 32.9617C1257.42 31.4141 1256.86 31.0112 1256.64 28.8403C1256.22 24.7309 1258.8 22.5608 1260.8 21.9008C1263.58 20.9886 1264.79 21.8421 1265 23.2194V17.967Z" fill="#38311B"/>
+<path d="M1265 24.1493C1264.83 25.4932 1263.97 27.0357 1262.8 27.956C1263.48 29.0745 1264.24 29.6044 1265 29.7065V24.1493Z" fill="#38311B"/>
+<path d="M1043.65 20.5527C1042.32 18.1653 1038.18 16.6029 1034.88 18.6892C1036.54 15.4915 1030.69 0.760254 1029.68 0.760254C1028.67 0.760254 1024.31 11.1911 1025.1 19.4495C1019.68 14.5451 1011.91 21.4738 1015.58 27.52C1016.89 31.1137 1023.24 30.2938 1020.98 26.3309C1017.63 28.1288 1018.44 21.2727 1022.15 21.6954C1026.2 22.1555 1028.22 24.8028 1027.57 28.6506C1027.16 31.1263 1026.3 31.5599 1024.21 33.2377C1027.98 36.9708 1029.07 43.5508 1029.8 43.5508C1030.6 43.5508 1030.2 38.1688 1035.04 33.2377C1032.58 31.4542 1031.97 31.1348 1031.73 28.8403C1031.31 24.7309 1033.89 22.5608 1035.9 21.9008C1041.67 20.0017 1040.7 25.7561 1037.89 27.956C1041.33 33.6228 1046.88 24.1807 1043.65 20.5527Z" fill="#38311B"/>
+<path d="M818.745 20.5527C817.418 18.1653 813.272 16.6029 809.973 18.6892C811.631 15.4915 805.788 0.760254 804.774 0.760254C803.76 0.760254 799.407 11.1911 800.194 19.4495C794.779 14.5451 787.002 21.4738 790.669 27.52C791.98 31.1137 798.33 30.2938 796.071 26.3309C792.72 28.1288 793.533 21.2727 797.248 21.6954C801.292 22.1555 803.311 24.8028 802.667 28.6506C802.253 31.1263 801.391 31.5599 799.302 33.2377C803.071 36.9708 804.162 43.5508 804.894 43.5508C805.698 43.5508 805.291 38.1688 810.135 33.2377C807.671 31.4542 807.06 31.1348 806.825 28.8403C806.405 24.7309 808.984 22.5608 810.99 21.9008C816.762 20.0017 815.796 25.7561 812.984 27.956C816.428 33.6228 821.978 24.1807 818.745 20.5527Z" fill="#38311B"/>
+<path d="M593.839 20.5527C592.512 18.1653 588.365 16.6029 585.067 18.6892C586.725 15.4915 580.881 0.760254 579.868 0.760254C578.854 0.760254 574.501 11.1911 575.287 19.4495C569.872 14.5451 562.096 21.4738 565.763 27.52C567.073 31.1137 573.423 30.2938 571.165 26.3309C567.814 28.1288 568.627 21.2727 572.341 21.6954C576.386 22.1555 578.405 24.8028 577.761 28.6506C577.346 31.1263 576.485 31.5599 574.396 33.2377C578.165 36.9708 579.256 43.5508 579.988 43.5508C580.791 43.5508 580.385 38.1688 585.229 33.2377C582.764 31.4542 582.154 31.1348 581.919 28.8403C581.499 24.7309 584.078 22.5608 586.084 21.9008C591.855 20.0017 590.889 25.7561 588.078 27.956C591.521 33.6228 597.071 24.1807 593.839 20.5527Z" fill="#38311B"/>
+<path d="M368.933 20.5527C367.606 18.1653 363.459 16.6029 360.161 18.6892C361.819 15.4915 355.975 0.760254 354.962 0.760254C353.948 0.760254 349.595 11.1911 350.381 19.4495C344.966 14.5451 337.189 21.4738 340.857 27.52C342.167 31.1137 348.517 30.2938 346.259 26.3309C342.907 28.1288 343.72 21.2727 347.435 21.6954C351.48 22.1555 353.499 24.8028 352.855 28.6506C352.44 31.1263 351.578 31.5599 349.49 33.2377C353.259 36.9708 354.35 43.5508 355.081 43.5508C355.885 43.5508 355.479 38.1688 360.322 33.2377C357.858 31.4542 357.247 31.1348 357.013 28.8403C356.593 24.7309 359.171 22.5608 361.178 21.9008C366.949 20.0017 365.983 25.7561 363.171 27.956C366.615 33.6228 372.165 24.1807 368.933 20.5527Z" fill="#38311B"/>
+<path d="M144.025 20.5527C142.698 18.1653 138.551 16.6029 135.253 18.6892C136.91 15.4915 131.067 0.760254 130.053 0.760254C129.04 0.760254 124.686 11.1911 125.473 19.4495C120.058 14.5451 112.281 21.4738 115.948 27.52C117.259 31.1137 123.609 30.2938 121.351 26.3309C117.999 28.1288 118.812 21.2727 122.527 21.6954C126.571 22.1555 128.591 24.8028 127.947 28.6506C127.532 31.1263 126.67 31.5599 124.581 33.2377C128.35 36.9708 129.442 43.5508 130.173 43.5508C130.977 43.5508 130.57 38.1688 135.414 33.2377C132.95 31.4542 132.339 31.1348 132.105 28.8403C131.685 24.7309 134.263 22.5608 136.269 21.9008C142.041 20.0017 141.075 25.7561 138.263 27.956C141.707 33.6228 147.257 24.1807 144.025 20.5527Z" fill="#38311B"/>
+</svg>

packages/preset-themes/public/images/hufflepuff/hufflepuff-light-bg.svg

@@ -0,0 +1,27 @@
+<svg width="1265" height="585" viewBox="0 0 1265 585" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M807.925 584.671H764L1264.17 234H1265.82V263.638L807.925 584.671ZM898.214 584.671H854.289L1265.82 296.144V326.94L898.214 584.671ZM990.944 584.671H947.02L1265.82 361.158V391.954L990.944 584.671ZM1080.68 584.671H1036.76L1265.82 424.074V454.87L1080.68 584.671ZM1170.97 584.671H1127.05L1265.82 487.378V518.174L1170.97 584.671Z" fill="#FDF5DB"/>
+<path d="M1153.56 495.502C1152.23 493.115 1148.09 491.552 1144.79 493.638C1146.45 490.441 1140.6 475.709 1139.59 475.709C1138.57 475.709 1134.22 486.14 1135.01 494.399C1129.59 489.494 1121.82 496.423 1125.48 502.469C1126.79 506.063 1133.14 505.243 1130.89 501.28C1127.53 503.078 1128.35 496.222 1132.06 496.645C1136.11 497.105 1138.13 499.752 1137.48 503.6C1137.07 506.076 1136.21 506.509 1134.12 508.187C1137.89 511.92 1138.98 518.5 1139.71 518.5C1140.51 518.5 1140.11 513.118 1144.95 508.187C1142.49 506.403 1141.87 506.084 1141.64 503.79C1141.22 499.68 1143.8 497.51 1145.8 496.85C1151.58 494.951 1150.61 500.705 1147.8 502.905C1151.24 508.572 1156.79 499.13 1153.56 495.502Z" fill="#FDF5DB"/>
+<path d="M928.652 495.502C927.325 493.115 923.178 491.552 919.879 493.638C921.537 490.441 915.694 475.709 914.68 475.709C913.667 475.709 909.313 486.14 910.1 494.399C904.685 489.494 896.908 496.423 900.575 502.469C901.886 506.063 908.236 505.243 905.978 501.28C902.626 503.078 903.439 496.222 907.154 496.645C911.198 497.105 913.218 499.752 912.573 503.6C912.159 506.076 911.297 506.509 909.208 508.187C912.977 511.92 914.068 518.5 914.8 518.5C915.604 518.5 915.197 513.118 920.041 508.187C917.577 506.403 916.966 506.084 916.732 503.79C916.312 499.68 918.89 497.51 920.896 496.85C926.668 494.951 925.702 500.705 922.89 502.905C926.334 508.572 931.884 499.13 928.652 495.502Z" fill="#FDF5DB"/>
+<path d="M703.745 495.502C702.418 493.115 698.272 491.552 694.973 493.638C696.631 490.441 690.788 475.709 689.774 475.709C688.76 475.709 684.407 486.14 685.194 494.399C679.779 489.494 672.002 496.423 675.669 502.469C676.98 506.063 683.33 505.243 681.071 501.28C677.72 503.078 678.533 496.222 682.248 496.645C686.292 497.105 688.311 499.752 687.667 503.6C687.253 506.076 686.391 506.509 684.302 508.187C688.071 511.92 689.162 518.5 689.894 518.5C690.698 518.5 690.291 513.118 695.135 508.187C692.671 506.403 692.06 506.084 691.825 503.79C691.405 499.68 693.984 497.51 695.99 496.85C701.762 494.951 700.796 500.705 697.984 502.905C701.428 508.572 706.978 499.13 703.745 495.502Z" fill="#FDF5DB"/>
+<path d="M478.839 495.502C477.512 493.115 473.365 491.552 470.067 493.638C471.725 490.441 465.881 475.709 464.868 475.709C463.854 475.709 459.501 486.14 460.287 494.399C454.872 489.494 447.096 496.423 450.763 502.469C452.073 506.063 458.423 505.243 456.165 501.28C452.814 503.078 453.627 496.222 457.341 496.645C461.386 497.105 463.405 499.752 462.761 503.6C462.346 506.076 461.485 506.509 459.396 508.187C463.165 511.92 464.256 518.5 464.988 518.5C465.791 518.5 465.385 513.118 470.229 508.187C467.764 506.403 467.154 506.084 466.919 503.79C466.499 499.68 469.078 497.51 471.084 496.85C476.855 494.951 475.889 500.705 473.078 502.905C476.521 508.572 482.071 499.13 478.839 495.502Z" fill="#FDF5DB"/>
+<path d="M253.933 495.502C252.606 493.115 248.459 491.552 245.161 493.638C246.819 490.441 240.975 475.709 239.962 475.709C238.948 475.709 234.595 486.14 235.381 494.399C229.966 489.494 222.189 496.423 225.857 502.469C227.167 506.063 233.517 505.243 231.259 501.28C227.907 503.078 228.72 496.222 232.435 496.645C236.48 497.105 238.499 499.752 237.855 503.6C237.44 506.076 236.578 506.509 234.49 508.187C238.259 511.92 239.35 518.5 240.081 518.5C240.885 518.5 240.479 513.118 245.322 508.187C242.858 506.403 242.247 506.084 242.013 503.79C241.593 499.68 244.171 497.51 246.178 496.85C251.949 494.951 250.983 500.705 248.171 502.905C251.615 508.572 257.165 499.13 253.933 495.502Z" fill="#FDF5DB"/>
+<path d="M29.0246 495.502C27.6976 493.115 23.5508 491.552 20.2525 493.638C21.9104 490.441 16.0669 475.709 15.0534 475.709C14.0396 475.709 9.68649 486.14 10.473 494.399C5.05791 489.494 -2.71871 496.423 0.948441 502.469C2.25885 506.063 8.60884 505.243 6.35055 501.28C2.99926 503.078 3.81224 496.222 7.52697 496.645C11.5714 497.105 13.5906 499.752 12.9465 503.6C12.5319 506.076 11.6702 506.509 9.5814 508.187C13.3503 511.92 14.4415 518.5 15.1732 518.5C15.9769 518.5 15.5704 513.118 20.4142 508.187C17.95 506.403 17.3391 506.084 17.1048 503.79C16.6848 499.68 19.2631 497.51 21.2694 496.85C27.0409 494.951 26.075 500.705 23.2633 502.905C26.707 508.572 32.257 499.13 29.0246 495.502Z" fill="#FDF5DB"/>
+<path d="M1043.65 337.186C1042.32 334.798 1038.18 333.236 1034.88 335.322C1036.54 332.124 1030.69 317.393 1029.68 317.393C1028.67 317.393 1024.31 327.824 1025.1 336.082C1019.68 331.178 1011.91 338.107 1015.58 344.153C1016.89 347.746 1023.24 346.927 1020.98 342.964C1017.63 344.762 1018.44 337.905 1022.15 338.328C1026.2 338.788 1028.22 341.436 1027.57 345.283C1027.16 347.759 1026.3 348.193 1024.21 349.87C1027.98 353.604 1029.07 360.184 1029.8 360.184C1030.6 360.184 1030.2 354.802 1035.04 349.87C1032.58 348.087 1031.97 347.768 1031.73 345.473C1031.31 341.364 1033.89 339.194 1035.9 338.534C1041.67 336.635 1040.7 342.389 1037.89 344.589C1041.33 350.256 1046.88 340.814 1043.65 337.186Z" fill="#FDF5DB"/>
+<path d="M818.745 337.186C817.418 334.798 813.272 333.236 809.973 335.322C811.631 332.124 805.788 317.393 804.774 317.393C803.76 317.393 799.407 327.824 800.194 336.082C794.779 331.178 787.002 338.107 790.669 344.153C791.98 347.746 798.33 346.927 796.071 342.964C792.72 344.762 793.533 337.905 797.248 338.328C801.292 338.788 803.311 341.436 802.667 345.283C802.253 347.759 801.391 348.193 799.302 349.87C803.071 353.604 804.162 360.184 804.894 360.184C805.698 360.184 805.291 354.802 810.135 349.87C807.671 348.087 807.06 347.768 806.825 345.473C806.405 341.364 808.984 339.194 810.99 338.534C816.762 336.635 815.796 342.389 812.984 344.589C816.428 350.256 821.978 340.814 818.745 337.186Z" fill="#FDF5DB"/>
+<path d="M593.839 337.186C592.512 334.798 588.365 333.236 585.067 335.322C586.725 332.124 580.881 317.393 579.868 317.393C578.854 317.393 574.501 327.824 575.287 336.082C569.872 331.178 562.096 338.107 565.763 344.153C567.073 347.746 573.423 346.927 571.165 342.964C567.814 344.762 568.627 337.905 572.341 338.328C576.386 338.788 578.405 341.436 577.761 345.283C577.346 347.759 576.485 348.193 574.396 349.87C578.165 353.604 579.256 360.184 579.988 360.184C580.791 360.184 580.385 354.802 585.229 349.87C582.764 348.087 582.154 347.768 581.919 345.473C581.499 341.364 584.078 339.194 586.084 338.534C591.855 336.635 590.889 342.389 588.078 344.589C591.521 350.256 597.071 340.814 593.839 337.186Z" fill="#FDF5DB"/>
+<path d="M368.933 337.186C367.606 334.798 363.459 333.236 360.161 335.322C361.819 332.124 355.975 317.393 354.962 317.393C353.948 317.393 349.595 327.824 350.381 336.082C344.966 331.178 337.189 338.107 340.857 344.153C342.167 347.746 348.517 346.927 346.259 342.964C342.907 344.762 343.72 337.905 347.435 338.328C351.48 338.788 353.499 341.436 352.855 345.283C352.44 347.759 351.578 348.193 349.49 349.87C353.259 353.604 354.35 360.184 355.081 360.184C355.885 360.184 355.479 354.802 360.322 349.87C357.858 348.087 357.247 347.768 357.013 345.473C356.593 341.364 359.171 339.194 361.178 338.534C366.949 336.635 365.983 342.389 363.171 344.589C366.615 350.256 372.165 340.814 368.933 337.186Z" fill="#FDF5DB"/>
+<path d="M144.025 337.186C142.698 334.798 138.551 333.236 135.253 335.322C136.91 332.124 131.067 317.393 130.053 317.393C129.04 317.393 124.686 327.824 125.473 336.082C120.058 331.178 112.281 338.107 115.948 344.153C117.259 347.746 123.609 346.927 121.351 342.964C117.999 344.762 118.812 337.905 122.527 338.328C126.571 338.788 128.591 341.436 127.947 345.283C127.532 347.759 126.67 348.193 124.581 349.87C128.35 353.604 129.442 360.184 130.173 360.184C130.977 360.184 130.57 354.802 135.414 349.87C132.95 348.087 132.339 347.768 132.105 345.473C131.685 341.364 134.263 339.194 136.269 338.534C142.041 336.635 141.075 342.389 138.263 344.589C141.707 350.256 147.257 340.814 144.025 337.186Z" fill="#FDF5DB"/>
+<path d="M1153.56 178.869C1152.23 176.482 1148.09 174.919 1144.79 177.006C1146.45 173.808 1140.6 159.077 1139.59 159.077C1138.57 159.077 1134.22 169.508 1135.01 177.766C1129.59 172.862 1121.82 179.79 1125.48 185.836C1126.79 189.43 1133.14 188.61 1130.89 184.647C1127.53 186.445 1128.35 179.589 1132.06 180.012C1136.11 180.472 1138.13 183.119 1137.48 186.967C1137.07 189.443 1136.21 189.876 1134.12 191.554C1137.89 195.287 1138.98 201.867 1139.71 201.867C1140.51 201.867 1140.11 196.485 1144.95 191.554C1142.49 189.771 1141.87 189.451 1141.64 187.157C1141.22 183.047 1143.8 180.877 1145.8 180.217C1151.58 178.318 1150.61 184.073 1147.8 186.272C1151.24 191.939 1156.79 182.497 1153.56 178.869Z" fill="#FDF5DB"/>
+<path d="M928.652 178.869C927.325 176.482 923.178 174.919 919.879 177.006C921.537 173.808 915.694 159.077 914.68 159.077C913.667 159.077 909.313 169.508 910.1 177.766C904.685 172.862 896.908 179.79 900.575 185.836C901.886 189.43 908.236 188.61 905.978 184.647C902.626 186.445 903.439 179.589 907.154 180.012C911.198 180.472 913.218 183.119 912.573 186.967C912.159 189.443 911.297 189.876 909.208 191.554C912.977 195.287 914.068 201.867 914.8 201.867C915.604 201.867 915.197 196.485 920.041 191.554C917.577 189.771 916.966 189.451 916.732 187.157C916.312 183.047 918.89 180.877 920.896 180.217C926.668 178.318 925.702 184.073 922.89 186.272C926.334 191.939 931.884 182.497 928.652 178.869Z" fill="#FDF5DB"/>
+<path d="M703.745 178.869C702.418 176.482 698.272 174.919 694.973 177.006C696.631 173.808 690.788 159.077 689.774 159.077C688.76 159.077 684.407 169.508 685.194 177.766C679.779 172.862 672.002 179.79 675.669 185.836C676.98 189.43 683.33 188.61 681.071 184.647C677.72 186.445 678.533 179.589 682.248 180.012C686.292 180.472 688.311 183.119 687.667 186.967C687.253 189.443 686.391 189.876 684.302 191.554C688.071 195.287 689.162 201.867 689.894 201.867C690.698 201.867 690.291 196.485 695.135 191.554C692.671 189.771 692.06 189.451 691.825 187.157C691.405 183.047 693.984 180.877 695.99 180.217C701.762 178.318 700.796 184.073 697.984 186.272C701.428 191.939 706.978 182.497 703.745 178.869Z" fill="#FDF5DB"/>
+<path d="M478.839 178.869C477.512 176.482 473.365 174.919 470.067 177.006C471.725 173.808 465.881 159.077 464.868 159.077C463.854 159.077 459.501 169.508 460.287 177.766C454.872 172.862 447.096 179.79 450.763 185.836C452.073 189.43 458.423 188.61 456.165 184.647C452.814 186.445 453.627 179.589 457.341 180.012C461.386 180.472 463.405 183.119 462.761 186.967C462.346 189.443 461.485 189.876 459.396 191.554C463.165 195.287 464.256 201.867 464.988 201.867C465.791 201.867 465.385 196.485 470.229 191.554C467.764 189.771 467.154 189.451 466.919 187.157C466.499 183.047 469.078 180.877 471.084 180.217C476.855 178.318 475.889 184.073 473.078 186.272C476.521 191.939 482.071 182.497 478.839 178.869Z" fill="#FDF5DB"/>
+<path d="M253.933 178.869C252.606 176.482 248.459 174.919 245.161 177.006C246.819 173.808 240.975 159.077 239.962 159.077C238.948 159.077 234.595 169.508 235.381 177.766C229.966 172.862 222.189 179.79 225.857 185.836C227.167 189.43 233.517 188.61 231.259 184.647C227.907 186.445 228.72 179.589 232.435 180.012C236.48 180.472 238.499 183.119 237.855 186.967C237.44 189.443 236.578 189.876 234.49 191.554C238.259 195.287 239.35 201.867 240.081 201.867C240.885 201.867 240.479 196.485 245.322 191.554C242.858 189.771 242.247 189.451 242.013 187.157C241.593 183.047 244.171 180.877 246.178 180.217C251.949 178.318 250.983 184.073 248.171 186.272C251.615 191.939 257.165 182.497 253.933 178.869Z" fill="#FDF5DB"/>
+<path d="M29.0246 178.869C27.6976 176.482 23.5508 174.919 20.2525 177.006C21.9104 173.808 16.0669 159.077 15.0534 159.077C14.0396 159.077 9.68649 169.508 10.473 177.766C5.05791 172.862 -2.71871 179.79 0.948441 185.836C2.25885 189.43 8.60884 188.61 6.35055 184.647C2.99926 186.445 3.81224 179.589 7.52697 180.012C11.5714 180.472 13.5906 183.119 12.9465 186.967C12.5319 189.443 11.6702 189.876 9.5814 191.554C13.3503 195.287 14.4415 201.867 15.1732 201.867C15.9769 201.867 15.5704 196.485 20.4142 191.554C17.95 189.771 17.3391 189.451 17.1048 187.157C16.6848 183.047 19.2631 180.877 21.2694 180.217C27.0409 178.318 26.075 184.073 23.2633 186.272C26.707 191.939 32.257 182.497 29.0246 178.869Z" fill="#FDF5DB"/>
+<path d="M1265 17.967C1263.37 17.5106 1261.47 17.6272 1259.79 18.6892C1261.45 15.4915 1255.6 0.760254 1254.59 0.760254C1253.57 0.760254 1249.22 11.1911 1250.01 19.4495C1244.59 14.5451 1236.82 21.4738 1240.48 27.52C1241.79 31.1137 1248.14 30.2938 1245.89 26.3309C1242.53 28.1288 1243.35 21.2727 1247.06 21.6954C1251.11 22.1555 1253.13 24.8028 1252.48 28.6506C1252.11 30.8711 1251.38 31.4488 1249.72 32.7549C1249.53 32.905 1249.33 33.0647 1249.12 33.2377C1251.54 35.6425 1252.86 39.2287 1253.69 41.4763C1254.14 42.7177 1254.45 43.5508 1254.71 43.5508C1254.97 43.5508 1255.1 43.0016 1255.32 42.0933C1255.79 40.1583 1256.65 36.5936 1259.95 33.2377C1259.82 33.1416 1259.69 33.0498 1259.57 32.9617C1257.42 31.4141 1256.86 31.0112 1256.64 28.8403C1256.22 24.7309 1258.8 22.5608 1260.8 21.9008C1263.58 20.9886 1264.79 21.8421 1265 23.2194V17.967Z" fill="#FDF5DB"/>
+<path d="M1265 24.1493C1264.83 25.4932 1263.97 27.0357 1262.8 27.956C1263.48 29.0745 1264.24 29.6044 1265 29.7065V24.1493Z" fill="#FDF5DB"/>
+<path d="M1043.65 20.5527C1042.32 18.1653 1038.18 16.6029 1034.88 18.6892C1036.54 15.4915 1030.69 0.760254 1029.68 0.760254C1028.67 0.760254 1024.31 11.1911 1025.1 19.4495C1019.68 14.5451 1011.91 21.4738 1015.58 27.52C1016.89 31.1137 1023.24 30.2938 1020.98 26.3309C1017.63 28.1288 1018.44 21.2727 1022.15 21.6954C1026.2 22.1555 1028.22 24.8028 1027.57 28.6506C1027.16 31.1263 1026.3 31.5599 1024.21 33.2377C1027.98 36.9708 1029.07 43.5508 1029.8 43.5508C1030.6 43.5508 1030.2 38.1688 1035.04 33.2377C1032.58 31.4542 1031.97 31.1348 1031.73 28.8403C1031.31 24.7309 1033.89 22.5608 1035.9 21.9008C1041.67 20.0017 1040.7 25.7561 1037.89 27.956C1041.33 33.6228 1046.88 24.1807 1043.65 20.5527Z" fill="#FDF5DB"/>
+<path d="M818.745 20.5527C817.418 18.1653 813.272 16.6029 809.973 18.6892C811.631 15.4915 805.788 0.760254 804.774 0.760254C803.76 0.760254 799.407 11.1911 800.194 19.4495C794.779 14.5451 787.002 21.4738 790.669 27.52C791.98 31.1137 798.33 30.2938 796.071 26.3309C792.72 28.1288 793.533 21.2727 797.248 21.6954C801.292 22.1555 803.311 24.8028 802.667 28.6506C802.253 31.1263 801.391 31.5599 799.302 33.2377C803.071 36.9708 804.162 43.5508 804.894 43.5508C805.698 43.5508 805.291 38.1688 810.135 33.2377C807.671 31.4542 807.06 31.1348 806.825 28.8403C806.405 24.7309 808.984 22.5608 810.99 21.9008C816.762 20.0017 815.796 25.7561 812.984 27.956C816.428 33.6228 821.978 24.1807 818.745 20.5527Z" fill="#FDF5DB"/>
+<path d="M593.839 20.5527C592.512 18.1653 588.365 16.6029 585.067 18.6892C586.725 15.4915 580.881 0.760254 579.868 0.760254C578.854 0.760254 574.501 11.1911 575.287 19.4495C569.872 14.5451 562.096 21.4738 565.763 27.52C567.073 31.1137 573.423 30.2938 571.165 26.3309C567.814 28.1288 568.627 21.2727 572.341 21.6954C576.386 22.1555 578.405 24.8028 577.761 28.6506C577.346 31.1263 576.485 31.5599 574.396 33.2377C578.165 36.9708 579.256 43.5508 579.988 43.5508C580.791 43.5508 580.385 38.1688 585.229 33.2377C582.764 31.4542 582.154 31.1348 581.919 28.8403C581.499 24.7309 584.078 22.5608 586.084 21.9008C591.855 20.0017 590.889 25.7561 588.078 27.956C591.521 33.6228 597.071 24.1807 593.839 20.5527Z" fill="#FDF5DB"/>
+<path d="M368.933 20.5527C367.606 18.1653 363.459 16.6029 360.161 18.6892C361.819 15.4915 355.975 0.760254 354.962 0.760254C353.948 0.760254 349.595 11.1911 350.381 19.4495C344.966 14.5451 337.189 21.4738 340.857 27.52C342.167 31.1137 348.517 30.2938 346.259 26.3309C342.907 28.1288 343.72 21.2727 347.435 21.6954C351.48 22.1555 353.499 24.8028 352.855 28.6506C352.44 31.1263 351.578 31.5599 349.49 33.2377C353.259 36.9708 354.35 43.5508 355.081 43.5508C355.885 43.5508 355.479 38.1688 360.322 33.2377C357.858 31.4542 357.247 31.1348 357.013 28.8403C356.593 24.7309 359.171 22.5608 361.178 21.9008C366.949 20.0017 365.983 25.7561 363.171 27.956C366.615 33.6228 372.165 24.1807 368.933 20.5527Z" fill="#FDF5DB"/>
+<path d="M144.025 20.5527C142.698 18.1653 138.551 16.6029 135.253 18.6892C136.91 15.4915 131.067 0.760254 130.053 0.760254C129.04 0.760254 124.686 11.1911 125.473 19.4495C120.058 14.5451 112.281 21.4738 115.948 27.52C117.259 31.1137 123.609 30.2938 121.351 26.3309C117.999 28.1288 118.812 21.2727 122.527 21.6954C126.571 22.1555 128.591 24.8028 127.947 28.6506C127.532 31.1263 126.67 31.5599 124.581 33.2377C128.35 36.9708 129.442 43.5508 130.173 43.5508C130.977 43.5508 130.57 38.1688 135.414 33.2377C132.95 31.4542 132.339 31.1348 132.105 28.8403C131.685 24.7309 134.263 22.5608 136.269 21.9008C142.041 20.0017 141.075 25.7561 138.263 27.956C141.707 33.6228 147.257 24.1807 144.025 20.5527Z" fill="#FDF5DB"/>
+</svg>

packages/preset-themes/src/consts/preset-themes.ts

@@ -10,7 +10,7 @@ export const PresetThemes = {
   FIRE_RED: 'fire-red',
   FUTURE: 'future',
   HALLOWEEN: 'halloween',
-  // HUFFLEPUFF: 'hufflepuff',
+  HUFFLEPUFF: 'hufflepuff',
   ISLAND: 'island',
   JADE_GREEN: 'jade-green',
   KIBELA: 'kibela',
@@ -52,17 +52,17 @@ export const PresetThemesMetadatas: GrowiThemeMetadata[] = [
     darkIcon: '#69B0C7',
     createBtn: '#439CB9',
   },
-  //  {
-  //   name: PresetThemes.HUFFLEPUFF,
-  //   schemeType: BOTH,
-  //   lightBg: '#FFFEFD',
-  //   darkBg: '#26231E',
-  //   lightSidebar: '#FEEBA5',
-  //   darkSidebar: '#5C4209',
-  //   lightIcon: '#B88512',
-  //   darkIcon: '#EBB845',
-  //   createBtn: '#403C39',
-  // },
+  {
+    name: PresetThemes.HUFFLEPUFF,
+    schemeType: BOTH,
+    lightBg: '#FFFEFD',
+    darkBg: '#26231E',
+    lightSidebar: '#FEEBA5',
+    darkSidebar: '#5C4209',
+    lightIcon: '#B88512',
+    darkIcon: '#EBB845',
+    createBtn: '#403C39',
+  },
   {
     name: PresetThemes.FIRE_RED,
     schemeType: BOTH,

packages/preset-themes/src/styles/hufflepuff.scss

@@ -1,363 +1,449 @@
-@use '@growi/core/scss/bootstrap/init' as bs;
 
-@use './variables' as var;
-@use './theme/mixins/page-editor-mode-manager';
-@use './theme/hsl-functions' as hsl;
+:root[data-bs-theme='light'] {
+  @import '@growi/core/scss/bootstrap/init-stage-1';
+  @import '@growi/core/scss/bootstrap/theming/variables';
+  @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
 
-// == Define Bootstrap theme colors
-//
+  $primary: #E6A616;
+  $highlight: #FCD63A;
 
-// colors for overriding bootstrap $theme-colors
-// --info: #;
-// --success: #;
-// --warning: #;
-// --danger: #;
-// --light: #;
-// --dark: #;
+  @include generate-color-palette('primary', $primary, black, white);
+  @include generate-color-palette('highlight', $highlight, #201A00, #FFF0C0);
 
-//== Light Mode
-//
-:root[data-bs-theme='light'] {
-  // Theme colors
-  --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
-  --primary-hs: 41,83%;
-  --primary-l: 52%;
-  --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
-  --secondary-hs: 41,83%;
-  --secondary-l: 65%;
-  --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l));
-  --subthemecolor-hs: 10,9%;
-  --subthemecolor-l: 13%;
-
-  // Background colors
-  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
-  --bgcolor-global-hs: 36,50%;
-  --bgcolor-global-l: 97%;
-  --bgcolor-inline-code: #{bs.$gray-100}; //optional
-  --bgcolor-card: #{bs.$gray-100};
-  --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
-  --bgcolor-keyword-highlighted: $grw-marker-green;
-
-  // Font colors
-  --color-global: var(--subthemecolor);
-  --color-global-hs: var(--subthemecolor-hs);
-  --color-global-l: var(--subthemecolor-l);
-  --color-reversal: white;
-  --color-link: hsl(var(--color-link-hs),var(--color-link-l));
-  --color-link-hs: 357,49%;
-  --color-link-l: 40%;
-  --color-link-hover: #{hsl.lighten(var(--color-link), 10%)};
-  --color-link-wiki: var(--color-link);
-  --color-link-wiki-hs: var(--color-link-hs);
-  --color-link-wiki-l: var(--color-link-l);
-  --color-link-wiki-hover: #{hsl.lighten(var(--color-link), 10%)};
-  --color-link-nabvar: var(--color-reversal);
-  --color-inline-code: #c7254e; // optional
-
-  // List Group colors
-  // --color-list: var(--color-global);
-  --bgcolor-list: transparent;
-  --color-list-hover: #{hsl.lighten(var(--primary), 10%)};
-  // --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-list), 2%)};
-  // --color-list-active: var(--bgcolor-global);
-  // --bgcolor-list-active: var(--color-link);
-
-  // Navbar
-  --bgcolor-navbar: var(--secondary);
-  --bgcolor-navbar-hs: var(--secondary-hs);
-  --bgcolor-navbar-l: var(--secondary-l);
-  --bgcolor-search-top-dropdown: var(--primary);
-  --bgcolor-search-top-dropdown-hs: var(--primary-hs);
-  --bgcolor-search-top-dropdown-l: var(--primary-l);
-  --border-image-navbar: linear-gradient(to right, #90a555 0%, #a84be6 50%, #eaab20 100%);
-
-  // Logo colors
-  --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
-
-  // Sidebar
-  --bgcolor-sidebar: var(--primary);
-  --bgcolor-sidebar-hs: var(--primary-hs);
-  --bgcolor-sidebar-l: var(--primary-l);
-
-  // Sidebar resize button
-  --color-resize-button: var(--color-reversal);
-  --bgcolor-resize-button: var(--subthemecolor);
-  --bgcolor-resize-button-hs: var(--subthemecolor-hs);
-  --bgcolor-resize-button-l: var(--subthemecolor-l);
-  --color-resize-button-hover: var(--color-reversal);
-  --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 10%)};
-
-  // Sidebar contents
-  --color-sidebar-context: var(--color-link);
-  --color-sidebar-context-hs: var(--color-link-hs);
-  --color-sidebar-context-l: var(--color-link-l);
-  --bgcolor-sidebar-context: #{hsl.darken(var(--bgcolor-global), 2%)};
-  --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs);
-  --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) - 2%);
-
-  // Sidebar list group
-  --bgcolor-sidebar-list-group: #{hsl.lighten(var(--bgcolor-global), 10%)};
-
-  // Subnavigation
-  --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
-  --bgcolor-subnav-hs: var(--bgcolor-global-hs);
-  --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
-
-  // Icon colors
-  --color-editor-icons: var(--color-link);
-
-  // Border colors
-  --border-color-theme: #{hsl.lighten(var(--subthemecolor), 40%)};
-  --bordercolor-inline-code: #ccc8c8; // optional
-
-  // Dropdown colors
-  --bgcolor-dropdown-link-active: #{var.$growi-blue};
-
-  // admin theme box
-  --color-theme-color-box: #{hsl.darken(var(--primary), 5%)};
+  $body-color:                $gray-800;
+  $body-bg:                   #FFFBEF;
 
-  &, body {
-    background-image: url('../images/hufflepuff/badger-light3.png');
-    background-attachment: fixed;
-    background-position: bottom;
-    background-size: cover;
-  }
+  $body-secondary-color:      rgba($body-color, .75);
+  $body-secondary-bg:         $gray-200;
 
-  // Button
-  .btn.btn-outline-primary {
-    @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 50%)}, #{hsl.darken(var(--primary), 50%)}, #{hsl.lighten(var(--primary), 20%)});
-  }
-  .btn-group.grw-page-editor-mode-manager {
-    .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 70%)}, #{hsl.lighten(var(--primary), 5%)}, #{hsl.lighten(var(--primary), 20%)});
-    }
-  }
+  $body-tertiary-color:       rgba($body-color, .5);
+  $body-tertiary-bg:          $gray-100;
 
-  .growi:not(.login-page) {
-    // add background-image
-    .page-editor-preview-container {
-      background-image: url('../images/hufflepuff/badger-light3.png');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-    }
-  }
+  $border-color:              $gray-300;
 
-  // login and register
-  .nologin {
-    .page-wrapper{
-      background-image: url('../images/hufflepuff/badger-light.png');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-
-      .nologin-header,
-      .nologin-dialog {
-        background-color: rgba(black, 0.1);
-        a.link-switch  {
-          color: #{hsl.darken(var(--color-global),10%)};
-        }
-      }
-      .grw-external-auth-form {
-        border-color: #993439;
-      }
-    }
-  }
+  $link-color:                $gray-800;
 
-  .table {
-    background-color: var(--bgcolor-global);
-  }
+  @import 'bootstrap/scss/variables';
+  @import 'bootstrap/scss/variables-dark';
 
-  .card-timeline > .card-header {
-    background-color: var(--secondary);
-  }
+  @import '@growi/core/scss/bootstrap/init-stage-2';
 
-  .nav.nav-tabs {
-    > .nav-item {
-      > .nav-link.active {
-        color: #231e1d;
-      }
-    }
-  }
-}
+  @import '@growi/core/scss/bootstrap/theming/apply-light';
 
-:root[data-bs-theme='dark'] {
-  // Theme colors
-  --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
-  --primary-hs: 41,83%;
-  --primary-l: 62%;
-  --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
-  --secondary-hs: 41,61%;
-  --secondary-l: 36%;
-  --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l));
-  --subthemecolor-hs: 10,9%;
-  --subthemecolor-l: 13%;
-  --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l));
-  --accentcolor-hs: 357,49%;
-  --accentcolor-l: 40%;
-
-  // Background colors
-  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
-  --bgcolor-global-hs: 77,6%;
-  --bgcolor-global-l: 23%;
-  // --bgcolor-navbar: #27343b;
-  --bgcolor-inline-code: var(--subthemecolor);
-  --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
-  --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 50%)};
-  --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-cyan, 40%)};
-
-  // Font colors
-  --color-global: hsl(var(--color-global-hs),var(--color-global-l));
-  --color-global-hs: 36,50%;
-  --color-global-l: 87%;
-  --color-reversal: #{bs.$gray-100};
-  --color-link: #{hsl.lighten(var(--primary), 30%)};
-  --color-link-hs: var(--primary-hs);
-  --color-link-l: calc(var(--primary-l) + 30%);
-  --color-link-hover: #{hsl.lighten(var(--primary), 40%)};
-  --color-link-wiki: #{hsl.lighten(var(--primary), 20%)};
-  --color-link-wiki-hs: var(--primary-hs);
-  --color-link-wiki-l: calc(var(--primary-l) + 20%);
-  --color-link-wiki-hover: #{hsl.lighten(var(--primary), 50%)};
-  --color-link-nabvar: var(--color-reversal);
-  --color-inline-code: #{hsl.lighten(var(--primary), 10%)};
-  // --color-inline-code: #c7254e; // optional
-  // --color-search: #000102;
-
-  // List Group colors
-  // --color-list: var(--color-global);
-  --bgcolor-list: transparent;
-  --color-list-hover: var(--accentcolor);
-  // --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global), 3%)};
-  // --color-list-active: var(--color-reversal);
-  // --bgcolor-list-active: var(--primary);
-
-  // Navbar
-  --bgcolor-navbar: var(--secondary);
-  --bgcolor-navbar-hs: var(--secondary-hs);
-  --bgcolor-navbar-l: var(--secondary-l);
-  --bgcolor-search-top-dropdown: #{hsl.lighten(var(--primary), 10%)};
-  --bgcolor-search-top-dropdown-hs: var(--primary-hs);
-  --bgcolor-search-top-dropdown-l: calc(var(--primary-l) + 10%);
-  --border-image-navbar: linear-gradient(to right, #90a555 0%, #3d98a3 50%, #eaab20 100%);
-
-  // Logo colors
-  --bgcolor-logo: #13191c;
-  --fillcolor-logo-mark: white;
-
-  // Sidebar
-  --bgcolor-sidebar: #{hsl.lighten(var(--primary), 10%)};
-  --bgcolor-sidebar-hs: var(--primary-hs);
-  --bgcolor-sidebar-l: calc(var(--primary-l) + 10%);
-  // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #cc951e; // optional
-
-  // Sidebar resize button
-  --color-resize-button: var(--color-global);
-  --bgcolor-resize-button: var(--accentcolor);
-  --bgcolor-resize-button-hs: var(--accentcolor-hs);
-  --bgcolor-resize-button-l: var(--accentcolor-l);
-  --color-resize-button-hover: var(--color-global);
-  --bgcolor-resize-button-hover: #{hsl.darken(var(--accentcolor), 7%)};
-
-  // Sidebar contents
-  --color-sidebar-context: var(--color-link);
-  --color-sidebar-context-hs: var(--color-link-hs);
-  --color-sidebar-context-l: var(--color-link-l);
-  --bgcolor-sidebar-context: #{hsl.lighten(var(--bgcolor-global), 5%)};
-  --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs);
-  --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) + 5%);
-
-  // Sidebar list group
-  --bgcolor-sidebar-list-group: #{hsl.lighten(var(--subthemecolor), 5%)};
-
-  // Subnavigation
-  --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
-  --bgcolor-subnav-hs: var(--bgcolor-global-hs);
-  --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
-
-  // Icon colors
-  --color-editor-icons: #{hsl.lighten(var(--primary), 10%)};
-
-  // Border colors
-  --border-color-theme: #{hsl.darken(var(--primary), 15%)};
-  --bordercolor-inline-code: #4d4d4d; // optional
-
-  // admin theme box
-  --color-theme-color-box: var(--primary);
+  --grw-wiki-link-color-rgb: var(--grw-primary-600-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-800-rgb);
 
   &, body {
-    background-image: url('../images/hufflepuff/badger-dark.jpg');
+    background-image: url('../images/hufflepuff/hufflepuff-light-bg.svg');
     background-attachment: fixed;
     background-position: bottom;
     background-size: cover;
   }
+}
 
-  // Navs
-  .nav-tabs {
-    border-bottom: var(--border-color-theme) 1px solid;
-    .nav-link {
-      &:hover {
-        border-color: #{hsl.darken(var(--primary), 5%)};
-        border-bottom: none;
-      }
-      &.active {
-        color: var(--color-link);
-        background-color: transparent;
-        border-color: var(--border-color-theme);
-      }
-    }
-  }
+:root[data-bs-theme='dark'] {
+  @import '@growi/core/scss/bootstrap/init-stage-1';
+  @import '@growi/core/scss/bootstrap/theming/variables';
+  @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
 
-  // Table
-  .table {
-    color: white;
-  }
+  $primary: #E6A616;
+  $highlight: #FCD63A;
 
-  // Button
-  .btn.btn-outline-primary {
-    @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)});
-  }
-  .btn-group.grw-page-editor-mode-manager {
-    .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)});
-    }
-  }
+  @include generate-color-palette('primary', $primary, black, white);
+  @include generate-color-palette('highlight', $highlight, #201A00, #FFF0C0);
 
-  .card-timeline > .card-header {
-    background-color: var(--accentcolor);
-  }
+  $body-color-dark:                   $gray-300;
+  $body-bg-dark:                      #26231E;
+
+  $body-secondary-color-dark:         rgba($body-color-dark, .75);
+  $body-secondary-bg-dark:            $gray-800;
+
+  $body-tertiary-color-dark:          rgba($body-color-dark, .5);
+  $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%);
+
+  $border-color-dark:                 $gray-700;
+
+  $link-color-dark:                   $gray-400;
 
-  .growi:not(.login-page) {
-    // add background-image
-    .page-editor-preview-container {
-      background-image: url('../images/hufflepuff/badger-dark.jpg');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-    }
-  }
 
-  // login and register
-  .nologin {
-    .page-wrapper{
-      background-image: url('../images/hufflepuff/badger-light.png');
-      background-attachment: fixed;
-      background-position: bottom;
-      background-size: cover;
-      .nologin-header,
-      .nologin-dialog {
-        background-color: rgba(black, 0.1);
-      }
-
-      .link-switch {
-        color: var(--color-global);
-      }
-
-      .grw-external-auth-form {
-        border-color: var(--accentcolor);
-      }
-    }
+  @import 'bootstrap/scss/variables';
+  @import 'bootstrap/scss/variables-dark';
+
+  @import '@growi/core/scss/bootstrap/init-stage-2';
+
+  @import '@growi/core/scss/bootstrap/theming/apply-dark';
+
+  --grw-wiki-link-color-rgb: var(--grw-primary-500-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-400-rgb);
+
+  &, body {
+    background-image: url('../images/hufflepuff/hufflepuff-dark-bg.svg');
+    background-attachment: fixed;
+    background-position: bottom;
+    background-size: cover;
   }
 }
+
+// @use '@growi/core/scss/bootstrap/init' as bs;
+
+// @use './variables' as var;
+// @use './theme/mixins/page-editor-mode-manager';
+// @use './theme/hsl-functions' as hsl;
+
+// // == Define Bootstrap theme colors
+// //
+
+// // colors for overriding bootstrap $theme-colors
+// // --info: #;
+// // --success: #;
+// // --warning: #;
+// // --danger: #;
+// // --light: #;
+// // --dark: #;
+
+// //== Light Mode
+// //
+// :root[data-bs-theme='light'] {
+//   // Theme colors
+//   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
+//   --primary-hs: 41,83%;
+//   --primary-l: 52%;
+//   --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
+//   --secondary-hs: 41,83%;
+//   --secondary-l: 65%;
+//   --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l));
+//   --subthemecolor-hs: 10,9%;
+//   --subthemecolor-l: 13%;
+
+//   // Background colors
+//   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+//   --bgcolor-global-hs: 36,50%;
+//   --bgcolor-global-l: 97%;
+//   --bgcolor-inline-code: #{bs.$gray-100}; //optional
+//   --bgcolor-card: #{bs.$gray-100};
+//   --bgcolor-blinked-section: #{hsl.alpha(var(--primary),50%)};
+//   --bgcolor-keyword-highlighted: $grw-marker-green;
+
+//   // Font colors
+//   --color-global: var(--subthemecolor);
+//   --color-global-hs: var(--subthemecolor-hs);
+//   --color-global-l: var(--subthemecolor-l);
+//   --color-reversal: white;
+//   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
+//   --color-link-hs: 357,49%;
+//   --color-link-l: 40%;
+//   --color-link-hover: #{hsl.lighten(var(--color-link), 10%)};
+//   --color-link-wiki: var(--color-link);
+//   --color-link-wiki-hs: var(--color-link-hs);
+//   --color-link-wiki-l: var(--color-link-l);
+//   --color-link-wiki-hover: #{hsl.lighten(var(--color-link), 10%)};
+//   --color-link-nabvar: var(--color-reversal);
+//   --color-inline-code: #c7254e; // optional
+
+//   // List Group colors
+//   // --color-list: var(--color-global);
+//   --bgcolor-list: transparent;
+//   --color-list-hover: #{hsl.lighten(var(--primary), 10%)};
+//   // --bgcolor-list-hover: #{hsl.darken(var(--bgcolor-list), 2%)};
+//   // --color-list-active: var(--bgcolor-global);
+//   // --bgcolor-list-active: var(--color-link);
+
+//   // Navbar
+//   --bgcolor-navbar: var(--secondary);
+//   --bgcolor-navbar-hs: var(--secondary-hs);
+//   --bgcolor-navbar-l: var(--secondary-l);
+//   --bgcolor-search-top-dropdown: var(--primary);
+//   --bgcolor-search-top-dropdown-hs: var(--primary-hs);
+//   --bgcolor-search-top-dropdown-l: var(--primary-l);
+//   --border-image-navbar: linear-gradient(to right, #90a555 0%, #a84be6 50%, #eaab20 100%);
+
+//   // Logo colors
+//   --bgcolor-logo: var(--bgcolor-navbar);
+//   --fillcolor-logo-mark: #{lighten(desaturate(bs.$gray-100, 10%), 15%)};
+
+//   // Sidebar
+//   --bgcolor-sidebar: var(--primary);
+//   --bgcolor-sidebar-hs: var(--primary-hs);
+//   --bgcolor-sidebar-l: var(--primary-l);
+
+//   // Sidebar resize button
+//   --color-resize-button: var(--color-reversal);
+//   --bgcolor-resize-button: var(--subthemecolor);
+//   --bgcolor-resize-button-hs: var(--subthemecolor-hs);
+//   --bgcolor-resize-button-l: var(--subthemecolor-l);
+//   --color-resize-button-hover: var(--color-reversal);
+//   --bgcolor-resize-button-hover: #{hsl.lighten(var(--bgcolor-resize-button), 10%)};
+
+//   // Sidebar contents
+//   --color-sidebar-context: var(--color-link);
+//   --color-sidebar-context-hs: var(--color-link-hs);
+//   --color-sidebar-context-l: var(--color-link-l);
+//   --bgcolor-sidebar-context: #{hsl.darken(var(--bgcolor-global), 2%)};
+//   --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs);
+//   --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) - 2%);
+
+//   // Sidebar list group
+//   --bgcolor-sidebar-list-group: #{hsl.lighten(var(--bgcolor-global), 10%)};
+
+//   // Subnavigation
+//   --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
+//   --bgcolor-subnav-hs: var(--bgcolor-global-hs);
+//   --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
+
+//   // Icon colors
+//   --color-editor-icons: var(--color-link);
+
+//   // Border colors
+//   --border-color-theme: #{hsl.lighten(var(--subthemecolor), 40%)};
+//   --bordercolor-inline-code: #ccc8c8; // optional
+
+//   // Dropdown colors
+//   --bgcolor-dropdown-link-active: #{var.$growi-blue};
+
+//   // admin theme box
+//   --color-theme-color-box: #{hsl.darken(var(--primary), 5%)};
+
+//   &, body {
+//     background-image: url('../images/hufflepuff/badger-light3.png');
+//     background-attachment: fixed;
+//     background-position: bottom;
+//     background-size: cover;
+//   }
+
+//   // Button
+//   .btn.btn-outline-primary {
+//     @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 50%)}, #{hsl.darken(var(--primary), 50%)}, #{hsl.lighten(var(--primary), 20%)});
+//   }
+//   .btn-group.grw-page-editor-mode-manager {
+//     .btn.btn-outline-primary {
+//       @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.darken(var(--primary), 70%)}, #{hsl.lighten(var(--primary), 5%)}, #{hsl.lighten(var(--primary), 20%)});
+//     }
+//   }
+
+//   .growi:not(.login-page) {
+//     // add background-image
+//     .page-editor-preview-container {
+//       background-image: url('../images/hufflepuff/badger-light3.png');
+//       background-attachment: fixed;
+//       background-position: bottom;
+//       background-size: cover;
+//     }
+//   }
+
+//   // login and register
+//   .nologin {
+//     .page-wrapper{
+//       background-image: url('../images/hufflepuff/badger-light.png');
+//       background-attachment: fixed;
+//       background-position: bottom;
+//       background-size: cover;
+
+//       .nologin-header,
+//       .nologin-dialog {
+//         background-color: rgba(black, 0.1);
+//         a.link-switch  {
+//           color: #{hsl.darken(var(--color-global),10%)};
+//         }
+//       }
+//       .grw-external-auth-form {
+//         border-color: #993439;
+//       }
+//     }
+//   }
+
+//   .table {
+//     background-color: var(--bgcolor-global);
+//   }
+
+//   .card-timeline > .card-header {
+//     background-color: var(--secondary);
+//   }
+
+//   .nav.nav-tabs {
+//     > .nav-item {
+//       > .nav-link.active {
+//         color: #231e1d;
+//       }
+//     }
+//   }
+// }
+
+// :root[data-bs-theme='dark'] {
+//   // Theme colors
+//   --primary: hsl(var(--primary-hs),var(--primary-l)) !important;
+//   --primary-hs: 41,83%;
+//   --primary-l: 62%;
+//   --secondary: hsl(var(--secondary-hs),var(--secondary-l)) !important;
+//   --secondary-hs: 41,61%;
+//   --secondary-l: 36%;
+//   --subthemecolor: hsl(var(--subthemecolor-hs),var(--subthemecolor-l));
+//   --subthemecolor-hs: 10,9%;
+//   --subthemecolor-l: 13%;
+//   --accentcolor: hsl(var(--accentcolor-hs),var(--accentcolor-l));
+//   --accentcolor-hs: 357,49%;
+//   --accentcolor-l: 40%;
+
+//   // Background colors
+//   --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+//   --bgcolor-global-hs: 77,6%;
+//   --bgcolor-global-l: 23%;
+//   // --bgcolor-navbar: #27343b;
+//   --bgcolor-inline-code: var(--subthemecolor);
+//   --bgcolor-card: #{hsl.darken(var(--bgcolor-global), 5%)};
+//   --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 50%)};
+//   --bgcolor-keyword-highlighted: #{darken(var.$grw-marker-cyan, 40%)};
+
+//   // Font colors
+//   --color-global: hsl(var(--color-global-hs),var(--color-global-l));
+//   --color-global-hs: 36,50%;
+//   --color-global-l: 87%;
+//   --color-reversal: #{bs.$gray-100};
+//   --color-link: #{hsl.lighten(var(--primary), 30%)};
+//   --color-link-hs: var(--primary-hs);
+//   --color-link-l: calc(var(--primary-l) + 30%);
+//   --color-link-hover: #{hsl.lighten(var(--primary), 40%)};
+//   --color-link-wiki: #{hsl.lighten(var(--primary), 20%)};
+//   --color-link-wiki-hs: var(--primary-hs);
+//   --color-link-wiki-l: calc(var(--primary-l) + 20%);
+//   --color-link-wiki-hover: #{hsl.lighten(var(--primary), 50%)};
+//   --color-link-nabvar: var(--color-reversal);
+//   --color-inline-code: #{hsl.lighten(var(--primary), 10%)};
+//   // --color-inline-code: #c7254e; // optional
+//   // --color-search: #000102;
+
+//   // List Group colors
+//   // --color-list: var(--color-global);
+//   --bgcolor-list: transparent;
+//   --color-list-hover: var(--accentcolor);
+//   // --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global), 3%)};
+//   // --color-list-active: var(--color-reversal);
+//   // --bgcolor-list-active: var(--primary);
+
+//   // Navbar
+//   --bgcolor-navbar: var(--secondary);
+//   --bgcolor-navbar-hs: var(--secondary-hs);
+//   --bgcolor-navbar-l: var(--secondary-l);
+//   --bgcolor-search-top-dropdown: #{hsl.lighten(var(--primary), 10%)};
+//   --bgcolor-search-top-dropdown-hs: var(--primary-hs);
+//   --bgcolor-search-top-dropdown-l: calc(var(--primary-l) + 10%);
+//   --border-image-navbar: linear-gradient(to right, #90a555 0%, #3d98a3 50%, #eaab20 100%);
+
+//   // Logo colors
+//   --bgcolor-logo: #13191c;
+//   --fillcolor-logo-mark: white;
+
+//   // Sidebar
+//   --bgcolor-sidebar: #{hsl.lighten(var(--primary), 10%)};
+//   --bgcolor-sidebar-hs: var(--primary-hs);
+//   --bgcolor-sidebar-l: calc(var(--primary-l) + 10%);
+//   // --bgcolor-sidebar-nav-item-active: rgba(#, 0.3); // optional
+//   --text-shadow-sidebar-nav-item-active: 0px 0px 10px #cc951e; // optional
+
+//   // Sidebar resize button
+//   --color-resize-button: var(--color-global);
+//   --bgcolor-resize-button: var(--accentcolor);
+//   --bgcolor-resize-button-hs: var(--accentcolor-hs);
+//   --bgcolor-resize-button-l: var(--accentcolor-l);
+//   --color-resize-button-hover: var(--color-global);
+//   --bgcolor-resize-button-hover: #{hsl.darken(var(--accentcolor), 7%)};
+
+//   // Sidebar contents
+//   --color-sidebar-context: var(--color-link);
+//   --color-sidebar-context-hs: var(--color-link-hs);
+//   --color-sidebar-context-l: var(--color-link-l);
+//   --bgcolor-sidebar-context: #{hsl.lighten(var(--bgcolor-global), 5%)};
+//   --bgcolor-sidebar-context-hs: var(--bgcolor-global-hs);
+//   --bgcolor-sidebar-context-l: calc(var(--bgcolor-global-l) + 5%);
+
+//   // Sidebar list group
+//   --bgcolor-sidebar-list-group: #{hsl.lighten(var(--subthemecolor), 5%)};
+
+//   // Subnavigation
+//   --bgcolor-subnav: hsl(var(--bgcolor-subnav-hs),var(--bgcolor-subnav-l));
+//   --bgcolor-subnav-hs: var(--bgcolor-global-hs);
+//   --bgcolor-subnav-l: calc(var(--bgcolor-global-l) - 3%);
+
+//   // Icon colors
+//   --color-editor-icons: #{hsl.lighten(var(--primary), 10%)};
+
+//   // Border colors
+//   --border-color-theme: #{hsl.darken(var(--primary), 15%)};
+//   --bordercolor-inline-code: #4d4d4d; // optional
+
+//   // admin theme box
+//   --color-theme-color-box: var(--primary);
+
+//   &, body {
+//     background-image: url('../images/hufflepuff/badger-dark.jpg');
+//     background-attachment: fixed;
+//     background-position: bottom;
+//     background-size: cover;
+//   }
+
+//   // Navs
+//   .nav-tabs {
+//     border-bottom: var(--border-color-theme) 1px solid;
+//     .nav-link {
+//       &:hover {
+//         border-color: #{hsl.darken(var(--primary), 5%)};
+//         border-bottom: none;
+//       }
+//       &.active {
+//         color: var(--color-link);
+//         background-color: transparent;
+//         border-color: var(--border-color-theme);
+//       }
+//     }
+//   }
+
+//   // Table
+//   .table {
+//     color: white;
+//   }
+
+//   // Button
+//   .btn.btn-outline-primary {
+//     @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)});
+//   }
+//   .btn-group.grw-page-editor-mode-manager {
+//     .btn.btn-outline-primary {
+//       @include page-editor-mode-manager.btn-page-editor-mode-manager(#{hsl.lighten(var(--primary), 40%)}, #{hsl.lighten(var(--primary), 15%)}, #{hsl.darken(var(--primary), 10%)}, #{hsl.darken(var(--primary), 30%)});
+//     }
+//   }
+
+//   .card-timeline > .card-header {
+//     background-color: var(--accentcolor);
+//   }
+
+//   .growi:not(.login-page) {
+//     // add background-image
+//     .page-editor-preview-container {
+//       background-image: url('../images/hufflepuff/badger-dark.jpg');
+//       background-attachment: fixed;
+//       background-position: bottom;
+//       background-size: cover;
+//     }
+//   }
+
+//   // login and register
+//   .nologin {
+//     .page-wrapper{
+//       background-image: url('../images/hufflepuff/badger-light.png');
+//       background-attachment: fixed;
+//       background-position: bottom;
+//       background-size: cover;
+//       .nologin-header,
+//       .nologin-dialog {
+//         background-color: rgba(black, 0.1);
+//       }
+
+//       .link-switch {
+//         color: var(--color-global);
+//       }
+
+//       .grw-external-auth-form {
+//         border-color: var(--accentcolor);
+//       }
+//     }
+//   }
+// }

packages/preset-themes/vite.themes.config.ts

@@ -17,7 +17,7 @@ export default defineConfig(({ mode }) => {
           '/src/styles/fire-red.scss',
           '/src/styles/future.scss',
           '/src/styles/halloween.scss',
-          // '/src/styles/hufflepuff.scss',
+          '/src/styles/hufflepuff.scss',
           '/src/styles/kibela.scss',
           '/src/styles/island.scss',
           '/src/styles/jade-green.scss',