Implement Custom Color Palette in base.css
Closed this issue · 4 comments
Description
Currently, our project uses the standard Vue color palette. We propose creating a custom color palette and implementing it as variables within base.css.
Action
- Create a color palette.
- Update
base.cssto use the new color palette.
The "Schule 4.0" Website looks like they use Material 3 as a styleguide (https://www.schule4-0.de/), I would suggest, that we design our Website in a similar way. (https://m3.material.io/)
- Create a Material 3 Theme (https://material-foundation.github.io/material-theme-builder/)
- Maybe we can also use the material-web library, it uses Material 3 (https://github.com/material-components/material-web/tree/main)
What are your opinions on that?
It looks like https://www.schule4-0.de/blog/ps40-spuren-im-netz/ use a custom design. Of course, this is more work, but for a game this kind of design is maybe a better fit.
However, a Material 3 theme with "game" like colors could also work.
Okay, so I think we can wait for a theme integration after we fully implemented the first minigame and then have a look on what core elements we really need. I think the theme is not required for the graphics so we can implement it afterwards.
Let's keep this open and adjust things later.