User:Polypoyo/vector.css: Difference between revisions

From Terraria Wiki
Jump to navigation Jump to search
Polypoyo (talk | contribs)
(Refactored and swapped colors)
Polypoyo (talk | contribs)
(Add table light theme,)
 
Line 1: Line 1:
/*
PalleteKit by polypoyo
Licence: MIT Licence (this means you can do whatever tf you want with my code)
This is a template to create your own pallete. Simply edit the hex codes in the
dark and light themes to your liking.

You can ignore the warning "Rule is empty" and the error "Expected RBRACE at..."
*/
/* Dark theme (by default) */
:root {
:root {
--theme-x-bg-content: #222;
--theme-x-bg-content: #222;
--theme-x-bg-nav: #333;
--theme-x-bg-nav: #333;
--theme-x-fg-color: #fff;
}
/* Light theme if you explicitly say so in your system theme settings */
@media (prefers-color-scheme: light) {
:root {
--theme-x-bg-content: #fff;
--theme-x-bg-nav: #eee;
--theme-x-fg-color: #000
}
}

:root {
--theme-navbar-background: var(--theme-x-bg-nav);
--theme-navbar-background: var(--theme-x-bg-nav);
--theme-sidebar-heading-background: var(--theme-x-bg-nav);
--theme-sidebar-heading-background: var(--theme-x-bg-nav);
Line 8: Line 29:
--theme-footer-background: var(--theme-x-bg-content);
--theme-footer-background: var(--theme-x-bg-content);
--theme-sidebar-box-background: var(--theme-x-bg-content);
--theme-sidebar-box-background: var(--theme-x-bg-content);
--theme-text-color: var(--theme-x-fg-color);
--theme-border-color: var(--theme-x-fg-color);
--theme-sidebar-heading-arrow-color: var(--theme-x-fg-color);
}
}

Latest revision as of 07:26, 24 June 2022

/*
PalleteKit by polypoyo
Licence: MIT Licence (this means you can do whatever tf you want with my code)
	This is a template to create your own pallete. Simply edit the hex codes in the
dark and light themes to your liking.

You can ignore the warning "Rule is empty" and the error "Expected RBRACE at..."
*/
/* Dark theme (by default) */
:root {
	--theme-x-bg-content: #222;
	--theme-x-bg-nav: #333;
	--theme-x-fg-color: #fff;
}
/* Light theme if you explicitly say so in your system theme settings */
@media (prefers-color-scheme: light) {
	:root {
		--theme-x-bg-content: #fff;
		--theme-x-bg-nav: #eee;
		--theme-x-fg-color: #000
	}
}

:root {
	--theme-navbar-background: var(--theme-x-bg-nav);
	--theme-sidebar-heading-background: var(--theme-x-bg-nav);
	--theme-sidebar-box-background-2: var(--theme-x-bg-nav);;
	--theme-content-background: var(--theme-x-bg-content);
	--theme-footer-background: var(--theme-x-bg-content);
	--theme-sidebar-box-background: var(--theme-x-bg-content);
	--theme-text-color: var(--theme-x-fg-color);
	--theme-border-color: var(--theme-x-fg-color);
	--theme-sidebar-heading-arrow-color: var(--theme-x-fg-color);
}