From 6ed29c9a673960fdde2ef45822ed49c57996675b Mon Sep 17 00:00:00 2001
From: levg34 <levg34@users.noreply.github.com>
Date: Thu, 28 Dec 2023 21:21:30 +0100
Subject: [PATCH] Select color font change (#43)

* change the background color of pages

* get bgColor from backend

* add and remove color in form

* change font color to match bgColor
---
 pages/src/Page.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/pages/src/Page.tsx b/pages/src/Page.tsx
index a566f40..db8be2e 100644
--- a/pages/src/Page.tsx
+++ b/pages/src/Page.tsx
@@ -35,6 +35,16 @@ const Page: Component<Props> = (props: Props) => {
 
     const [pageData] = createResource(pageId, getPageData)
 
+    function getFontColor() {
+        const bgColor = pageData()?.bgColor
+        if (!bgColor) return '#000000'
+        var color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor
+        var r = parseInt(color.substring(0, 2), 16) // Red
+        var g = parseInt(color.substring(2, 4), 16) // Green
+        var b = parseInt(color.substring(4, 6), 16) // Blue
+        return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF'
+    }
+
     return (
         <Stack style="background-color: black">
             <Carousel controls={false} indicators={false}>
@@ -47,7 +57,7 @@ const Page: Component<Props> = (props: Props) => {
                     </div>
                 </Carousel.Item>
             </Carousel>
-            <Container style={`background-color: ${pageData()?.bgColor ?? 'lightgrey'}`} class="mt-3 pt-2">
+            <Container style={`background-color: ${pageData()?.bgColor ?? 'lightgrey'}; color: ${getFontColor()}`} class="mt-3 pt-2">
                 <For each={prepareForDisplay(pageData()?.data ?? [])}>
                     {(elements) => (
                         <>