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 { :root {
--light: #fefefe; --light: #fefefe;
--dark: var(--gruvbox-bg);
--fg: var(--dark); --fg: var(--dark);
--bg: var(--light); --bg: var(--light);

View File

@ -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);
} }

View File

@ -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);
} }

View File

@ -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);
} }

View File

@ -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

View File

@ -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