Add DarkMode and Theme support #68 #78

[steffjenl]

Edit screen:

Statuspage:

I think we must add more colors to change

[jbrooksuk]

Great start! I think we should store RGBA colors for the status page themes, it's more versatile.

I'm on my phone at the moment, but will check this out for a full review soon!

[jbrooksuk]

Note, assets don't need to be committed manually anymore.

[steffjenl]

Note, assets don't need to be committed manually anymore.

Compile Assets commit is coming from GitHub actions not from me.

[steffjenl]

Great start! I think we should store RGBA colors for the status page themes, it's more versatile.

I'm on my phone at the moment, but will check this out for a full review soon!

I have changed the PR to RGBA and added font setting

[steffjenl]

[jbrooksuk]

Ah, thanks! I've made the assets only compile on main now.

[steffjenl]

@jbrooksuk fixed merge conflicts with main

[jbrooksuk]

Do you think we need to switch to using a customizable color palette so that we use danger etc?

[steffjenl]

resources/views/components/cachet.blade.php

You mean, dark, light, system and custom and with custom you get the custom colors?

[jbrooksuk]

@steffjenl I wonder whether we could simplify this to use Filament's own Color class? We just store the primary color and then generate the shades for that? We'd need to change the Tailwind config to read from the CSS variables instead though. Maybe that's a lot of work?

[steffjenl]

@steffjenl I wonder whether we could simplify this to use Filament's own Color class? We just store the primary color and then generate the shades for that? We'd need to change the Tailwind config to read from the CSS variables instead though. Maybe that's a lot of work?

You mean the colors setting in Filament? and add those six colors ?

return $panel // ... ->colors([ 'danger' => Color::Rose, 'gray' => Color::Gray, 'info' => Color::Blue, 'primary' => Color::Indigo, 'success' => Color::Emerald, 'warning' => Color::Orange, ]);

[jbrooksuk]

@steffjenl yeah, maybe? But, these colors should be passed to Cachet's frontend. If we use Filament's Color class, we can get access to the CSS variables and use them directly in Cachet.

[jbrooksuk]

@steffjenl I think we should simplify the color schemes even more. Why don't we take inspiration from @calebporzio with Flux? https://fluxui.dev/themes

We could still allow you to change status colors, but we ask for an accent color and generate the grays from it? Anything really custom could be done with CSS.

[jbrooksuk]

I've replaced this PR with #143.

The only thing we could add is the theme switcher.