How to establish custom colors and/or themes

[winzlocom]

Description

I have been working with homepage for about a week now, and admit to a lack of CSS knowledge

I have several questions I’m hoping someone can help me with:

1. if I omit the “theme” it “color” lines in settings.yml, what elements can i change the colors of using the custom.css file?
2. If it would be easier overall, what would it take to make a custom theme for Dashboard and choose my own colors there?.

really appreciate the help on this! It’s an awesome app and this would make it even more visually accessible for those of is who require high contrast and minimal b shading effects.

homepage version

0.9.2

Installation method

Docker

Configuration

No response

Container Logs

No response

Browser Logs

No response

Troubleshooting

Above mentioned entries added to cudtom.css

[glime-ai[bot]]

Thanks for posting a discussion about homepage here on GitHub. Homepage now uses a fancy new AI tool thanks to our friends at Glime, so the answer below is the AI bot's attempt to answer your question. If you feel it's sufficient you can mark the answer and close this post, otherwise feel free to leave it open of course!

Thanks for using Homepage! ❤️

---

To answer your questions regarding customization of the Homepage dashboard:

1. If you omit the theme or color lines in settings.yaml, you can still change the colors of various elements using the custom.css file. The custom.css file allows you to target elements in Homepage with various classes and IDs to customize their appearance. You can set specific colors for text, backgrounds, borders, and other properties of HTML elements. For example, to change the background color of the body, you could add the following to custom.css:

body {
  background-color: #yourColor; /* Replace #yourColor with the hex code of the color you want */
}

2. Creating a custom theme for Homepage would involve more extensive CSS work. You would need to define styles for all the elements you want to customize. This could include setting colors for text, backgrounds, buttons, links, and other components. You would write these styles in the custom.css file and ensure they are specific enough to override the default styles. If you require high contrast and minimal shading effects, you would focus on ensuring that the color contrast ratios meet accessibility standards and avoid using CSS properties that add shading, such as box-shadow or text-shadow.

Since you mentioned a lack of CSS knowledge, you might consider learning some basic CSS to get started with customizations. There are many free resources available online that can help you learn CSS. Additionally, you could reach out to the Homepage community for assistance or hire a developer with CSS expertise to create a custom theme for you.

Remember to back up your custom.css file before making changes, and you may need to refresh or restart your Homepage dashboard to see the changes take effect.

This comment was generated by Glime.

[winzlocom]

I shouldd note, that this appears to be a difference between usingg a desktop browser (Safari on macOS) vs a mobile browser (Safari on iOS) In the mobile browser case, I have a green-ish border around all sections that I cannot seem to get rid of. Maybe this issue is more limited in scope to mobile browser support, but nevertheless, still looking for assistance in knowing all available CSS options in order to make a proper theme that supports both mobile and desktop browsers.

[winzlocom]

Here is a screen shot of what i am seeing in ios. My goal is to remove the red color and make it weird.

[shamoon]

Might be because of a browser extension you have

[winzlocom]

Update:

i am using Darky as an extension that inverts colors for easier reading of web sites. By setting the theme to dark using the slider in the footer and setting the color to slate in settings.yml, i get the attached result. The negative of the slate color’s is red so that explains my original attachment. I need things to be in grayscale so i can either vote the page with white text on black background or black text on white background and let the Datky extension flip the colors.