Simple dark template

To use, replace the text_input with desired widget and insert items into the flex_box

import panel as pn

RAW_CSS = """
nav#header {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

h1 {
    margin-left: 2%;
    margin-right: 2%;
    font-size: 4em;
    font-weight: bold;
}

h3 {
    margin-left: 2%;
    margin-right: 2%;
    font-size: 1.5em;
}

.bk.bk-input {
    font-size: 1.25em;
}

.bk.bk-slider-title {
    font-size: 1.25em;
}

.bk.bk-btn.bk-btn-default {
    font-size: 1.25em;
}
"""

pn.extension(sizing_mode="stretch_width", raw_css=[RAW_CSS])

text_input_placeholder = "Enter something here!"
text_input = pn.widgets.TextInput(placeholder=text_input_placeholder)

header_row = pn.Row(text_input)
flex_box = pn.FlexBox(
    align_content="space-evenly",
    justify_content="space-evenly",
    min_height=1000
)

template = pn.template.FastListTemplate(
    title="Test App",
    header=[header_row],
    main=[flex_box],
    main_max_width="1000px",
    accent="fast",
    shadow=False,
    theme=pn.template.theme.DarkTheme,
)
template.servable()
2 Likes