Theme

Overview

This is the latest SKAO Theme for use within all SKAO applications. Also provided are standard constants that can be used for toggling between light and dark themes.

Code snippet ./services/theme.tsx

import { createTheme } from ‘@mui/material’; import { Theme } from ‘@ska-telescope/ska-javascript-components’;

const theme = mode => createTheme(Theme(mode)); export default theme;

Code snippet .App.tsx import theme from ‘../services/theme/theme’;

function App() {

const [apiVersion, setAPIVersion] = React.useState(“LOCAL”); const { t } = useTranslation(‘dpd’);

const skao = t(‘toolTip.button.skao’); const mode = t(‘toolTip.button.mode’); const toolTip = { skao: skao, mode: mode };

// Theme related const [themeMode, setThemeMode] = React.useState(THEME_LIGHT);

const themeToggle = () => { setThemeMode(themeMode === THEME_LIGHT ? THEME_DARK : THEME_LIGHT);

};

return (

<ThemeProvider theme={theme(themeMode)}> <CssBaseline enableColorScheme />

…

</ThemeProvider>

);

}

export default App;

Testing Identifier

Testing of the theme will be done at component and page level as required