body { /* everything within tags */ background-color: #111111; color: #EEEEEE; font-family: "Helvetica Neue", sans-serif; font-size: 100%; } ul { /* un-ordered list */ background-color: #111111; color: #EEEEEE; font-family: "Helvetica Neue", sans-serif; font-size: 100%; } ol { /* ordered list */ background-color: #111111; color: #EEEEEE; font-family: "Helvetica Neue", sans-serif; font-size: 100%; } a:link { /* unvisited link */ color: #0080ff; } a:visited { /* link has been visited by the user */ color: #8000ff; } a:hover { /* mouse hovering over the link */ color: #8080ff; } a:active { /* link currently being clicked on */ color: #bf00bf; } :root { /* The Basic Light Theme is the default theme; this tells it, "this is what this page should look like by default" */ --color-primary: #EEEEEE; --color-secondary: #DDDDDD; --font-color: #111111; --link: #0000ff; --link-hover: #3333ff; --link-clicking: #800080; --link-visited: #8000ff; } /* the code here is very verbose and spaced out which takes more time to type but i personally find this easier to parse than giant text blocks */ /* light themes */ /* .basic-light-theme { --color-primary: #EEEEEE; --font-color: #111111; } .red-light-theme { --color-primary: #EEEEEE; --font-color: #FF0000 } .soft-red-light-theme { background-color: #FFBFBF; color: #BF4040; } .magenta-light-theme { background-color: #EEEEEE; color: #BF00BF; } .soft-magenta-light-theme { background-color: #FFBFFF; color: #FF00FF; } .blue-light-theme { background-color: #EEEEEE; color: #0040FF; } .soft-blue-light-theme { background-color: #BFFFFF; color: #0080FF; } .cyan-light-theme { background-color: #EEEEEE; color: #00BFBF; } .soft-cyan-light-theme { background-color: #BFFFFF; color: #00BFBF; } .mint-light-theme { background-color: #EEEEEE; color: #00FF80; } .soft-mint-light-theme { background-color: #BFFFD9; color: #00e666; } .pine-light-theme { background-color: #EEEEEE; color: #00BF00; } .soft-pine-light-theme { background-color: #BFFFBF; color: #00BF00; } .yellow-light-theme { background-color: #EEEEEE; color: #BFBF00; } .soft-yellow-light-theme { background-color: #FFFFBF; color: #BFBF00; } .orange-light-theme { background-color: #EEEEEE; color: #FF8000; } .soft-orange-light-theme { background-color: #FFCC99; color: #E66600; } */ /* dark themes */ /* .basic-dark-theme { background-color: #111111; color: #EEEEEE; } .red-dark-theme { background-color: #111111; color: #FF0000 } .soft-red-dark-theme { background-color: #1a0d0d; color: #BF4040; } .magenta-dark-theme { background-color: #111111; color: #BF00BF; } .soft-magenta-dark-theme { background-color: #1A0D1A; color: #990099; } .blue-dark-theme { background-color: #111111; color: #0040FF; } .soft-blue-dark-theme { background-color: #0D0D1A; color: #0040BF; } .cyan-dark-theme { background-color: #111111; color: #00BFBF; } .soft-cyan-dark-theme { background-color: #0D1A1A; color: #00A6A6; } .mint-dark-theme { background-color: #111111; color: #00D973; } .soft-mint-dark-theme { background-color: #00120D; color: #00BF59; } .pine-dark-theme { background-color: #111111; color: #008000; } .soft-pine-dark-theme { background-color: #0D1A0D; color: #006600; } .yellow-dark-theme { background-color: #111111; color: #BFBF00; } .soft-yellow-dark-theme { background-color: #0D0D00; color: #999900; } .orange-dark-theme { background-color: #111111; color: #FF8000; } .soft-orange-dark-theme { background-color: #1A0D00; color: #CC6600; } */