Ability to customize theme/design

[gouku]

Describe the feature request

It would be great to have the ability to customize the theme/design via custom CSS

Why do you personally want this feature to be implemented?

This can be a simple options in yaml that let users add some custom CSS then this will be injected to the footer of the HTML output.

How long have you been using this project?

1 mo

Additional information

N/A

[NOCanoa]

+1, just wanted to say realy like this project so far 🚀, just the css mould need some light tweaking and it would be perfect

[sparanoid]

I'm not familar with Vue so I created a custom Gatus frontend using React and Next.js.

It's a separate project that leverages the Gatus REST API and uses Tailwind CSS for styling. You can simply fork it and customize the appearance as you like.

[NOCanoa]

@sparanoid ohh nice, dont know any next/react tho lul, my gota do somting like that, but would still be cool to have a way to add some minimal css to the standart site

[TwiN]

FYI custom CSS is now on my radar. I'm not sure how I'm going to implement it yet, but a rough idea of what I have in mind right now is that I want to make it so people can choose from multiple "themes", all of which is essentially just pre-written custom CSS under the hood, and alternatively, the ability for people to just provide their own CSS to design it as they see fit.

I've been wanting to redo Gatus' entire UI for a while now, but I just haven't had the time.

Also @sparanoid that looks amazing!

[TwiN]

Implementation will be far simpler than what I initially envisioned. For now, at least.

Here's what the configuration will look like:

ui:
  custom-css: |
    .endpoint-group {
      background-color: blue !important;
    }
    .endpoint-group-content {
      background-color: red !important;
    }

Using the example above, here's what the dashboard would look like: