DarkMode a nuestras aplicaciones¶

El DarkMode es una personalizacion muy conocida en cuanto al cambio de estilos para nuestra aplicacion a paleta de colores obscuras. Se implemento para que utilicemos alhabilitarlo la paleta de colores correspondiente predefinidas por diseño.

Ejemplo de visualizacion¶

original de la compañia

Dark

De esta manera ahora vamos a poder utilizar dos paletas de colores distintas y utilizar desde el lado de la implementacion un flag para tener el darkMode o utilizar los diseños originales.

Como implementarlo con la paleta de colores de Andreani¶

Se debe tener en cuenta en el index de nuestra aplicacion donde llamamos al StyleSystemProvider que le pasemos el valor en TRUE al parametro darkMode.

{
  root.render(
  <BrowserRouter>
    <StyleSystemProvider darkMode={true} >
      <Provider store={store}>
        <CssBaseline />
        <App msalInstance={msalInstance} />
      </Provider>
    </StyleSystemProvider>
  </BrowserRouter>
);
}

El parametro darkMode es un campo opcional que si no se envia por default va a utilizar los diseños originales de la compañia.

Warning

En este ejemplo se envia true al campo darkMode pero queda a criterio del desarrollador como la maneja en cuanto a si crea un boton en su aplicacion que se encargue de enviar este flag.

Info

Se podria crear una variable que tome el valor Por ejemplo de un localStorage o Session Storage y ese valor setearlo en el parametro de darkMode.

        const darkModeCustom = true; // Obtén el valor de darkMode desde la aplicación consumidora , de localStorage por ejemplo

        root.render(
        <BrowserRouter>
            <StyleSystemProvider darkMode={darkModeCustom} >
            <Provider store={store}>
                <CssBaseline />
                <App msalInstance={msalInstance} />
            </Provider>
            </StyleSystemProvider>
        </BrowserRouter>
        );

En resumen con este ejemplo dejamos como quedaria el index para ayuda al desarrollador.

Paleta de Colores default de AndreaniCon paleta de colores Dark de Andreani

      import { createRoot } from "react-dom/client";
      import { StyleSystemProvider } from "@architecture-it/stylesystem";
      import { CssBaseline } from "@mui/material";
      import { BrowserRouter } from "react-router-dom";
      import { Provider } from "react-redux";
      import { store } from "app/store";
      import { msalInstance } from "msalInstance";

      import App from "./App";
      import rum from "./monitor";

      rum.setInitialPageLoadName("Home");

      const container = document.getElementById("root") as HTMLElement;

      const root = createRoot(container); 



      root.render(
      <BrowserRouter>
          <StyleSystemProvider>
          <Provider store={store}>
              <CssBaseline />
              <App msalInstance={msalInstance} />
          </Provider>
          </StyleSystemProvider>
      </BrowserRouter>
      );

    import { createRoot } from "react-dom/client";
    import { StyleSystemProvider } from "@architecture-it/stylesystem";
    import { CssBaseline } from "@mui/material";
    import { BrowserRouter } from "react-router-dom";
    import { Provider } from "react-redux";
    import { store } from "app/store";
    import { msalInstance } from "msalInstance";

    import App from "./App";
    import rum from "./monitor";
    import scssContent from "./green.module.scss";

    rum.setInitialPageLoadName("Home");

    const container = document.getElementById("root") as HTMLElement;

    const root = createRoot(container);



    root.render(
    <BrowserRouter>
      <StyleSystemProvider darkMode={true}>
        <Provider store={store}>
            <CssBaseline />
            <App msalInstance={msalInstance} />
        </Provider>
      </StyleSystemProvider>
    </BrowserRouter>
    );