Changing Graph Color?

[timmy-time]

Hey there, I've been playing around with the styling of upptime to match my preferences. Is there any way to change it from the default color green to another color?

Kind Regards, Tim.

[leoherzog]

It looks like that is defined in https://github.com/upptime/graphs/blob/v1.2.18/src/index.ts#L232-L233. I'd love to get those colors pulled out into configurable variables in the .upptimerc.yml file!

[bitnulleins]

Hey @timmy-time,

I would also like to be able to set the color of the graphs via environment variables. Until then, a CSS workaround works for me. As you can see on my status site, I was able to change the color of the graphs to my color: https://bitnulleins.github.io/monitoring/!

Step 1

To do this, I first created a CSS filter with a CSS Color Filter Generator, which overwrites my desired color from each original color. For my color (#6699CC):

brightness(0) saturate(100%) invert(78%) sepia(63%) saturate(3041%) hue-rotate(182deg) brightness(85%) contrast(86%);

Step 2

I have stored the filter conversions in the variable --graph-filter. I then added the following part to the CSS, which converts the background graphic with the filter and positions it absolutely behind the text with :before:

:root {
  /* other variables */
  --graph-filter: brightness(0) saturate(100%) invert(52%) sepia(74%) saturate(266%) hue-rotate(168deg) brightness(97%) contrast(91%);
}

article:before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--background);
    filter: var(--graph-filter);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
}

article > * {
    position: relative;
}

The pseudo element :before and CSS filter filter both have a high compatibility. Enjoy customizing!