From 7efc591fdc904952072a5a93c8634e0ed54258f9 Mon Sep 17 00:00:00 2001 From: Lewis Wood Date: Fri, 18 Mar 2022 22:48:35 +0000 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=94=A4=20Added=20customizable=20title?= =?UTF-8?q?=20support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Customizable titles through a very small script to change the window's title. - Configurable with a value in config.js This could be in the but a script fits the pattern. --- assets/js/title.js | 10 ++++++++++ config.js | 11 ++++++----- index.html | 34 +++++++++++++++++----------------- 3 files changed, 33 insertions(+), 22 deletions(-) create mode 100644 assets/js/title.js diff --git a/assets/js/title.js b/assets/js/title.js new file mode 100644 index 000000000..c0d2fe15a --- /dev/null +++ b/assets/js/title.js @@ -0,0 +1,10 @@ +// ___ . ___ ___ +// | | | | |__ +// | | | |___ |___ +// Function to set window title. + +const SetWindowTitle = () => { + document.title = CONFIG.title; +} + +SetWindowTitle(); diff --git a/config.js b/config.js index d47d0e0ab..ee6892504 100644 --- a/config.js +++ b/config.js @@ -10,11 +10,12 @@ const CONFIG = { // ├┴┐├─┤└─┐││ └─┐ // └─┘┴ ┴└─┘┴└─┘└─┘ - // General - name: 'John', - imageBackground: false, - openInNewTab: true, - twelveHourFormat: false, + // General + name: 'John', + imageBackground: false, + openInNewTab: true, + twelveHourFormat: false, + title: 'Bento', // Greetings greetingMorning: 'Good morning!', diff --git a/index.html b/index.html index 2f9234e2d..615f197e5 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,11 @@ - - - Bento - - - - + + + + + + - - - - - - - - - - + + + + + + + + + + + - - + + From 5cabe95ba83d55bf237f88b7baaa0af679587847 Mon Sep 17 00:00:00 2001 From: lew Date: Sat, 19 Mar 2022 02:44:32 +0000 Subject: [PATCH 3/6] Add auto light/dark docs to README --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 96bd47d69..19d90aa77 100644 --- a/README.md +++ b/README.md @@ -262,7 +262,7 @@ In the `app.css` file you can change the variables for both themes (Dark and Lig ### 🌑 Auto change theme -The theme can be automatically changed by the OS' current theme or personalized hours +The theme can be automatically changed by the OS' current theme, set hours, or following sunrise/sunset. that you can change in the `config.js` file: ```js @@ -276,6 +276,9 @@ that you can change in the `config.js` file: changeThemeByHour: true, // If it's true, it will use the values below: hourDarkThemeActive: '18:30', // Turn on the dark theme after this hour hourDarkThemeInactive: '07:00', // Turn off the dark theme after this hour and before the above hour + + // Autochange automatically based on location (sunrise/sunset). Openweathermap API key required. + changeThemeByLocation: false, ``` ![](assets/img/darkMode.png) From 7fdd153d8964b56ad48456037074f55e3fbd0611 Mon Sep 17 00:00:00 2001 From: Lewis Wood Date: Mon, 21 Mar 2022 19:16:10 +0000 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=94=A7=20Added=20customizable=20backg?= =?UTF-8?q?round=20image?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Configurable through config.js, this just sets the CSS variable to the provided URL. Defaults to ./assets/background.jpg. Again, this is more for convenience when running in docker as it's not as easy to just swap the file. --- README.md | 3 ++- app.css | 1 - assets/js/theme.js | 2 ++ config.js | 1 + 4 files changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 96bd47d69..c46e040d1 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,7 @@ To change the default name, the greetings and if you want to have an image backg // General name: 'John', imageBackground: false, + imageUrl: './assets/background.jpg', // Set custom background image URL. If the page is served insecurely, you may have issues loading images from pages over https. openInNewTab: true, // Greetings @@ -94,7 +95,7 @@ To change the default name, the greetings and if you want to have an image backg ``` -> You can change the background by substituting the `background.jpg` file in `assets` folder. +> You can change the background by providing a link to an image in `config.js`. ![](assets/img/backgroundImage.png) diff --git a/app.css b/app.css index d5edd7445..92ccd33a0 100644 --- a/app.css +++ b/app.css @@ -30,7 +30,6 @@ --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) diff --git a/assets/js/theme.js b/assets/js/theme.js index 61b99a93b..08155a5f8 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -39,6 +39,8 @@ themeToggle.addEventListener('click', () => { }); if (CONFIG.imageBackground) { + const root = document.querySelector(':root'); + root.style.setProperty('--imgbg', `url(${CONFIG.imageUrl})`); document.body.classList.add('withImageBackground'); } diff --git a/config.js b/config.js index d47d0e0ab..26a1eed37 100644 --- a/config.js +++ b/config.js @@ -13,6 +13,7 @@ const CONFIG = { // General name: 'John', imageBackground: false, + imageUrl: './assets/background.jpg', // Set custom background image URL. If the page is served insecurely, you may have issues loading images from pages over https. openInNewTab: true, twelveHourFormat: false, From 41d7dd5a51a94b34980a368f9b7c96e0424ca721 Mon Sep 17 00:00:00 2001 From: Lewis Wood Date: Mon, 21 Mar 2022 21:48:07 +0000 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=96=8C=20Added=20support=20for=20cust?= =?UTF-8?q?om=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 + + + +