aa2a1df201
* `pc.color_mode`: a BaseVar that accesses colorMode on the frontend * `pc.color_mode_cond`: a `pc.cond` wrapper that conditionally renders components or props based on the value of `color_mode` * `pc.color_mode_icon`: by default "sun" if light mode, "moon" if dark mode * `pc.color_mode_switch`: a Switch component where is_checked depends on the color_mode and changing the value calls toggle_color_mode * `pc.color_mode_button`: a Button component that calls toggle_color_mode on click The default template has been updated to include a color_mode_button with color_mode_icon for toggling light/dark mode. The inline hover style has also been updated to use color_mode_cond to show a different highlight color based on the color_mode.
46 lines
1.1 KiB
Python
46 lines
1.1 KiB
Python
"""Handle styling."""
|
|
|
|
from typing import Optional
|
|
|
|
from pynecone import constants
|
|
from pynecone.event import EventChain
|
|
from pynecone.utils import format
|
|
from pynecone.vars import BaseVar, Var
|
|
|
|
color_mode = BaseVar(name=constants.COLOR_MODE, type_="str")
|
|
toggle_color_mode = BaseVar(name=constants.TOGGLE_COLOR_MODE, type_=EventChain)
|
|
|
|
|
|
def convert(style_dict):
|
|
"""Format a style dictionary.
|
|
|
|
Args:
|
|
style_dict: The style dictionary to format.
|
|
|
|
Returns:
|
|
The formatted style dictionary.
|
|
"""
|
|
out = {}
|
|
for key, value in style_dict.items():
|
|
key = format.to_camel_case(key)
|
|
if isinstance(value, dict):
|
|
out[key] = convert(value)
|
|
elif isinstance(value, Var):
|
|
out[key] = str(value)
|
|
else:
|
|
out[key] = value
|
|
return out
|
|
|
|
|
|
class Style(dict):
|
|
"""A style dictionary."""
|
|
|
|
def __init__(self, style_dict: Optional[dict] = None):
|
|
"""Initialize the style.
|
|
|
|
Args:
|
|
style_dict: The style dictionary.
|
|
"""
|
|
style_dict = style_dict or {}
|
|
super().__init__(convert(style_dict))
|