Merge pull request #45 from lynnpepin/light-themes

feat: Added a light version and an automatic (light/dark) version for…

README.md

@@ -118,13 +118,14 @@ of your `config.toml`:
 [extra]
 
 # One of: blue, green, orange, pink, red.
-# Defaults to blue. 
+# Defaults to blue.
+# Append -light for light themes, e.g. blue-light
+# Or append -auto, e.g. blue-auto
 accent_color = "green"
 
-# One of: blue, dark, green, orange, pink, red.
-# Enabling dark background will also modify primary font color
-# to be darker.
-# Defaults to accent color (or, if not accent color specified, to blue). 
+# One of: blue, dark, green, orange, pink, red, light, auto
+# Enabling dark background will also modify primary font color to be darker.
+# Defaults to accent color (or, if not accent color specified, to blue).
 background_color = "dark"
 ```
 

config.toml

@@ -25,11 +25,12 @@ highlight_theme = "boron"
 
 # One of: blue, green, orange, pink, red.
 # Defaults to blue.
+# Append -light for light themes, e.g. blue-light
+# Or append -auto, e.g. blue-auto
 accent_color = "blue"
 
-# One of: blue, dark, green, orange, pink, red.
-# Enabling dark background will also modify primary font color
-# to be darker.
+# One of: blue, dark, green, orange, pink, red, light, auto
+# Enabling dark background will also modify primary font color to be darker.
 # Defaults to accent color (or, if not accent color specified, to blue).
 background_color = "blue"
 

sass/color/background_auto.scss

@@ -0,0 +1,14 @@
+:root {
+
+  @media (prefers-color-scheme: light) {
+    --background: white;
+  
+    --color: #101010;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --background: #101010;
+  
+    --color: #A9B7C6;
+  }
+}

sass/color/background_light.scss

@@ -0,0 +1,3 @@
+:root {
+  --background: #f0f0f0;
+}

sass/color/blue-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(35,176,255);
+    --accent-alpha-70: rgba(35,176,255,.7);
+    --accent-alpha-20: rgba(35,176,255,.2);
+
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(32,128,192);
+    --accent-alpha-70: rgba(32,128,192,.7);
+    --accent-alpha-20: rgba(32,128,192,.2);
+
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/blue-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(32,128,192);
+  --accent-alpha-70: rgba(32,128,192,.7);
+  --accent-alpha-20: rgba(32,128,192,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/green-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(120,226,160);
+    --accent-alpha-70: rgba(120,226,160,.7);
+    --accent-alpha-20: rgba(120,226,160,.2);
+  
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(24, 192, 128);
+    --accent-alpha-70: rgba(24, 192, 128,.7);
+    --accent-alpha-20: rgba(24, 192, 128,.2);
+
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/green-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(24, 192, 128);
+  --accent-alpha-70: rgba(24, 192, 128,.7);
+  --accent-alpha-20: rgba(24, 192, 128,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/orange-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(255,168,106);
+    --accent-alpha-70: rgba(255,168,106,.7);
+    --accent-alpha-20: rgba(255,168,106,.2);
+  
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(240,128,48);
+    --accent-alpha-70: rgba(240,128,48,.7);
+    --accent-alpha-20: rgba(240,128,48,.2);
+  
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/orange-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(240,128,48);
+  --accent-alpha-70: rgba(240,128,48,.7);
+  --accent-alpha-20: rgba(240,128,48,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/pink-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(224,64,192);
+    --accent-alpha-70: rgba(224,64,192);
+    --accent-alpha-20: rgba(224,64,192,.2);
+
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(238,114,241);
+    --accent-alpha-70: rgba(238,114,241,.7);
+    --accent-alpha-20: rgba(238,114,241,.2);
+  
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/pink-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(224,64,192);
+  --accent-alpha-70: rgba(224,64,192);
+  --accent-alpha-20: rgba(224,64,192,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

sass/color/red-auto.scss

@@ -0,0 +1,29 @@
+:root {
+  @media (prefers-color-scheme: dark) {
+    --accent: rgb(255,98,102);
+    --accent-alpha-70: rgba(255,98,102,.7);
+    --accent-alpha-20: rgba(255,98,102,.2);
+
+    --background: #101010;
+    --color: #f0f0f0;
+    --border-color: rgba(255,240,224,.125);
+    
+    div.logo {
+      color: black;
+    }
+  
+  }
+  @media (prefers-color-scheme: light) {
+    --accent: rgb(240,48,64);
+    --accent-alpha-70: rgba(240,48,64,.7);
+    --accent-alpha-20: rgba(240,48,64,.2);
+  
+    --background: white;
+    --color: #201030;
+    --border-color: rgba(0,0,16,.125);
+    
+    div.logo {
+      color: white;
+    }
+  }
+}

sass/color/red-light.scss

@@ -0,0 +1,12 @@
+:root {
+  --accent: rgb(240,48,64);
+  --accent-alpha-70: rgba(240,48,64,.7);
+  --accent-alpha-20: rgba(240,48,64,.2);
+
+  --background: white;
+  --color: #1D212C;
+  --border-color: rgba(0, 0, 0, .1);
+  div.logo {
+    color: white;
+  }
+}

theme.toml

@@ -20,11 +20,13 @@ repo = "https://github.com/panr/hugo-theme-terminal"
 [extra]
 
 # One of: blue, green, orange, pink, red.
+# Defaults to blue.
+# Append -light for light themes, e.g. blue-light
+# Or append -auto, e.g. blue-auto
 accent_color = "blue"
 
-# One of: blue, dark, green, orange, pink, red.
-# Enabling dark background will also modify primary font color
-# to be darker.
+# One of: blue, dark, green, orange, pink, red, light, auto
+# Enabling dark background will also modify primary font color to be darker.
 # Defaults to accent color (or, if not accent color specified, to blue).
 background_color = "blue"