add new theme

src/Home.tsx

@@ -166,8 +166,9 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   const renderNewGameButton = () => {
     const newGame = (
       <Button
+        context={context}
         text={context.texts.NewGame}
-        color="#005f73"
+        color={context.themeManager.theme.primary}
         onClick={newGameClick}
       />
     );
@@ -191,7 +192,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        background: "#EEEEEE",
+        background: context.themeManager.theme.background,
         flex: "1",
       }}
     >
@@ -205,8 +206,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
             borderTopRightRadius: "1vw",
             minWidth: "10vw",
             minHeight: "1vw",
-            background: "#2F2504",
+            background: context.themeManager.theme.primary,
-            color: "white",
+            color: context.themeManager.theme.primaryLight,
           }}
         >
           {connectionStateText()}
@@ -215,7 +216,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       <div
         style={{
           padding: "0px 4vw",
-          background: "rgb(228, 228, 228)",
+          background: context.themeManager.theme.appBarBgColor,
           display: "flex",
           flexDirection: "row",
           alignItems: "center",
@@ -231,7 +232,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
             !crashMessage &&
             (game?.state === "playing" || game?.state === "initial") && (
               <Button
-                color="#005f73"
+                context={context}
+                color={context.themeManager.theme.primary}
                 text={context.texts.Leave}
                 onClick={leaveGame}
               />

src/animation/PitAnimator.ts

@@ -12,6 +12,7 @@ import { v4 } from "uuid";
 import { Context } from "../context";
 import BoardViewModelFactory from "../factory/BoardViewModelFactory";
 import { PitViewModelFactory } from "../factory/PitViewModelFactory";
+import { getColorByLuminance } from "../util/ColorUtil";
 import BoardViewModel from "../viewmodel/BoardViewModel";
 
 const animationUpdateInterval = 300;
@@ -130,6 +131,11 @@ export default class PitAnimator {
       pitViewModel.pitColor = theme.pitGetRivalStonePitAnimateColor;
       pitViewModel.stoneCount = 0;
     }
+    pitViewModel.stoneColor = getColorByLuminance(
+      pitViewModel.pitColor,
+      theme.stoneColor,
+      theme.stoneLightColor
+    );
   }
 
   startAnimationUpdateCyle() {
@@ -165,7 +171,7 @@ export default class PitAnimator {
     return game.board.pits.map((pit) => {
       const theme = this.context.themeManager.theme;
       const stoneCount = pit.stoneCount;
-      const stoneColor = theme.ballColor;
+      const stoneColor = theme.stoneColor;
       const pitColor = theme.holeColor;
       const id = pit.index.toString();
       return PitViewModelFactory.create({

src/components/BoardView.tsx

@@ -2,6 +2,7 @@ import { Bank, MancalaGame, Pit } from "mancala.js";
 import * as React from "react";
 import { FunctionComponent, useState } from "react";
 import { Context } from "../context";
+import { getColorByLuminance } from "../util/ColorUtil";
 import BoardViewModel from "../viewmodel/BoardViewModel";
 import PitViewModel from "../viewmodel/PitViewModel";
 
@@ -67,6 +68,11 @@ const StoreView: FunctionComponent<{
   const balls = [...range(pitViewModel.stoneCount)].map((i) => (
     <BallView color={pitViewModel.stoneColor} />
   ));
+  const textColor = getColorByLuminance(
+    pitViewModel.pitColor,
+    context.themeManager.theme.primary,
+    context.themeManager.theme.primaryLight
+  );
   return (
     <div
       style={{
@@ -91,7 +97,7 @@ const StoreView: FunctionComponent<{
           fontFamily: "monospace",
           fontWeight: "bold",
           fontSize: "2vw",
-          color: context.themeManager.theme.ballColor,
+          color: textColor,
         }}
       >
         {balls.length}

src/components/Button.tsx

@@ -1,17 +1,25 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
+import { Context } from "../context";
+import { getColorByLuminance } from "../util/ColorUtil";
 
 const Button: FunctionComponent<{
+  context: Context;
   text: String;
   onClick: () => void;
   color: string;
-}> = ({ text, color, onClick }) => {
+}> = ({ context, text, color, onClick }) => {
+  const textColor = getColorByLuminance(
+    color,
+    context.themeManager.theme.primary,
+    context.themeManager.theme.primaryLight
+  );
   return (
     <button
       onClick={onClick}
       style={{
         background: color,
-        color: "white",
+        color: textColor,
         margin: "5px",
         padding: "10px",
         border: "none",

src/components/InfoPanel.tsx

@@ -2,6 +2,7 @@ import { MancalaGame } from "mancala.js";
 import * as React from "react";
 import { FunctionComponent } from "react";
 import { Context } from "../context";
+import { getColorByLuminance } from "../util/ColorUtil";
 
 function getInfoPanelTextByGameState(params: {
   context: Context;
@@ -81,16 +82,17 @@ const InfoPanel: FunctionComponent<{
   searchingOpponent,
 }) => {
   const isUserTurn = game?.checkIsPlayerTurn(userKey);
-  return (
+  const containerColor = isUserTurn
-    <InfoPanelContainer
-      context={context}
-      color={
-        isUserTurn
     ? context.themeManager.theme.playerTurnColor
-          : context.themeManager.theme.holeColor
+    : context.themeManager.theme.holeColor;
-      }
+  const textColor = getColorByLuminance(
-    >
+    containerColor,
-      <h4 style={{ margin: "0" }}>
+    context.themeManager.theme.primary,
+    context.themeManager.theme.primaryLight
+  );
+  return (
+    <InfoPanelContainer context={context} color={containerColor}>
+      <h4 style={{ margin: "0", color: textColor }}>
         {getInfoPanelTextByGameState({
           context,
           game,

src/theme/DefaultTheme.ts

@@ -1,18 +1,30 @@
 import { Theme } from "./Theme";
 
+// https://colorhunt.co/palette/7d5a50b4846ce5b299fcdec0
+const colors = {
+  primary: "#7D5A50",
+  secondary: "#B4846C",
+  tertiary: "#E5B299",
+  quaternary: "#FCDEC0",
+};
+
+const colorSpecial = "#F6A9A9";
+
 const defaultTheme: Theme = {
   background: "#EEEEEE",
-  boardColor: "#4D606E",
+  appBarBgColor: colors.quaternary,
-  playerTurnColor: "#84b8a6",
+  primary: colors.primary,
-  storeColor: "#3FBAC2",
+  primaryLight: colors.quaternary,
-  holeColor: "#D3D4D8",
+  playerTurnColor: colors.secondary,
-  pitSelectedColor: "#8837fa",
+  boardColor: colors.secondary,
-  ballColor: "#393E46",
+  holeColor: colors.quaternary,
-  ballLightColor: "#393E46",
+  pitSelectedColor: colors.tertiary,
-  pitGameMoveAnimateColor: "#c9b43c",
+  stoneColor: colors.primary,
-  pitEmptyPitAnimateColor: "#5d7322",
+  stoneLightColor: colors.tertiary,
-  pitLastStoneInBankPitAnimateColor: "#9463f7",
+  pitGameMoveAnimateColor: colors.tertiary,
-  pitGetRivalStonePitAnimateColor: "#ff3d44",
+  pitEmptyPitAnimateColor: colorSpecial,
+  pitLastStoneInBankPitAnimateColor: colorSpecial,
+  pitGetRivalStonePitAnimateColor: colorSpecial,
 };
 
 export default defaultTheme;

src/theme/OldTheme.ts

@@ -0,0 +1,20 @@
+import { Theme } from "./Theme";
+
+const oldTheme: Theme = {
+  background: "#EEEEEE",
+  appBarBgColor: "rgb(228, 228, 228)",
+  primary: "#4D606E",
+  primaryLight: "#EEEEEE",
+  playerTurnColor: "#84b8a6",
+  boardColor: "#4D606E",
+  holeColor: "#D3D4D8",
+  pitSelectedColor: "#8837fa",
+  stoneColor: "#393E46",
+  stoneLightColor: "#EEEEEE",
+  pitGameMoveAnimateColor: "#c9b43c",
+  pitEmptyPitAnimateColor: "#5d7322",
+  pitLastStoneInBankPitAnimateColor: "#9463f7",
+  pitGetRivalStonePitAnimateColor: "#ff3d44",
+};
+
+export default oldTheme;

src/theme/Theme.ts

@@ -1,12 +1,14 @@
 export type Theme = {
+  primary: string;
+  primaryLight: string;
   background: string;
-  boardColor: string;
+  appBarBgColor: string;
   playerTurnColor: string;
-  storeColor: string;
+  boardColor: string;
   holeColor: string;
   pitSelectedColor: string;
-  ballColor: string;
+  stoneColor: string;
-  ballLightColor: string;
+  stoneLightColor: string;
   pitGameMoveAnimateColor: string;
   pitEmptyPitAnimateColor: string;
   pitLastStoneInBankPitAnimateColor: string;