Add support for toggling color mode ('night/day mode') (#382)

Co-authored-by: g0ee <0@g0.ee>
Co-authored-by: g0ee <adbokat.b.a.s.e@gmail.com>

pynecone/__init__.py

@@ -15,3 +15,4 @@ from .middleware import Middleware
 from .model import Model, session
 from .state import ComputedVar as var
 from .state import State
+from .style import toggle_color_mode

pynecone/compiler/compiler.py

@@ -17,6 +17,7 @@ DEFAULT_IMPORTS: ImportDict = {
     "next/router": {"useRouter"},
     f"/{constants.STATE_PATH}": {"connect", "updateState", "E"},
     "": {"focus-visible/dist/focus-visible"},
+    "@chakra-ui/react": {"useColorMode"},
 }
 
 

pynecone/compiler/templates.py

@@ -197,3 +197,6 @@ ROUTER = f"const {constants.ROUTER} = useRouter()"
 
 # Sockets.
 SOCKET = "const socket = useRef(null)"
+
+# Color toggle
+COLORTOGGLE = "const { colorMode, toggleColorMode } = useColorMode()"

pynecone/compiler/utils.py

@@ -17,6 +17,7 @@ from pynecone.components.base import (
     Main,
     Script,
     Title,
+    ColorModeScript,
 )
 from pynecone.components.component import Component, CustomComponent, ImportDict
 from pynecone.state import State
@@ -120,7 +121,8 @@ def compile_state(state: Type[State]) -> str:
     router = templates.ROUTER
     socket = templates.SOCKET
     ready = templates.READY
-    return templates.join([synced_state, result, router, socket, ready])
+    color_toggle = templates.COLORTOGGLE
+    return templates.join([synced_state, result, router, socket, ready, color_toggle])
 
 
 def compile_events(state: Type[State]) -> str:
@@ -209,6 +211,7 @@ def create_document_root(stylesheets: List[str]) -> Component:
     return Html.create(
         DocumentHead.create(*sheets),
         Body.create(
+            ColorModeScript.create(),
             Main.create(),
             Script.create(),
         ),

pynecone/components/base/__init__.py

@@ -1,7 +1,7 @@
 """Base components."""
 
 from .body import Body
-from .document import DocumentHead, Html, Main, Script
+from .document import DocumentHead, Html, Main, Script, ColorModeScript
 from .head import Head
 from .link import Link
 from .meta import Description, Image, Title

pynecone/components/base/document.py

@@ -31,3 +31,16 @@ class Script(NextDocumentLib):
     """The document main scripts."""
 
     tag = "NextScript"
+
+
+class ChakraUiReactLib(Component):
+    """Chakra UI React document components."""
+
+    library = "@chakra-ui/react"
+
+
+class ColorModeScript(ChakraUiReactLib):
+    """Chakra color mode script."""
+
+    tag = "ColorModeScript"
+    initialColorMode = "light"

pynecone/components/component.py

@@ -162,6 +162,11 @@ class Component(Base, ABC):
         Raises:
             ValueError: If the value is not a valid event chain.
         """
+        # If it's a JS var, return it.
+        if isinstance(value, Var):
+            if value.is_local is False and value.is_string is False:
+                return value
+
         # If it's an event chain var, return it.
         if isinstance(value, Var):
             if value.type_ is not EventChain:

pynecone/style.py

@@ -6,6 +6,15 @@ from pynecone import utils
 from pynecone.var import Var
 
 
+def toggle_color_mode():
+    """Toggle the color mode.
+
+    Returns:
+        Toggle color mode JS event as a variable
+    """
+    return Var.create(value="toggleColorMode", is_local=False, is_string=False)
+
+
 def convert(style_dict):
     """Format a style dictionary.