ChenKaiLiuG/life_generators
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: add dark mode and close #10

Browse Source
This commit is contained in:
lifeadventurer
2023-12-23 22:57:59 +08:00
parent ad1466bcb1
commit 4eb05b8e46
2 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
fortune_generator/fortune.js
View File

@@ -43,16 +43,12 @@ async function fetch_data(){
})
}
// color adjust
const specialEventColor = "#3e4fbb";
const daystoSpecialEvent = "#485ccd";
const textColorClass = ["good-fortune", "good-fortune", "good-fortune", "good-fortune", "good-fortune", "middle-fortune", "bad-fortune", "bad-fortune"];
const fortuneStatus = ["大吉", "中吉", "小吉", "吉", "末吉", "中平", "凶", "大凶"];
const chineseMonth = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
const week = ['日', '一', '二', '三', '四', '五', '六'];
const title = `<span style="font-size:8vmin; color:#000000CC;"><b>今日運勢</b></span>`;
const title = `<span class="title" style="font-size:8vmin;"><b>今日運勢</b></span>`;
const allGood = `<span class="bad-fortune" style="font-size:6vmin;"><b>萬事皆宜</b></span>`;
const allBad = `<span class="good-fortune" style="font-size:6vmin;"><b>諸事不宜</b></span>`;
@@ -119,12 +115,12 @@ async function init_page(){
// if there is upcoming event then show
if(eventIndex_1 != -1){
let days = daysDiff(eventIndex_1);
let upcoming_event_1 = `<span class="desc" style="font-size:5vmin;">距離<b style="color:${specialEventColor}">${special_events[eventIndex_1].event}</b>還剩<b style="color:${daystoSpecialEvent}">${days}</b>天</span>`;
let upcoming_event_1 = `<span class="desc" style="font-size:5vmin;">距離<b class="special-event">${special_events[eventIndex_1].event}</b>還剩<b class="special-event">${days}</b>天</span>`;
$('#upcoming-event-1').html(upcoming_event_1);
}
if(eventIndex_2 != -1){
let days = daysDiff(eventIndex_2);
let upcoming_event_2 = `<span class="desc" style="font-size:5vmin;">距離<b style="color:${specialEventColor}">${special_events[eventIndex_2].event}</b>還剩<b style="color:${daystoSpecialEvent}">${days}</b>天</span>`;
let upcoming_event_2 = `<span class="desc" style="font-size:5vmin;">距離<b class="special-event">${special_events[eventIndex_2].event}</b>還剩<b class="special-event">${days}</b>天</span>`;
$('#upcoming-event-2').html(upcoming_event_2);
}

18
fortune_generator/styles.css
View File

@@ -9,7 +9,7 @@
--date-color: #096e1bC9;
--special-event-color: #3e4fbb;
--days-to-special-event-color: #485ccd;
--title-color: #000000CC;
}
.dark-mode {
@@ -17,13 +17,13 @@
--button-hover-color: #9ac6f1;
--bg-color: #1e1d24;
--good-fortune-color: #e74c3c;
--bad-fortune-color: #c1c1c1d9;
--bad-fortune-color: #d4d4d4d9;
--middle-fortune-color: #57c857;
--desc-color: #838282;
--date-color: #2fc64aed;
--special-event-color: #3e4fbb;
--days-to-special-event-color: #485ccd;
--date-color: #0ed64aed;
--special-event-color: #6477f3;
--dark-mode-icon-color: #ffffff;
--title-color: #cdcdcd;
}
@@ -75,6 +75,14 @@ body {
color: var(--date-color);
}
.title {
color: var(--title-color);
}
.special-event {
color: var(--special-event-color);
}
button {
background-color: var(--button-color);
color: var(--bg-color);