Depending time theme switch readme
This commit is contained in:
parent
857c2392bb
commit
7ed61647e3
24
README.md
24
README.md
@ -16,6 +16,7 @@
|
|||||||
- [Customization](#customization)
|
- [Customization](#customization)
|
||||||
- [Links](#links)
|
- [Links](#links)
|
||||||
- [Colors](#colors)
|
- [Colors](#colors)
|
||||||
|
- [Theme Depending at the time](#theme-depending-at-the-time)
|
||||||
- [Image Background](#image-background)
|
- [Image Background](#image-background)
|
||||||
- [Greetings](#greetings)
|
- [Greetings](#greetings)
|
||||||
- [Weather Info](#weather-info)
|
- [Weather Info](#weather-info)
|
||||||
@ -57,13 +58,9 @@
|
|||||||
You can change the links (and the icons too) in the HTML Code:
|
You can change the links (and the icons too) in the HTML Code:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<a
|
<a href="https://github.com/" target="blank" class="qlink__link qlink__link-1">
|
||||||
href="https://github.com/"
|
|
||||||
target="blank"
|
|
||||||
class="qlink__link qlink__link-1"
|
|
||||||
>
|
|
||||||
<i class="qlink__icon" data-feather="github"></i>
|
<i class="qlink__icon" data-feather="github"></i>
|
||||||
</a>
|
</a>
|
||||||
```
|
```
|
||||||
|
|
||||||
Change the link in the `href` property with the link you want. (The `target="blank"` makes the link to open a new tab with the link you choose).
|
Change the link in the `href` property with the link you want. (The `target="blank"` makes the link to open a new tab with the link you choose).
|
||||||
@ -96,6 +93,21 @@ In the CSS code you can always change the variables for both themes (Dark and Li
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Theme Depending at the time
|
||||||
|
|
||||||
|
In the `theme.js` file there's a section about changing the theme depending in the time. You have to 'Uncomment' that section to enable it:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const today = new Date();
|
||||||
|
const Hr = today.getHours();
|
||||||
|
|
||||||
|
if (Hr >= 19 || Hr < 5) {
|
||||||
|
enableDark();
|
||||||
|
} else {
|
||||||
|
disableDark();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
### Image Background
|
### Image Background
|
||||||
|
|
||||||
You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image:
|
You can set your own background image with the variable `--imgbg` and set the route to the image you want It's disable by default. If you uncomment the variable, it has by default this image:
|
||||||
|
@ -31,11 +31,15 @@ themeToggle.addEventListener('click', () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Change the theme with the time
|
||||||
|
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
const Hr = today.getHours();
|
const Hr = today.getHours();
|
||||||
|
|
||||||
|
/*
|
||||||
if (Hr >= 19 || Hr < 5) {
|
if (Hr >= 19 || Hr < 5) {
|
||||||
enableDark();
|
enableDark();
|
||||||
} else {
|
} else {
|
||||||
disableDark();
|
disableDark();
|
||||||
}
|
}
|
||||||
|
*/
|
Loading…
x
Reference in New Issue
Block a user