update readme

README.md

@@ -4,6 +4,15 @@ It's a demo application for me to figure out if I can use rust/dioxus in product
 
 Live Demo -> https://rust-2048.vercel.app/
 
+### Features in this application
+
+- [x] Use tailwind and daisy css for styling
+- [x] Handle Dark / light theme
+- [x] Try to inplenment i18n use fermi state
+- [x] Access cookies / localstorage
+- [x] Build web and native app
+- [x] A simple server to record user progress
+
 ### Test and run
 ```
 1. Run server
@@ -45,14 +54,6 @@ dioxus serve --platform desktop
 - [x] Server, record game progress
 - [ ] Server, record progress for multiple users
 
-### Things need to be figure out
-
-- [x] Component library / tailwind
-- [x] Dark / light theme
-- [x] i18n
-- [x] Access cookies / localstorage
-- [x] Can visit route url
-
 Github
-
+-
 https://github.com/LIU9293/rust-2048/

packages/client/src/main.rs

@@ -46,6 +46,33 @@ fn main() {
                         }
                     });
                     </script>
+                    <script>
+                        try {
+                            const theme = localStorage.getItem('theme')
+                            if (theme === 'dark') {
+                            document.documentElement.setAttribute('data-theme', 'black');
+                            }
+
+                            if (theme === 'light') {
+                            document.documentElement.setAttribute('data-theme', 'lofi');
+                            }
+
+                            if (theme === 'system') {
+                            var preference_query = window.matchMedia('(prefers-color-scheme: dark)');
+                            function checkPreference(query) {
+                                if (query.matches) {
+                                    document.documentElement.setAttribute('data-theme', 'black');
+                                    localStorage.setItem('theme', 'system');
+                                } else {
+                                    document.documentElement.setAttribute('data-theme', 'lofi');
+                                    localStorage.setItem('theme', 'system');
+                                }
+                            }
+                            checkPreference(preference_query);
+                            preference_query.addEventListener("change", checkPreference);
+                            }
+                        } catch (error) {}
+                    </script>
                 </body>
                 </html>
             "#