diff --git a/base.css b/base.css index 67038c0..74e679f 100644 --- a/base.css +++ b/base.css @@ -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); diff --git a/modules/colors/base16-default.css b/modules/colors/base16-default.css index 3763f65..fd9e5bd 100644 --- a/modules/colors/base16-default.css +++ b/modules/colors/base16-default.css @@ -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); } diff --git a/modules/colors/gruvbox.css b/modules/colors/gruvbox.css index 41e251b..64caffe 100644 --- a/modules/colors/gruvbox.css +++ b/modules/colors/gruvbox.css @@ -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); } diff --git a/modules/darkmode.css b/modules/darkmode.css index 7249479..cf82e2d 100644 --- a/modules/darkmode.css +++ b/modules/darkmode.css @@ -1,6 +1,5 @@ @media (prefers-color-scheme: dark) { :root { - --light: var(--gruvbox-fg); --fg: var(--light); --bg: var(--dark); } diff --git a/modules/readmes/colors.txt b/modules/readmes/colors.txt index f12c434..c32395a 100644 --- a/modules/readmes/colors.txt +++ b/modules/readmes/colors.txt @@ -3,3 +3,20 @@ in the css @import url("https://styles.alv.cx/modules/colors/.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 diff --git a/readme.txt b/readme.txt index 1a84dea..01198b4 100644 --- a/readme.txt +++ b/readme.txt @@ -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/.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 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