From 41d7dd5a51a94b34980a368f9b7c96e0424ca721 Mon Sep 17 00:00:00 2001 From: Lewis Wood Date: Mon, 21 Mar 2022 21:48:07 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=96=8C=20Added=20support=20for=20custom?= =?UTF-8?q?=20themes!?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added support for custom themes without editing the main app.css file. Themes configurable through config.js, with several pre-included themes. Some of these don't map particularly well to the limited selection of colors we use, but I've done what i can to match them. Some themes only have a dark mode variant, so this is copied onto the light theme as well. --- README.md | 66 ++++++++++++++++++++++++++++------- app.css | 34 ++---------------- assets/js/theme.js | 11 ++++++ assets/themes/arc.css | 36 +++++++++++++++++++ assets/themes/bento.css | 36 +++++++++++++++++++ assets/themes/catppuccin.css | 37 ++++++++++++++++++++ assets/themes/conceptdark.css | 37 ++++++++++++++++++++ assets/themes/monokai.css | 36 +++++++++++++++++++ assets/themes/nord.css | 35 +++++++++++++++++++ assets/themes/sakura.css | 36 +++++++++++++++++++ assets/themes/solarized.css | 36 +++++++++++++++++++ assets/themes/summer.css | 36 +++++++++++++++++++ config.js | 5 ++- index.html | 14 ++++---- 14 files changed, 402 insertions(+), 53 deletions(-) create mode 100644 assets/themes/arc.css create mode 100644 assets/themes/bento.css create mode 100644 assets/themes/catppuccin.css create mode 100644 assets/themes/conceptdark.css create mode 100644 assets/themes/monokai.css create mode 100644 assets/themes/nord.css create mode 100644 assets/themes/sakura.css create mode 100644 assets/themes/solarized.css create mode 100644 assets/themes/summer.css diff --git a/README.md b/README.md index 96bd47d69..e851290fd 100644 --- a/README.md +++ b/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 diff --git a/app.css b/app.css index d5edd7445..971ddd3db 100644 --- a/app.css +++ b/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 */ } + + /* // ┌─┐┌┬┐┬ ┬┬ ┌─┐┌─┐ // └─┐ │ └┬┘│ ├┤ └─┐ diff --git a/assets/js/theme.js b/assets/js/theme.js index 61b99a93b..51fd82ec7 100644 --- a/assets/js/theme.js +++ b/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'); diff --git a/assets/themes/arc.css b/assets/themes/arc.css new file mode 100644 index 000000000..9f84da343 --- /dev/null +++ b/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 */ + } + \ No newline at end of file diff --git a/assets/themes/bento.css b/assets/themes/bento.css new file mode 100644 index 000000000..9c6cec65c --- /dev/null +++ b/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 */ +} diff --git a/assets/themes/catppuccin.css b/assets/themes/catppuccin.css new file mode 100644 index 000000000..c7fc6c7b2 --- /dev/null +++ b/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 */ +} diff --git a/assets/themes/conceptdark.css b/assets/themes/conceptdark.css new file mode 100644 index 000000000..09a923ea2 --- /dev/null +++ b/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 */ + } + \ No newline at end of file diff --git a/assets/themes/monokai.css b/assets/themes/monokai.css new file mode 100644 index 000000000..040bd0f25 --- /dev/null +++ b/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 */ + } + \ No newline at end of file diff --git a/assets/themes/nord.css b/assets/themes/nord.css new file mode 100644 index 000000000..6107fb187 --- /dev/null +++ b/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 */ +} diff --git a/assets/themes/sakura.css b/assets/themes/sakura.css new file mode 100644 index 000000000..386196dfe --- /dev/null +++ b/assets/themes/sakura.css @@ -0,0 +1,36 @@ +:root { + /* Light Colors */ + + --background: #fffaf5; /* Background color */ + --accent: #ffefde; /* Hover color */ + --cards: #ebe6e1; /* Cards color */ + + /* Fonts Color */ + --fg: #4b4646; /* Foreground color */ + --sfg: #4b4646; /* Sceondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(255, 250, 245, 0.7), + rgba(255, 250, 245, 0.7) + ); /* Filter color */ + } + + .darktheme { + /* Dark Colors */ + + --background: #000f14; /* Background color */ + --accent: #475356; /* Hover color */ + --cards: #0a191e; /* Cards color */ + + /* Fonts Color */ + --fg: #a0a0b4; /* Foreground color */ + --sfg: #a0a0b4; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(0, 15, 20, 0.85), + rgba(0, 15, 20, 0.85) + ); /* Filter color */ + } + \ No newline at end of file diff --git a/assets/themes/solarized.css b/assets/themes/solarized.css new file mode 100644 index 000000000..42220ee1a --- /dev/null +++ b/assets/themes/solarized.css @@ -0,0 +1,36 @@ +:root { + /* Light Colors */ + + --background: #fdf6e3; /* Background color */ + --accent: #657b83; /* Hover color */ + --cards: #eee8d5; /* Cards color */ + + /* Fonts Color */ + --fg: #657b83; /* Foreground color */ + --sfg: #002b36; /* 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: #002b36; /* Background color */ + --accent: #657b83; /* Hover color */ + --cards: #073642; /* Cards color */ + + /* Fonts Color */ + --fg: #839496; /* Foreground color */ + --sfg: #fdf6e3; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(56 60, 74, 0.85), + rgba(56 60, 74, 0.85) + ); /* Filter color */ + } + \ No newline at end of file diff --git a/assets/themes/summer.css b/assets/themes/summer.css new file mode 100644 index 000000000..5b90983c0 --- /dev/null +++ b/assets/themes/summer.css @@ -0,0 +1,36 @@ +:root { + /* Light Colors */ + + --background: #D8E2E1; /* Background color */ + --accent: #E7CA62; /* Hover color */ + --cards: #ECBD10; /* Cards color */ + + /* Fonts Color */ + --fg: #292A2B; /* Foreground color */ + --sfg: #1D1D1D; /* Sceondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(216, 226, 225, 0.7), + rgba(216, 226, 225, 0.7) + ); /* Filter color */ + } + + .darktheme { + /* Dark Colors */ + + --background: #292A2B; /* Background color */ + --accent: #64A8D8; /* Hover color */ + --cards: #32B5C7; /* Cards color */ + + /* Fonts Color */ + --fg: #D8E2E1; /* Foreground color */ + --sfg: #fdf6e3; /* Secondary Foreground color */ + + /* Image background */ + --imgcol: linear-gradient( + rgba(41 42, 43, 0.85), + rgba(41 42, 43, 0.85) + ); /* Filter color */ + } + \ No newline at end of file diff --git a/config.js b/config.js index d47d0e0ab..92f0ff330 100644 --- a/config.js +++ b/config.js @@ -12,10 +12,13 @@ const CONFIG = { // General name: 'John', - imageBackground: false, openInNewTab: true, twelveHourFormat: false, + // Theme + theme: 'bento', + imageBackground: false, + // Greetings greetingMorning: 'Good morning!', greetingAfternoon: 'Good afternoon,', diff --git a/index.html b/index.html index 2f9234e2d..16f61615d 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,12 @@ - - - Bento - - - - + + + Bento + + + +