new colorscheme picking

This commit is contained in:
Akbar Rahman 2022-04-13 17:09:20 +01:00
parent a8f04a0b18
commit ae9ce73739
Signed by: alvierahman90
GPG Key ID: 20609519444A1269
6 changed files with 46 additions and 8 deletions

View File

@ -1,8 +1,5 @@
@import url("https://styles.alv.cx/modules/colors/gruvbox.css");
:root {
--light: #fefefe;
--dark: var(--gruvbox-bg);
--fg: var(--dark);
--bg: var(--light);

View File

@ -28,4 +28,13 @@
--base16-blue: var(--base16-base0D);
--base16-purple: var(--base16-base0E);
--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);
}

View File

@ -32,4 +32,13 @@
--gruvbox-fg3: #bdae93;
--gruvbox-fg4: #a89984;
--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);
}

View File

@ -1,6 +1,5 @@
@media (prefers-color-scheme: dark) {
:root {
--light: var(--gruvbox-fg);
--fg: var(--light);
--bg: var(--dark);
}

View File

@ -3,3 +3,20 @@ in the css
@import url("https://styles.alv.cx/modules/colors/<colorscheme>.css");
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

View File

@ -1,16 +1,23 @@
styles.alv.cx
=============
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");
and any of the optional modules you want.
a list of actively hosted modules can be seen in this repo in the modules folder and at
https://styles.alv.cx/modules/
replacing <colorscheme> with one of the options available
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/
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.
more colors are available at https://styles.alv.cx/modules/readmes/colors.txt