227 lines
5.9 KiB
Python
227 lines
5.9 KiB
Python
"""Cross-browser light theme primitives shared by the PoC_4 Streamlit UIs.
|
|
|
|
This module is presentation-only. It does not import or call runtime adapters,
|
|
MCP clients, databases, retrieval code, or model providers.
|
|
"""
|
|
|
|
from __future__ import annotations
|
|
|
|
|
|
POC4_LIGHT_THEME_CSS = """
|
|
<style id="poc4-cross-browser-light-theme">
|
|
:root,
|
|
html,
|
|
body,
|
|
#root,
|
|
.stApp,
|
|
[data-testid="stAppViewContainer"],
|
|
[data-testid="stMain"] {
|
|
color-scheme: light !important;
|
|
background-color: #f7f8fa !important;
|
|
color: #172033 !important;
|
|
}
|
|
|
|
/* Keep native form controls independent of the browser/OS dark-mode palette. */
|
|
input,
|
|
textarea,
|
|
select,
|
|
[data-baseweb="input"] input,
|
|
[data-baseweb="textarea"] textarea {
|
|
color-scheme: light !important;
|
|
background-color: #ffffff !important;
|
|
color: #172033 !important;
|
|
-webkit-text-fill-color: #172033 !important;
|
|
caret-color: #172033 !important;
|
|
border-color: #aab3c2 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder,
|
|
[data-baseweb="input"] input::placeholder,
|
|
[data-baseweb="textarea"] textarea::placeholder {
|
|
color: #687386 !important;
|
|
-webkit-text-fill-color: #687386 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
textarea:-webkit-autofill,
|
|
textarea:-webkit-autofill:hover,
|
|
textarea:-webkit-autofill:focus {
|
|
-webkit-text-fill-color: #172033 !important;
|
|
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
|
|
caret-color: #172033 !important;
|
|
}
|
|
|
|
select,
|
|
select option,
|
|
option {
|
|
background-color: #ffffff !important;
|
|
color: #172033 !important;
|
|
-webkit-text-fill-color: #172033 !important;
|
|
}
|
|
|
|
/* Streamlit selectbox is rendered by BaseWeb; its menu is portaled to body. */
|
|
[data-baseweb="select"],
|
|
[data-baseweb="select"] > div {
|
|
color-scheme: light !important;
|
|
background-color: #ffffff !important;
|
|
color: #172033 !important;
|
|
border-color: #aab3c2 !important;
|
|
}
|
|
|
|
[data-baseweb="select"] input,
|
|
[data-baseweb="select"] span,
|
|
[data-baseweb="select"] [aria-selected] {
|
|
color: #172033 !important;
|
|
-webkit-text-fill-color: #172033 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
[data-baseweb="select"] input::placeholder,
|
|
[data-baseweb="select"] [aria-placeholder="true"],
|
|
[data-baseweb="select"] [data-baseweb="placeholder"] {
|
|
color: #687386 !important;
|
|
-webkit-text-fill-color: #687386 !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
[data-baseweb="select"] svg {
|
|
fill: #526075 !important;
|
|
color: #526075 !important;
|
|
}
|
|
|
|
[data-baseweb="popover"],
|
|
[data-baseweb="menu"],
|
|
[role="listbox"] {
|
|
color-scheme: light !important;
|
|
background-color: #ffffff !important;
|
|
color: #172033 !important;
|
|
border-color: #aab3c2 !important;
|
|
}
|
|
|
|
[role="option"],
|
|
[role="option"] *,
|
|
[data-baseweb="menu"] li,
|
|
[data-baseweb="menu"] li * {
|
|
background-color: #ffffff !important;
|
|
color: #172033 !important;
|
|
-webkit-text-fill-color: #172033 !important;
|
|
}
|
|
|
|
[role="option"]:hover,
|
|
[role="option"][aria-selected="true"],
|
|
[role="option"]:hover *,
|
|
[role="option"][aria-selected="true"] * {
|
|
background-color: #ffffff !important;
|
|
color: #172033 !important;
|
|
-webkit-text-fill-color: #172033 !important;
|
|
}
|
|
|
|
input:disabled,
|
|
textarea:disabled,
|
|
select:disabled,
|
|
[data-baseweb="select"][aria-disabled="true"],
|
|
[data-baseweb="select"] > div[aria-disabled="true"],
|
|
[data-baseweb="select"] [aria-disabled="true"] {
|
|
background-color: #f1f3f6 !important;
|
|
color: #5f6b7a !important;
|
|
-webkit-text-fill-color: #5f6b7a !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
div[data-testid="stButton"] > button,
|
|
button[data-testid="stBaseButton-primary"],
|
|
button[kind="primary"] {
|
|
color-scheme: light !important;
|
|
background-color: #2256c7 !important;
|
|
border-color: #2256c7 !important;
|
|
color: #ffffff !important;
|
|
-webkit-text-fill-color: #ffffff !important;
|
|
}
|
|
|
|
div[data-testid="stButton"] > button *,
|
|
button[data-testid="stBaseButton-primary"] *,
|
|
button[kind="primary"] * {
|
|
color: #ffffff !important;
|
|
-webkit-text-fill-color: #ffffff !important;
|
|
}
|
|
|
|
div[data-testid="stButton"] > button:hover,
|
|
button[data-testid="stBaseButton-primary"]:hover,
|
|
button[kind="primary"]:hover {
|
|
background-color: #1746a2 !important;
|
|
border-color: #1746a2 !important;
|
|
}
|
|
|
|
div[data-testid="stButton"] > button:disabled,
|
|
button[data-testid="stBaseButton-primary"]:disabled,
|
|
button[kind="primary"]:disabled {
|
|
background-color: #e4e8ee !important;
|
|
border-color: #c3cad4 !important;
|
|
color: #5f6b7a !important;
|
|
-webkit-text-fill-color: #5f6b7a !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
div[data-testid="stButton"] > button:disabled *,
|
|
button[data-testid="stBaseButton-primary"]:disabled *,
|
|
button[kind="primary"]:disabled * {
|
|
color: #5f6b7a !important;
|
|
-webkit-text-fill-color: #5f6b7a !important;
|
|
}
|
|
|
|
/* Outrank the legacy primary-label selector for non-WebKit engines too. */
|
|
div[data-testid="stButton"]
|
|
> button[data-testid="stBaseButton-primary"]:disabled
|
|
[data-testid="stMarkdownContainer"],
|
|
div[data-testid="stButton"]
|
|
> button[data-testid="stBaseButton-primary"]:disabled
|
|
[data-testid="stMarkdownContainer"] p,
|
|
div[data-testid="stButton"]
|
|
> button[data-testid="stBaseButton-primary"]:disabled
|
|
[data-testid="stMarkdownContainer"] span {
|
|
color: #5f6b7a !important;
|
|
-webkit-text-fill-color: #5f6b7a !important;
|
|
}
|
|
|
|
label,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p,
|
|
[data-testid="stMarkdownContainer"],
|
|
[data-testid="stWidgetLabel"],
|
|
[data-testid="stExpander"] summary,
|
|
[data-testid="stExpander"] summary *,
|
|
[data-testid="stExpanderDetails"],
|
|
[data-testid="stExpanderDetails"] * {
|
|
color: #172033;
|
|
}
|
|
|
|
[data-testid="stExpander"],
|
|
[data-testid="stVerticalBlockBorderWrapper"] {
|
|
color-scheme: light !important;
|
|
background-color: #ffffff !important;
|
|
color: #172033 !important;
|
|
border-color: #dce1e8 !important;
|
|
}
|
|
</style>
|
|
"""
|
|
|
|
|
|
def apply_poc4_light_theme(st: object, *, additional_css: str = "") -> None:
|
|
"""Inject optional layout CSS followed by the authoritative light theme."""
|
|
|
|
st.markdown(
|
|
additional_css + POC4_LIGHT_THEME_CSS,
|
|
unsafe_allow_html=True,
|
|
)
|
|
|
|
|
|
__all__ = ["POC4_LIGHT_THEME_CSS", "apply_poc4_light_theme"]
|