new colorscheme picking
This commit is contained in:
parent
a8f04a0b18
commit
ae9ce73739
3
base.css
3
base.css
@ -1,8 +1,5 @@
|
|||||||
@import url("https://styles.alv.cx/modules/colors/gruvbox.css");
|
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--light: #fefefe;
|
--light: #fefefe;
|
||||||
--dark: var(--gruvbox-bg);
|
|
||||||
|
|
||||||
--fg: var(--dark);
|
--fg: var(--dark);
|
||||||
--bg: var(--light);
|
--bg: var(--light);
|
||||||
|
@ -28,4 +28,13 @@
|
|||||||
--base16-blue: var(--base16-base0D);
|
--base16-blue: var(--base16-base0D);
|
||||||
--base16-purple: var(--base16-base0E);
|
--base16-purple: var(--base16-base0E);
|
||||||
--base16-brown: var(--base16-base0F);
|
--base16-brown: var(--base16-base0F);
|
||||||
|
|
||||||
|
--orange: var(--base16-orange);
|
||||||
|
--red: var(--base16-red);
|
||||||
|
--green: var(--base16-green);
|
||||||
|
--yellow: var(--base16-yellow);
|
||||||
|
--blue: var(--base16-blue);
|
||||||
|
--purple: var(--base16-purple);
|
||||||
|
--light: var(--base16-fg);
|
||||||
|
--dark: var(--base16-bg);
|
||||||
}
|
}
|
||||||
|
@ -32,4 +32,13 @@
|
|||||||
--gruvbox-fg3: #bdae93;
|
--gruvbox-fg3: #bdae93;
|
||||||
--gruvbox-fg4: #a89984;
|
--gruvbox-fg4: #a89984;
|
||||||
--gruvbox-gray: #928374;
|
--gruvbox-gray: #928374;
|
||||||
|
|
||||||
|
--orange: var(--gruvbox-orange);
|
||||||
|
--red: var(--gruvbox-red);
|
||||||
|
--green: var(--gruvbox-green);
|
||||||
|
--yellow: var(--gruvbox-yellow);
|
||||||
|
--blue: var(--gruvbox-blue);
|
||||||
|
--purple: var(--gruvbox-purple);
|
||||||
|
--light: var(--gruvbox-fg);
|
||||||
|
--dark: var(--gruvbox-bg);
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--light: var(--gruvbox-fg);
|
|
||||||
--fg: var(--light);
|
--fg: var(--light);
|
||||||
--bg: var(--dark);
|
--bg: var(--dark);
|
||||||
}
|
}
|
||||||
|
@ -3,3 +3,20 @@ in the css
|
|||||||
@import url("https://styles.alv.cx/modules/colors/<colorscheme>.css");
|
@import url("https://styles.alv.cx/modules/colors/<colorscheme>.css");
|
||||||
|
|
||||||
and use the variables created in the file
|
and use the variables created in the file
|
||||||
|
|
||||||
|
the following colors will be available to use with all colorschemes (useful for
|
||||||
|
switching between colorschemes easily)
|
||||||
|
|
||||||
|
|
||||||
|
--orange
|
||||||
|
--red
|
||||||
|
--green
|
||||||
|
--yellow
|
||||||
|
--blue
|
||||||
|
--purple
|
||||||
|
|
||||||
|
--light
|
||||||
|
--dark
|
||||||
|
|
||||||
|
prefer to use `--fg` and `--bg` and be careful with using `--light` and `--dark`
|
||||||
|
as it may make light/dark mode switching a pain
|
||||||
|
13
readme.txt
13
readme.txt
@ -1,16 +1,23 @@
|
|||||||
styles.alv.cx
|
styles.alv.cx
|
||||||
|
=============
|
||||||
|
|
||||||
central styling repo and domain
|
central styling repo and domain
|
||||||
|
|
||||||
|
|
||||||
to style a site, put this in a css file somewhere:
|
to style a site:
|
||||||
|
|
||||||
|
1. put this at the top of a css file somewhere:
|
||||||
|
|
||||||
|
@import url("https://styles.alv.cx/modules/colors/<colorscheme>.css");
|
||||||
@import url("https://styles.alv.cx/base.css");
|
@import url("https://styles.alv.cx/base.css");
|
||||||
|
|
||||||
and any of the optional modules you want.
|
replacing <colorscheme> with one of the options available
|
||||||
a list of actively hosted modules can be seen in this repo in the modules folder and at
|
|
||||||
|
2. add any of the optional modules you want.
|
||||||
|
3. a list of actively hosted modules can be seen in this repo in the modules folder and at
|
||||||
https://styles.alv.cx/modules/
|
https://styles.alv.cx/modules/
|
||||||
|
|
||||||
there are some variables you may want to use to keep your site's styling consistent and you can
|
there are some variables you may want to use to keep your site's styling consistent and you can
|
||||||
view them in the `:root` section of `base.css` and any module you use.
|
view them in the `:root` section of `base.css` and any module you use.
|
||||||
|
more colors are available at https://styles.alv.cx/modules/readmes/colors.txt
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user