add parameter

ConnectFour/Components/Board.razor

@@ -1,12 +1,13 @@
 @using ConnectFour.Logics
+@using System.Drawing
 @inject GameState State
 
 <HeadContent>
     <style>
         :root {
-            --board-bg: yellow; /** the color of the board **/
+            --board-bg: @ColorTranslator.ToHtml(BoardColor); /** the color of the board **/
-            --player1: red; /** Player 1's piece color **/
+            --player1: @ColorTranslator.ToHtml(Player1Color); /** Player 1's piece color **/
-            --player2: blue; /** Player 2's piece color **/
+            --player2: @ColorTranslator.ToHtml(Player2Color); /** Player 2's piece color **/
         }
     </style>
 </HeadContent>
@@ -49,6 +50,15 @@
     private string CurrentTurn => (winnerMessage == string.Empty) ? $"Player {State.PlayerTurn}'s Turn" : "";
     private string ResetStyle => (winnerMessage == string.Empty) ? "display: none;" : "";
 
+    [Parameter]
+    public Color BoardColor { get; set; } = ColorTranslator.FromHtml("yellow");
+
+    [Parameter]
+    public Color Player1Color { get; set; } = ColorTranslator.FromHtml("red");
+
+    [Parameter]
+    public Color Player2Color { get; set; } = ColorTranslator.FromHtml("blue");
+
     protected override void OnInitialized()
     {
         State.ResetBoard();

ConnectFour/Components/Pages/Home.razor

@@ -1,4 +1,8 @@
 @page "/"
+@using System.Drawing
 
 <PageTitle>Home</PageTitle>
-<Board @rendermode="InteractiveServer" />
+<Board @rendermode="InteractiveServer"
+    BoardColor="Color.DarkGray"
+    Player1Color="Color.LimeGreen"
+    Player2Color="Color.OrangeRed"/>