Skip to content

Commit 39cd254

Browse files
SkyBird233HouLiXieBuRou
SkyBird233
authored and
HouLiXieBuRou
committed
refactor: simplify seasonal theming
1 parent f6e98b8 commit 39cd254

File tree

9 files changed

+88
-107
lines changed

9 files changed

+88
-107
lines changed

‎app.vue

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,17 @@ const { t } = useI18n();
66
useHead({
77
title: t('seo.head.title'),
88
titleTemplate: (title) => `${title} | ${t('seo.site.name')}`,
9-
link: [{ rel: 'icon', type: 'image/svg+xml', href: '/aosc.svg' }]
9+
link: [{ rel: 'icon', type: 'image/svg+xml', href: '/aosc.svg' }],
10+
script: [
11+
{
12+
// This script will execute before the browser renders the <body>,
13+
// ensuring the correct season class is set from the very beginning.
14+
textContent:
15+
'document.documentElement.classList.add(["spring","summer","autumn","winter"][(new Date().getMonth()+10)%12/3|0])',
16+
type: 'text/javascript',
17+
tagPosition: 'head'
18+
}
19+
]
1020
});
1121
1222
useSeoMeta({

‎assets/css/main.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ body {
4545
margin: 0;
4646
padding: 0;
4747
font-size: 12pt;
48-
background-color: white;
4948
font-family: 'Noto Sans CJK SC', sans-serif;
5049
font-size: 12pt;
5150
min-width: 800px;

‎assets/theme.scss

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
:root {
2+
--primary: #8d8d8d;
3+
--secondary: #8d8d8d;
4+
background-color: #dddddd;
5+
}
6+
7+
// Dark mode fallback
8+
/*
9+
@media (prefers-color-scheme: dark) {
10+
:root {
11+
--primary: #727272;
12+
--secondary: #727272;
13+
background-color: #222222;
14+
}
15+
}
16+
*/
17+
18+
.spring {
19+
--primary: #718c71;
20+
--secondary: #7f9e7f;
21+
background-image: url(/backgrounds/spring.svg);
22+
}
23+
24+
.summer {
25+
--primary: #577c8a;
26+
--secondary: #6a8a96;
27+
background-image: url(/backgrounds/summer.svg);
28+
}
29+
30+
.autumn {
31+
--primary: #a59571;
32+
--secondary: #b4a582;
33+
background-image: url(/backgrounds/autumn.svg);
34+
}
35+
36+
.winter {
37+
--primary: #757791;
38+
--secondary: #80829b;
39+
background-image: url(/backgrounds/winter.svg);
40+
}
41+
42+
.dark {
43+
&.spring {
44+
--primary: #517a47;
45+
--secondary: #779f68;
46+
background-image: url(/backgrounds/spring.svg);
47+
}
48+
49+
&.summer {
50+
--primary: #346c75;
51+
--secondary: #6699a1;
52+
background-image: url(/backgrounds/summer.svg);
53+
}
54+
55+
&.autumn {
56+
--primary: #422c24;
57+
--secondary: #5c4b41;
58+
background-image: url(/backgrounds/autumn.svg);
59+
}
60+
61+
&.winter {
62+
--primary: #003049;
63+
--secondary: #5c4b41; // FIX: Same color as autumn's?
64+
background-image: url(/backgrounds/winter.svg);
65+
}
66+
}

‎components/copy/CodeHighlight.vue

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,6 @@ const props = defineProps({
1414
type: String,
1515
default: ''
1616
},
17-
buttonColor: {
18-
type: String,
19-
default: 'white'
20-
},
2117
buttonClass: {
2218
type: String,
2319
default: ''
@@ -44,7 +40,6 @@ onMounted(() => {
4440
}}</code>
4541
<CopyIcon
4642
:class="props.buttonClass"
47-
:color="props.buttonColor"
4843
:content-target="props.codeText" />
4944
</pre>
5045
</template>

‎components/copy/CopyIcon.vue

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<script setup>
22
const props = defineProps({
3-
color: {
4-
type: String,
5-
default: 'white'
6-
},
73
contentTarget: {
84
type: String,
95
required: true

‎layouts/default.vue

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,17 @@
1-
<script setup lang="js">
2-
const themeStore = useThemeStore();
3-
onMounted(() => {
4-
document.documentElement.style.setProperty('--primary', themeStore.primary);
5-
document.documentElement.style.setProperty(
6-
'--secondary',
7-
themeStore.secondary
8-
);
9-
});
10-
</script>
11-
121
<template>
13-
<div
14-
:style="{
15-
'--primary': themeStore.primary,
16-
'--secondary': themeStore.secondary,
17-
backgroundImage: `url(/backgrounds/${themeStore.backageImg})`
18-
}">
19-
<div class="min-h-[100vh] min-w-[960px]">
20-
<div class="my-0 flex min-h-[100vh] flex-col p-0">
21-
<BarHeader />
22-
<div class="main-content flex flex-1 justify-center pb-[2.5rem]">
23-
<div class="content-container myShadow flex">
24-
<div
25-
class="sticky top-0 w-[15%] min-w-[12rem] bg-leftbar-bg *:text-nowrap">
26-
<BarLeft class="sticky top-0 min-w-[100%] *:text-nowrap" />
27-
</div>
28-
<slot />
2+
<div class="min-h-[100vh] min-w-[960px]">
3+
<div class="my-0 flex min-h-[100vh] flex-col p-0">
4+
<BarHeader />
5+
<div class="main-content flex flex-1 justify-center pb-[2.5rem]">
6+
<div class="content-container myShadow flex">
7+
<div
8+
class="sticky top-0 w-[15%] min-w-[12rem] bg-leftbar-bg *:text-nowrap">
9+
<BarLeft class="sticky top-0 min-w-[100%] *:text-nowrap" />
2910
</div>
11+
<slot />
3012
</div>
3113
</div>
32-
<BarFooter class="fixed bottom-0 h-[2rem]" />
3314
</div>
15+
<BarFooter class="fixed bottom-0 h-[2rem]" />
3416
</div>
3517
</template>

‎nuxt.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default defineNuxtConfig({
4545
}
4646
},
4747

48-
css: ['~/assets/css/main.css', '~/assets/index.scss'],
48+
css: ['~/assets/css/main.css', '~/assets/index.scss', '~/assets/theme.scss'],
4949

5050
vue: {
5151
compilerOptions: {

‎pages/paste/detail/index.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@ const details = ref(null);
66
const imgSuffixList = ['jpg', 'jpeg', 'png', 'gif'];
77
const failReason = ref('');
88
9-
const themeStore = useThemeStore();
10-
119
const { tm } = useI18n();
1210
const textValue = tm('paste.detail');
1311
useHead({ title: textValue.title1 });
@@ -93,7 +91,6 @@ const returnHref = () => window.location.href;
9391
<CodeHighlight
9492
class="mt-4 justify-between bg-[#ccccccc3]/15"
9593
button-class="mr-3"
96-
:button-color="themeStore.primary"
9794
:code-text="details.content"
9895
:language="details.language" />
9996
</div>

‎stores/store.js

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -4,67 +4,3 @@ export const useHighBrightnessControllerStore = defineStore(
44
state: () => ({ obj: {} })
55
}
66
);
7-
8-
const themeList = {
9-
springDrak: {
10-
primary: '#517a47',
11-
secondary: '#779f68'
12-
},
13-
springNight: {
14-
primary: '#718c71',
15-
secondary: '#7f9e7f',
16-
backageImg: 'spring.svg'
17-
},
18-
summerDrak: {
19-
primary: '#346c75',
20-
secondary: '#6699a1'
21-
},
22-
summerNight: {
23-
primary: '#577c8a',
24-
secondary: '#6a8a96',
25-
backageImg: 'summer.svg'
26-
},
27-
autumnDrak: {
28-
primary: '#422c24',
29-
secondary: '#5c4b41'
30-
},
31-
autumnNight: {
32-
primary: '#a59571',
33-
secondary: '#b4a582',
34-
backageImg: 'autumn.svg'
35-
},
36-
winterDrak: {
37-
primary: '#003049',
38-
secondary: '#5c4b41'
39-
},
40-
winterNight: {
41-
primary: '#757791',
42-
secondary: '#80829b',
43-
backageImg: 'winter.svg'
44-
}
45-
};
46-
47-
export const useThemeStore = defineStore('themeStore', {
48-
state: () => {
49-
const now = new Date();
50-
const month = now.getMonth() + 1;
51-
if (month >= 1 && month <= 3) {
52-
return themeList['springNight'];
53-
} else if (month >= 4 && month <= 6) {
54-
return themeList['summerNight'];
55-
} else if (month >= 7 && month <= 9) {
56-
return themeList['autumnNight'];
57-
} else if (month >= 10 && month <= 12) {
58-
return themeList['winterNight'];
59-
}
60-
},
61-
actions: {
62-
set(solarTerms, time) {
63-
const newColor =
64-
themeList[solarTerms + time.charAt(0).toUpperCase() + time.slice(1)];
65-
this.primary = newColor.primary;
66-
this.secondary = newColor.secondary;
67-
}
68-
},
69-
persist: true
70-
});

0 commit comments

Comments
 (0)