Organise styles and use theme instead of hardcoded values

[wKich]

No description provided.

[dagda1]

do we need to think about dark mode and light mode?

[wKich]

It's default color for parodos. And when we are overriding theme we don't know what kind of theme it is, light or dark it's just a theme.

[dagda1]

this looks good, I was thinking each client could have a file or something with their overrides but this looks good for now.

[wKich]

Oh, you mean to allow specify colours from yaml file, right?

[wKich]

In that case you can't switch themes through backstage in UI. So I suggest to use backstage theme API

backstage-parodos/packages/app/src/App.tsx

Lines 45 to 68 in 6c385da

	const parodosTheme: ParodosPluginTheme = createParodosTheme({
	...lightTheme,
	parodos: {
	headerBackground: '#003B70',
	},
	});
	const app = createApp({
	apis,
	components: {
	SignInPage: ParodosSignInPage,
	},
	themes: [
	{
	id: 'parodos',
	title: 'Parodos',
	variant: 'light',
	Provider: ({ children }) => (
	<ThemeProvider theme={parodosTheme}>
	<CssBaseline>{children}</CssBaseline>
	</ThemeProvider>
	),
	},
	],

[dagda1]

lets just ship this and see what happens when we apply it to citibank