PyCafe - Dash - Dash Color Selector

pages/
spotify/
app.py
components.py
requirements.txt
utils.py
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import dash
import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Input, Output, State, _dash_renderer, html, Dash, page_container, get_relative_path

_dash_renderer._set_react_version("18.2.0")

# initiallize the Dash app
app = Dash(external_stylesheets=dmc.styles.ALL, use_pages=True)

#toggle for turn theme
theme_toggle = dmc.Switch(
    dmc.ActionIcon(
        [
            dmc.Paper(DashIconify(icon="radix-icons:sun", width=25), darkHidden=True),
            dmc.Paper(DashIconify(icon="radix-icons:moon", width=25), lightHidden=True),

        ],
        variant="transparent",
        color="yellow",
        id="color-scheme-toggle",
        size="lg",
        ms="auto",

    )
)

# developing the header for the dashboard 
header = dmc.Group(
    [
        dmc.Burger(id="burger-button", opened=False, hiddenFrom="md"),
        dmc.Text(["Spotify Music DAshord Analysis"], size="xl", fw=700),
        theme_toggle
    ],
    justify = "flex-start",
    h=80
)

def navar_link(icon, href):
    return dmc.Anchor(
        DashIconify(
            icon=icon,
            width=30,
        ),
        href=get_relative_path(href),
        variant='text',
        mb=10,
        underline=False,
    )

# Navbar using only icons
navbar = dmc.ScrollArea(
    [
        create_main_link(icon=page["icon"], href=page["path"])
        for page in dash.page_registry.values()
        if page["module"] != "pages.not_found_404"
    ],
    offsetScrollbars=True,
    type="scroll",
    style={"height": "100%"},
)



# AppShell layout
app_shell = dmc.AppShell(
    [
        dmc.AppShellHeader(header, px=25),
        dmc.AppShellNavbar(navbar, p=24),
        dmc.AppShellMain(page_container),
        dmc.AppShellFooter("Footer", h=50, ml=400)
    ],
    header={"height": 70},
    padding="xl",
    navbar={
        "width": 150,
        "breakpoint": "md",
        "collapsed": {"mobile": True},
    },
    aside={
        "width": 300,
        "breakpoint": "xl",
        "collapsed": {"desktop": False, "mobile": True},
    },
    footer={
        "width": 300,
        "breakpoint": "md",
        "collapsed": {"desktop": False, "mobile": True},
    },
    id="app-shell",
)

# App layout
app.layout = dmc.MantineProvider(
    [
        dcc.Store(id="theme-store", storage_type="local", data="light"),
        app_shell
    ],
    id="mantine-provider",
    forceColorScheme="light",
)

# Callback to toggle navbar visibility on mobile
@callback(
    Output("app-shell", "navbar"),
    Input("burger-button", "opened"),
    State("app-shell", "navbar"),
)
def navbar_is_open(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar

# Callback to switch between light and dark themes
@callback(
    Output("mantine-provider", "forceColorScheme"),
    Input("color-scheme-toggle", "n_clicks"),
    State("mantine-provider", "forceColorScheme"),
    prevent_initial_call=True,
)
def switch_theme(_, theme):
    return "dark" if theme == "light" else "light"

# Register pages with icons
dash.register_page("home", name="Home", path="/home", icon="mdi-home")
dash.register_page("settings", name="Settings", path="/settings", icon="mdi-cog")
dash.register_page("profile", name="Profile", path="/profile", icon="mdi-account")



if __name__ == "__main__":
    app.run(debug=True, port=6040)
Py.Cafe

dash-color-selector

Dash Color Selector
