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.2 KiB
Python
46 lines
1.2 KiB
Python
"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
|
|
from pcconfig import config
|
|
|
|
import pynecone as pc
|
|
|
|
docs_url = "https://pynecone.io/docs/getting-started/introduction"
|
|
filename = f"{config.app_name}/{config.app_name}.py"
|
|
|
|
|
|
class State(pc.State):
|
|
"""The app state."""
|
|
|
|
pass
|
|
|
|
|
|
def index() -> pc.Component:
|
|
return pc.fragment(
|
|
pc.color_mode_button(pc.color_mode_icon(), float="right"),
|
|
pc.vstack(
|
|
pc.heading("Welcome to Pynecone!", font_size="2em"),
|
|
pc.box("Get started by editing ", pc.code(filename, font_size="1em")),
|
|
pc.link(
|
|
"Check out our docs!",
|
|
href=docs_url,
|
|
border="0.1em solid",
|
|
padding="0.5em",
|
|
border_radius="0.5em",
|
|
_hover={
|
|
"color": pc.color_mode_cond(
|
|
light="rgb(107,99,246)",
|
|
dark="rgb(179, 175, 255)",
|
|
)
|
|
},
|
|
),
|
|
spacing="1.5em",
|
|
font_size="2em",
|
|
padding_top="10%",
|
|
),
|
|
)
|
|
|
|
|
|
# Add state and page to the app.
|
|
app = pc.App(state=State)
|
|
app.add_page(index)
|
|
app.compile()
|