Added themes to home and rules pages

src/routes/play/+page.svelte

@@ -1,34 +1,44 @@
 <script>
-	import { xAxes, yAxes } from '$lib';
-	import ChartDisplay from '$components/chartDisplay.svelte';
-	import DiceRoller from '$components/diceRoller.svelte';
+  import { getContext } from 'svelte';
+  import xAxes from '$lib/data/xAxes.js';
+  import yAxes from '$lib/data/yAxes.js';
+  import ChartDisplay from '$components/ChartDisplay.svelte';
+  import DiceRoller from '$components/DiceRoller.svelte';
+  import ThemeSelector from '$components/ThemeSelector.svelte';
+  import Toggle from '$components/Toggle.svelte';
 
-	let adultMode = $state(false);
-	let currentChart = $state({ x: [''], y: [''] });
-	let diceRoll = $state({ x: 0, y: 0 });
+  const theme = getContext('theme');
+  let currentTheme;
+  theme.subscribe(value => {
+    currentTheme = value;
+  });
 
-	function generateChart() {
-		const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
-		const availableYAxes = adultMode ? yAxes : yAxes.filter((axis) => !axis.adult);
+  let adultMode = false;
+  let currentChart = null;
+  let diceRoll = null;
 
-		const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
-		const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
+  function generateChart() {
+    const availableXAxes = adultMode ? xAxes : xAxes.filter(axis => !axis.adult);
+    const availableYAxes = adultMode ? yAxes : yAxes.filter(axis => !axis.adult);
+    
+    const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
+    const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
+    
+    currentChart = {
+      x: randomX.values,
+      y: randomY.values
+    };
+  }
 
-		currentChart = {
-			x: randomX.values,
-			y: randomY.values
-		};
-	}
-
-	function rollDice() {
-		diceRoll = {
-			x: Math.floor(Math.random() * 10) + 1,
-			y: Math.floor(Math.random() * 10) + 1
-		};
-	}
+  function rollDice() {
+    diceRoll = {
+      x: Math.floor(Math.random() * 10) + 1,
+      y: Math.floor(Math.random() * 10) + 1
+    };
+  }
 </script>
 
-<div class="container theme-{currentTheme}">
+<div class="container">
   <div class="window">
     <div class="title-bar">
       <a href="/" class="home-button">← Home</a>
@@ -38,7 +48,7 @@
     <div class="window-body">
       <fieldset>
         <legend>Theme Selector</legend>
-        <ThemeSelector bind:currentTheme />
+        <ThemeSelector bind:currentTheme={$theme} />
       </fieldset>
 
       <fieldset>
@@ -56,7 +66,7 @@
 
       <fieldset>
         <legend>Position Roller</legend>
-        <DiceRoller roll={diceRoll} />
+        <DiceRoller diceRoll={diceRoll} />
         <div class="button-row">
           <button on:click={rollDice}>Roll Dice</button>
         </div>