🖌 Added support for custom themes!

README.md

@@ -236,28 +236,68 @@ Finally just add them to the `config.js` file.
 
 ### 💛 Colors
 
-In the `app.css` file you can change the variables for both themes (Dark and Light):
+Bento supports custom theming with several pre-included presets to choose from!
+Change the current theme in `config.js`
+Included themes: 
+
+  - [Arc](https://github.com/horst3180/arc-theme)
+  - Bento (default)
+  - [Catppuccin](https://github.com/catppuccin/catppuccin)
+  - [Concept-Dark](https://www.deviantart.com/zb652/art/Concept-Dark-885878180)
+  - [Monokai (free)](https://monokai.pro/)
+  - [Nord](https://www.nordtheme.com/)
+  - Sakura
+  - [Solarized](https://ethanschoonover.com/solarized/)
+  - [Summer](https://github.com/JhonnyRice/summer)
 
-```css
-/* Light theme  */
 
+```js
+	// Theme
+	theme: 'bento',
+```
+### 🖌️ Custom Colors
+
+You can create your own themes by adding them to the `./assets/themes/` folder, with a `.css` extension!  
+Example:
+
+```css
 :root {
-  --accent: #61b0f1; /* Hover color */
-  --bg: #f5f5f5; /* Background color */
-  --sbg: #e4e6e6; /* Cards color */
+
+  /* Light Colors  */
+
+  --background: #f5f5f5; /* Background color */
+  --accent: #57a0d9; /* Hover color */
+  --cards: #e4e6e6; /* Cards color */
+
+  /* Fonts Color */
   --fg: #3a3a3a; /* Foreground color */
-  --sfg: #3a3a3a; /* Sceondary Foreground color */
-}
+  --sfg: #494949; /* Sceondary Foreground color */
 
-/* Dark theme  */
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(255, 255, 255, 0.7),
+    rgba(255, 255, 255, 0.7)
+  ); /* Filter color */
+}
 
 .darktheme {
-  --accent: #61b0f1; /* Hover color */
-  --bg: #19171a; /* Background color */
-  --sbg: #201e21; /* Cards color */
+  /* Dark Colors  */
+
+  --background: #19171a; /* Background color */
+  --accent: #57a0d9; /* Hover color */
+  --cards: #201e21; /* Cards color */
+
+  /* Fonts Color */
   --fg: #d8dee9; /* Foreground color */
-  --sfg: #3a3a3a; /* Secondary Foreground color */
+  --sfg: #2c292e; /* Secondary Foreground color */
+
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(0, 0, 0, 0.85),
+    rgba(0, 0, 0, 0.85)
+  ); /* Filter color */
 }
+
 ```
 
 ### 🌑 Auto change theme

app.css

@@ -20,40 +20,10 @@
   --fg-list: 2vh; /* Links List */
   --icon: 3vh; /* Icon Size */
 
-  /* Fonts Color */
-  --fg: #3a3a3a; /* Foreground color */
-  --sfg: #494949; /* Sceondary Foreground color */
-
-  /* Light Colors  */
-  --accent: #57a0d9; /* Hover color */
-  --background: #f5f5f5; /* Background color */
-  --cards: #e4e6e6; /* Cards color */
-
-  /* Image background  */
-  --imgbg: url(assets/background.jpg); /* Image URL */
-  --imgcol: linear-gradient(
-    rgba(255, 255, 255, 0.7),
-    rgba(255, 255, 255, 0.7)
-  ); /* Filter color */
-}
-
-.darktheme {
-  /* Dark Colors  */
-  --accent: #57a0d9; /* Hover color */
-  --background: #19171a; /* Background color */
-  --cards: #201e21; /* Cards color */
-
-  /* Fonts Color */
-  --fg: #d8dee9; /* Foreground color */
-  --sfg: #2c292e; /* Secondary Foreground color */
-
-  /* Image background  */
-  --imgcol: linear-gradient(
-    rgba(0, 0, 0, 0.85),
-    rgba(0, 0, 0, 0.85)
-  ); /* Filter color */
 }
 
+
+
 /* 
 //  ┌─┐┌┬┐┬ ┬┬  ┌─┐┌─┐
 //  └─┐ │ └┬┘│  ├┤ └─┐

assets/js/theme.js

@@ -7,6 +7,17 @@ let darkTheme = localStorage.getItem('darkTheme');
 const themeToggle = document.querySelector('#themeButton');
 const bodyBackground = document.getElementById('#body');
 
+setTheme();
+
+function setTheme() { 
+	const theme = CONFIG.theme;
+	var link = document.createElement("link");
+	link.type = "text/css";
+	link.rel = "stylesheet";
+	link.href = `./assets/themes/${theme}.css`
+	document.head.appendChild(link);
+}
+
 const enableDark = () => {
 	document.body.classList.add('darktheme');
 	localStorage.setItem('darkTheme', 'enabled');

assets/themes/arc.css

@@ -0,0 +1,36 @@
+:root {
+    /* Light Colors  */
+
+    --background: #F5F6F7; /* Background color */
+    --accent: #5294e2; /* Hover color */
+    --cards: #d9dde0; /* Cards color */
+
+    /* Fonts Color */
+    --fg: #5c616c; /* Foreground color */
+    --sfg: #ffffff; /* Sceondary Foreground color */
+
+    /* Image background  */
+    --imgcol: linear-gradient(
+      rgba(245, 246, 247, 0.7),
+      rgba(245, 246, 247, 0.7)
+    ); /* Filter color */
+  }
+
+  .darktheme {
+    /* Dark Colors  */
+
+    --background: #383C4A; /* Background color */
+    --accent: #4e5467; /* Hover color */
+    --cards: #22242d; /* Cards color */
+
+    /* Fonts Color */
+    --fg: #D3DAE3; /* Foreground color */
+    --sfg: #5294e2; /* Secondary Foreground color */
+
+    /* Image background  */
+    --imgcol: linear-gradient(
+      rgba(56 60, 74, 0.85),
+      rgba(56 60, 74, 0.85)
+    ); /* Filter color */
+  }
+

assets/themes/bento.css

@@ -0,0 +1,36 @@
+:root {
+
+  /* Light Colors  */
+
+  --background: #f5f5f5; /* Background color */
+  --accent: #57a0d9; /* Hover color */
+  --cards: #e4e6e6; /* Cards color */
+
+  /* Fonts Color */
+  --fg: #3a3a3a; /* Foreground color */
+  --sfg: #494949; /* Sceondary Foreground color */
+
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(255, 255, 255, 0.7),
+    rgba(255, 255, 255, 0.7)
+  ); /* Filter color */
+}
+
+.darktheme {
+  /* Dark Colors  */
+
+  --background: #19171a; /* Background color */
+  --accent: #57a0d9; /* Hover color */
+  --cards: #201e21; /* Cards color */
+
+  /* Fonts Color */
+  --fg: #d8dee9; /* Foreground color */
+  --sfg: #2c292e; /* Secondary Foreground color */
+
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(0, 0, 0, 0.85),
+    rgba(0, 0, 0, 0.85)
+  ); /* Filter color */
+}

assets/themes/catppuccin.css

@@ -0,0 +1,37 @@
+:root {
+  /* Light Colors  */
+  /* Catppuccin is a dark-mode color palete. The theme is similar for both modes. */
+
+  --background: #575268; /* Background color */
+  --accent: #c3bac6; /* Hover color */
+  --cards: #988ba2; /* Cards color */
+
+  /* Fonts Color */
+  --fg: #d9e0ee; /* Foreground color */
+  --sfg: #f5e0dc; /* Secondary Foreground color */
+
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(87, 82, 104, 0.85),
+    rgba(87, 82, 104, 0.85)
+  ); /* Filter color */
+}
+
+.darktheme {
+  /* Dark Colors  */
+
+  --background: #1e1e2e; /* Background color */
+  --accent: #575268; /* Hover color */
+  --cards: #302d41; /* Cards color */
+
+  /* Fonts Color */
+  --fg: #d9e0ee; /* Foreground color */
+  --sfg: #f5e0dc; /* Secondary Foreground color */
+
+  /* Image background  */
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(30, 30, 46, 0.85),
+    rgba(30, 30, 46, 0.85)
+  ); /* Filter color */
+}

assets/themes/conceptdark.css

@@ -0,0 +1,37 @@
+:root {
+    /* Light Colors  */
+
+    /* Concept-Dark is a dark-mode only theme. Light theme mirrors dark. */
+    --background: #373b3e; /* Background color */
+    --accent: #ff9d47; /* Hover color */
+    --cards: #323538; /* Cards color */
+
+    /* Fonts Color */
+    --fg: #b5bbc9; /* Foreground color */
+    --sfg: #484c52; /* Secondary Foreground color */
+
+    /* Image background  */
+    --imgcol: linear-gradient(
+      rgba(55 59, 62, 0.85),
+      rgba(55 59, 62, 0.85)
+    ); /* Filter color */
+  }
+
+  .darktheme {
+    /* Dark Colors  */
+
+    --background: #373b3e; /* Background color */
+    --accent: #ff9d47; /* Hover color */
+    --cards: #323538; /* Cards color */
+
+    /* Fonts Color */
+    --fg: #b5bbc9; /* Foreground color */
+    --sfg: #484c52; /* Secondary Foreground color */
+
+    /* Image background  */
+    --imgcol: linear-gradient(
+      rgba(55 59, 62, 0.85),
+      rgba(55 59, 62, 0.85)
+    ); /* Filter color */
+  }
+

assets/themes/monokai.css

@@ -0,0 +1,36 @@
+:root {
+    /* Light Colors  */
+
+    --background: #f8f8f2; /* Background color */
+    --accent: #818179; /* Hover color */
+    --cards: #cfcfc2; /* Cards color */
+
+    /* Fonts Color */
+    --fg: #292A2B; /* Foreground color */
+    --sfg: #e6db74; /* Sceondary Foreground color */
+
+    /* Image background  */
+    --imgcol: linear-gradient(
+      rgba(248, 248, 242, 0.7),
+      rgba(248, 248, 242, 0.7)
+    ); /* Filter color */
+  }
+
+  .darktheme {
+    /* Dark Colors  */
+
+    --background: #272822; /* Background color */
+    --accent: #cfcfc2; /* Hover color */
+    --cards: #3e3d32; /* Cards color */
+
+    /* Fonts Color */
+    --fg: #cfcfc2; /* Foreground color */
+    --sfg: #fd971f; /* Secondary Foreground color */
+
+    /* Image background  */
+    --imgcol: linear-gradient(
+      rgba(39 40, 34, 0.85),
+      rgba(39 40, 34, 0.85)
+    ); /* Filter color */
+  }
+

assets/themes/nord.css

@@ -0,0 +1,35 @@
+:root {
+  /* Light Colors  */
+
+  --background: #eceff4; /* Background color */
+  --accent: #d8dee9; /* Hover color */
+  --cards: #e5e9f0; /* Cards color */
+
+  /* Fonts Color */
+  --fg: #2e3440; /* Foreground color */
+  --sfg: #3b4252; /* Sceondary Foreground color */
+
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(216, 222, 233, 0.7),
+    /* #D8DEE9 */ rgba(216, 222, 233, 0.7)
+  ); /* Filter color */
+}
+
+.darktheme {
+  /* Dark Colors  */
+
+  --background: #2e3440; /* Background color */
+  --accent: #434c5e; /* Hover color */
+  --cards: #3b4252; /* Cards color */
+
+  /* Fonts Color */
+  --fg: #eceff4; /* Foreground color */
+  --sfg: #e5e9f0; /* Secondary Foreground color */
+
+  /* Image background  */
+  --imgcol: linear-gradient(
+    rgba(26, 52, 64, 0.85),
+    /* #2E3440 */ rgba(26, 52, 64, 0.85)
+  ); /* Filter color */
+}