Hi, I’ve realized a panel that changes color dinamically.
If I apply “filled” CSS and i change the color everything changes (buttons, checkboxes, labels,…) but not the navbars.
It is a strange behaviour because if I choose dark theme and I change color also the navbars change.
Have I forgotten something? Here is my code:
import React, {useState} from 'react';
import {
Page,
Navbar,
NavLeft,
NavTitle,
NavRight,
Link,
Block,
BlockTitle,
List,
ListItem,
Row,
Col,
Button, Panel, View, App, Popup, LoginScreen, f7, f7ready
} from 'framework7-react';
import Config from "../js/config";
import moment from "moment";
const HomePage = (props) => {
f7ready(() => {
document.getElementById("app").className = localStorage.getItem("global-theme") + " " + localStorage.getItem("color-theme");
});
const { f7route, f7router } = props;
const config = new Config();
const [global_theme, setGlobalTheme] = useState(localStorage.getItem("global-theme"));
const [color_theme, setColorTheme] = useState(localStorage.getItem("color-theme"));
const changeGlobalTheme = (event) => {
const target = event.target;
const value = target.value;
setGlobalTheme(value);
document.getElementById("app").className = value + " " + color_theme;
localStorage.setItem("global-theme", value);
}
const changeColorTheme = (event) => {
const target = event.target;
const value = target.value;
setColorTheme(value);
document.getElementById("app").className = global_theme + " " + value;
localStorage.setItem("color-theme", value);
}
const logout = () => {
f7.dialog.confirm("Confermare?", "Logout", function () {
localStorage.setItem("username", "");
f7router.navigate("/login/");
});
}
const voci_menu=[
{key: 1, title: "Planning ordinario", url: "/planning/ord/"+ moment().format("YYYY-MM-DD") + "/"},
{key: 2, title: "Planning Extra", url: "/planning/extra/"+ moment().format("YYYY-MM-DD") + "/"},
{key: 3, title: "Assistenza", url: "/assistenza/"},
{key: 4, title: "Form", url: "/form/"}
];
const global_themes = [
{theme: "", title: "Standard"},
{theme: "theme-dark", title: "Dark"},
];
const colors = [
{theme: "", title: "Standard"},
{theme: "red", title: "Rosso"},
{theme: "green", title: "Verde"},
{theme: "blue", title: "Blu"},
{theme: "pink", title: "Rosa"},
{theme: "yellow", title: "Giallo"},
{theme: "orange", title: "Arancione"},
{theme: "purple", title: "Viola"},
{theme: "deeppurple", title: "Viola scuro"},
{theme: "lightblue", title: "Azzurro"},
{theme: "teal", title: "Verde Acqua"},
{theme: "lime", title: "Lime"},
{theme: "deeporange", title: "Arancione scuro"},
{theme: "gray", title: "Grigio"},
{theme: "white", title: "Bianco"},
{theme: "black", title: "Nero"}
];
return(
<Page name="home">
{/* Left panel with cover effect*/}
<Panel left cover>
<View>
<Page>
<Navbar title="Impostazioni Tema"/>
<BlockTitle>Impostazioni</BlockTitle>
<BlockTitle>Tema grafico</BlockTitle>
<List>
{global_themes.map((color, index) => (
<ListItem
key={"key_global_theme_" + index}
radio
name="tema-radio"
value={color.theme}
title={color.title}
onChange={(e) => changeGlobalTheme(e)}
defaultChecked={color.theme === global_theme}
/>
))}
</List>
<BlockTitle>Tema Colori</BlockTitle>
<List>
{colors.map((color, index) => (
<ListItem
key={"key_color_theme_" + index}
radio
name="color-radio"
value={"color-theme-" + color.theme}
title={color.title}
onChange={(e) => changeColorTheme(e)}
defaultChecked={"color-theme-" + color.theme === color_theme}
/>
))}
</List>
</Page>
</View>
</Panel>
{/* Top Navbar */}
<Navbar>
<NavLeft>
<Link iconMaterial="menu" panelOpen="left" />
</NavLeft>
<NavTitle>{config.nome_app}</NavTitle>
<NavRight>
<Link iconMaterial="exit_to_app" onClick={() => logout()} />
</NavRight>
</Navbar>
{/* Page content */}
<Block strong>
<p>Benvenuti nell'applicazione di gestione interventi di {config.codicecliente.charAt(0).toUpperCase() + config.codicecliente.slice(1)} s.r.l.</p>
</Block>
<BlockTitle>Menù principale</BlockTitle>
<List>
{voci_menu.map(menu => (
<ListItem key={menu.key} title={menu.title} link={menu.url}/>
))}
</List>
<BlockTitle>Modals</BlockTitle>
<Block strong>
<Row>
<Col width="50">
<Button fill raised popupOpen="#my-popup">Popup</Button>
</Col>
<Col width="50">
<Button fill raised loginScreenOpen="#my-login-screen">Login Screen</Button>
</Col>
</Row>
</Block>
<List>
<ListItem
title="Dynamic (Component) Route"
link="/dynamic-route/blog/45/post/125/?foo=bar#about"
/>
<ListItem
title="Default Route (404)"
link="/load-something-that-doesnt-exist/"
/>
<ListItem
title="Request Data & Load"
link="/request-and-load/user/123456/"
/>
</List>
{/* Popup */}
<Popup id="my-popup">
<View>
<Page>
<Navbar title="Popup">
<NavRight>
<Link popupClose>Close</Link>
</NavRight>
</Navbar>
<Block>
<p>Popup content goes here.</p>
</Block>
</Page>
</View>
</Popup>
</Page>
)
};
export default HomePage;