Theme colors

[poxin13]

I took a quick stab at trying to adjust the colors programmatically for the theme, but wasn't having any luck due to the docker aspect (my lack of knowledge). Couldn't figure out how to get it to update on run-time and not when the container itself is built.

Would be cool to be able to customize this in some manner!

[codewec]

Thanks, I get a lot of requests for theme customization. I plan to add CSS editor soon.

[codewec]

I got interested myself and added a custom CSS. Please check the dev image ghcr.io/codewec/dashlit:main

You can create a custom.css file in the data folder and define styles in it. You can separately define styles for the dark mode.

My example of custom.css file

.dark {
	.header {
		background-color: blue;
		padding: 10px;
		border-radius: 10px;
		.title {
			color: green;
		}

		*[role='button'] {
			background-color: yellow;
		}

		.theme-switcher {
			background-color: purple;
		}
	}

	.dashboard {
		background-color: red;
		.group {
			background-color: palegoldenrod;
			.title {
				color: red;
				font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
			}
			.description {
				color: green;
			}
		}
		.group-empty {
			background-color: olive;
		}
		.item-empty {
			background-color: cadetblue;
		}
		.item {
			background-color: peru;
		}
	}
}

Have a fun :)

[poxin13]

Very nice! I noticed you were using tailwind, would this work if defined as their colors? "bg-sky-400", etc

[codewec]

Yes, it will work. Maybe sometimes you will need to use !important

[GiFuJo]

Note sure if a CSS editor solves this problem too, but currently a lot of external icons don't work well with the default styling applied, because of the object-fit and border-radius attributes attached to the .object-cover and .rounded-full classes.

Default:

object-fit and border-radius unset:

In this example I'm using the SVG icons from https://selfh.st/icons/, but pretty much all non-lineart icons look a bit weird.