From 084c3e1de7aae0c8cb05f6ec27285c5976f4309f Mon Sep 17 00:00:00 2001 From: FYJ-github Date: Wed, 15 Mar 2023 01:14:24 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E7=AC=AC=E4=BA=8C=E6=AC=A1?= =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index f3247da..3aa1943 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + 113 \ No newline at end of file From 3df8a2523569bf99b5d89900d39849d532f14717 Mon Sep 17 00:00:00 2001 From: FYJ-github Date: Wed, 15 Mar 2023 02:34:32 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat=EF=BC=9A=E5=89=8D=E7=AB=AF=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E6=8E=A7=E5=88=B6=E7=9A=84=E5=85=AD=E7=A7=8D=E6=96=B9?= =?UTF-8?q?=E6=A1=88=EF=BC=88=E6=8E=A8=E8=8D=903=E3=80=816=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.html" | 28 +++++++++ .../style.css" | 16 +++++ .../index.html" | 29 +++++++++ .../style.css" | 29 +++++++++ ...\345\215\225\347\224\250\346\263\225.html" | 20 ++++++ .../\345\256\236\347\216\260/01.js" | 40 ++++++++++++ .../02-themehook.html" | 49 +++++++++++++++ .../index.html" | 34 ++++++++++ .../mixin.css" | 59 ++++++++++++++++++ .../scss.css" | 38 +++++++++++ README.md | Bin 16 -> 4552 bytes index.html | 15 ----- 12 files changed, 342 insertions(+), 15 deletions(-) create mode 100644 "01-\346\217\220\345\211\215\345\274\225\345\205\245\346\211\200\346\234\211\344\270\273\351\242\230\346\240\267\345\274\217\357\274\214\345\201\232\347\261\273\345\220\215\345\210\207\346\215\242/index.html" create mode 100644 "01-\346\217\220\345\211\215\345\274\225\345\205\245\346\211\200\346\234\211\344\270\273\351\242\230\346\240\267\345\274\217\357\274\214\345\201\232\347\261\273\345\220\215\345\210\207\346\215\242/style.css" create mode 100644 "02-CSS\345\217\230\351\207\217+\347\261\273\345\220\215\345\210\207\346\215\242/index.html" create mode 100644 "02-CSS\345\217\230\351\207\217+\347\261\273\345\220\215\345\210\207\346\215\242/style.css" create mode 100644 "03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/01-\347\256\200\345\215\225\347\224\250\346\263\225.html" create mode 100644 "03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/\345\256\236\347\216\260/01.js" create mode 100644 "03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/\345\256\236\347\216\260/02-themehook.html" create mode 100644 "04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/index.html" create mode 100644 "04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/mixin.css" create mode 100644 "04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/scss.css" delete mode 100644 index.html diff --git "a/01-\346\217\220\345\211\215\345\274\225\345\205\245\346\211\200\346\234\211\344\270\273\351\242\230\346\240\267\345\274\217\357\274\214\345\201\232\347\261\273\345\220\215\345\210\207\346\215\242/index.html" "b/01-\346\217\220\345\211\215\345\274\225\345\205\245\346\211\200\346\234\211\344\270\273\351\242\230\346\240\267\345\274\217\357\274\214\345\201\232\347\261\273\345\220\215\345\210\207\346\215\242/index.html" new file mode 100644 index 0000000..84b67af --- /dev/null +++ "b/01-\346\217\220\345\211\215\345\274\225\345\205\245\346\211\200\346\234\211\344\270\273\351\242\230\346\240\267\345\274\217\357\274\214\345\201\232\347\261\273\345\220\215\345\210\207\346\215\242/index.html" @@ -0,0 +1,28 @@ + + + + + + + + Document + + + + +
+

hello

+
+

+ 选择样式： + + +

+ + + + \ No newline at end of file diff --git "a/01-\346\217\220\345\211\215\345\274\225\345\205\245\346\211\200\346\234\211\344\270\273\351\242\230\346\240\267\345\274\217\357\274\214\345\201\232\347\261\273\345\220\215\345\210\207\346\215\242/style.css" "b/01-\346\217\220\345\211\215\345\274\225\345\205\245\346\211\200\346\234\211\344\270\273\351\242\230\346\240\267\345\274\217\357\274\214\345\201\232\347\261\273\345\220\215\345\210\207\346\215\242/style.css" new file mode 100644 index 0000000..74163a2 --- /dev/null +++ "b/01-\346\217\220\345\211\215\345\274\225\345\205\245\346\211\200\346\234\211\344\270\273\351\242\230\346\240\267\345\274\217\357\274\214\345\201\232\347\261\273\345\220\215\345\210\207\346\215\242/style.css" @@ -0,0 +1,16 @@ +/* day样式主题 */ +body.day .box { + color: #f90; + background: #fff; +} +/* dark样式主题 */ +body.dark .box { + color: #eee; + background: #333; +} + +.box { + width: 100px; + height: 100px; + border: 1px solid #000; +} diff --git "a/02-CSS\345\217\230\351\207\217+\347\261\273\345\220\215\345\210\207\346\215\242/index.html" "b/02-CSS\345\217\230\351\207\217+\347\261\273\345\220\215\345\210\207\346\215\242/index.html" new file mode 100644 index 0000000..c4ed82e --- /dev/null +++ "b/02-CSS\345\217\230\351\207\217+\347\261\273\345\220\215\345\210\207\346\215\242/index.html" @@ -0,0 +1,29 @@ + + + + + + + + Document + + + + +
+

hello

+
+

+ 选择样式： + + + +

+ + + + \ No newline at end of file diff --git "a/02-CSS\345\217\230\351\207\217+\347\261\273\345\220\215\345\210\207\346\215\242/style.css" "b/02-CSS\345\217\230\351\207\217+\347\261\273\345\220\215\345\210\207\346\215\242/style.css" new file mode 100644 index 0000000..eaf2e40 --- /dev/null +++ "b/02-CSS\345\217\230\351\207\217+\347\261\273\345\220\215\345\210\207\346\215\242/style.css" @@ -0,0 +1,29 @@ +/* 定义根作用域下的变量 */ +:root { + --theme-color: #333; + --theme-background: #eee; +} +/* 更改dark类名下变量的取值 */ +.dark{ + --theme-color: #eee; + --theme-background: #333; +} +/* 更改pink类名下变量的取值 */ +.pink{ + --theme-color: #fff; + --theme-background: pink; +} + +.box { + transition: all .2s; + width: 100px; + height: 100px; + border: 1px solid #000; + /* 使用变量 */ + color: var(--theme-color); + background: var(--theme-background); +} + +html.dark { + color-scheme: dark; +} \ No newline at end of file diff --git "a/03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/01-\347\256\200\345\215\225\347\224\250\346\263\225.html" "b/03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/01-\347\256\200\345\215\225\347\224\250\346\263\225.html" new file mode 100644 index 0000000..d43ecd2 --- /dev/null +++ "b/03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/01-\347\256\200\345\215\225\347\224\250\346\263\225.html" @@ -0,0 +1,20 @@ + + + + + \ No newline at end of file diff --git "a/03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/\345\256\236\347\216\260/01.js" "b/03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/\345\256\236\347\216\260/01.js" new file mode 100644 index 0000000..03fe083 --- /dev/null +++ "b/03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/\345\256\236\347\216\260/01.js" @@ -0,0 +1,40 @@ +// 定义暗黑主题变量 +export default { + fontSize: '16px', + fontColor: '#eee', + background: '#333', +}; +// 定义白天主题变量 +export default { + fontSize: '20px', + fontColor: '#f90', + background: '#eee', +}; + +import { shallowRef } from 'vue'; +// 引入主题 +import theme_day from './theme_day'; +import theme_dark from './theme_dark'; + +// 定义在全局的样式变量 +const theme = shallowRef({}); + +export function useTheme() { + // 尝试从本地读取 + const localTheme = localStorage.getItem('theme'); + theme.value = localTheme ? JSON.parse(localTheme) : theme_day; + + const setDayTheme = () => { + theme.value = theme_day; + }; + + const setDarkTheme = () => { + theme.value = theme_dark; + }; + + return { + theme, + setDayTheme, + setDarkTheme, + }; +} \ No newline at end of file diff --git "a/03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/\345\256\236\347\216\260/02-themehook.html" "b/03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/\345\256\236\347\216\260/02-themehook.html" new file mode 100644 index 0000000..2d73e2b --- /dev/null +++ "b/03-Vue3\346\226\260\347\211\271\346\200\247\357\274\210v-bind\357\274\211/\345\256\236\347\216\260/02-themehook.html" @@ -0,0 +1,49 @@ + + + + + + + + + + + \ No newline at end of file diff --git "a/04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/index.html" "b/04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/index.html" new file mode 100644 index 0000000..91b10d9 --- /dev/null +++ "b/04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/index.html" @@ -0,0 +1,34 @@ + + + + + \ No newline at end of file diff --git "a/04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/mixin.css" "b/04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/mixin.css" new file mode 100644 index 0000000..8c01b2d --- /dev/null +++ "b/04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/mixin.css" @@ -0,0 +1,59 @@ +@import "./variable.scss"; + +@mixin bg_color(){ + background: $background-color-theme; + [data-theme=theme1] & { + background: $background-color-theme1; + } + [data-theme=theme2] & { + background: $background-color-theme2; + } +} +@mixin bg_sub_color(){ + background: $background-color-sub-theme; + [data-theme=theme1] & { + background: $background-color-sub-theme1; + } + [data-theme=theme2] & { + background: $background-color-sub-theme2; + } +} + +@mixin font_color(){ + color: $font-color-theme; + [data-theme=theme1] & { + color: $font-color-theme1; + } + [data-theme=theme2] & { + color: $font-color-theme2; + } +} +@mixin font_active_color(){ + color: $font-active-color-theme; + [data-theme=theme1] & { + color: $font-active-color-theme1; + } + [data-theme=theme2] & { + color: $font-active-color-theme2; + } +} + +@mixin icon_color(){ + color: $icon-color-theme; + [data-theme=theme1] & { + color: $icon-color-theme1; + } + [data-theme=theme2] & { + color: $icon-color-theme2; + } +} + +@mixin border_color(){ + border-color: $border-color-theme; + [data-theme=theme1] & { + border-color: $border-color-theme1; + } + [data-theme=theme2] & { + border-color: $border-color-theme2; + } +} \ No newline at end of file diff --git "a/04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/scss.css" "b/04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/scss.css" new file mode 100644 index 0000000..d68a8f1 --- /dev/null +++ "b/04-SCSS+mixin+\347\261\273\345\220\215\345\210\207\346\215\242/scss.css" @@ -0,0 +1,38 @@ +/* 字体定义规范 */ +$font_samll:12Px; +$font_medium_s:14Px; +$font_medium:16Px; +$font_large:18Px; + +/* 背景颜色规范(主要) */ +$background-color-theme: #d43c33;//背景主题颜色默认(网易红) +$background-color-theme1: #42b983;//背景主题颜色1(QQ绿) +$background-color-theme2: #333;//背景主题颜色2(夜间模式) + +/* 背景颜色规范(次要) */ +$background-color-sub-theme: #f5f5f5;//背景主题颜色默认(网易红) +$background-color-sub-theme1: #f5f5f5;//背景主题颜色1(QQ绿) +$background-color-sub-theme2: #444;//背景主题颜色2(夜间模式) + +/* 字体颜色规范(默认) */ +$font-color-theme : #666;//字体主题颜色默认(网易) +$font-color-theme1 : #666;//字体主题颜色1(QQ) +$font-color-theme2 : #ddd;//字体主题颜色2(夜间模式) + +/* 字体颜色规范(激活) */ +$font-active-color-theme : #d43c33;//字体主题颜色默认(网易红) +$font-active-color-theme1 : #42b983;//字体主题颜色1(QQ绿) +$font-active-color-theme2 : #ffcc33;//字体主题颜色2(夜间模式) + +/* 边框颜色 */ +$border-color-theme : #d43c33;//边框主题颜色默认(网易) +$border-color-theme1 : #42b983;//边框主题颜色1(QQ) +$border-color-theme2 : #ffcc33;//边框主题颜色2(夜间模式) + +/* 字体图标颜色 */ +$icon-color-theme : #ffffff;//边框主题颜色默认(网易) +$icon-color-theme1 : #ffffff;//边框主题颜色1(QQ) +$icon-color-theme2 : #ffcc2f;//边框主题颜色2(夜间模式) +$icon-theme : #d43c33;//边框主题颜色默认(网易) +$icon-theme1 : #42b983;//边框主题颜色1(QQ) +$icon-theme2 : #ffcc2f;//边框主题颜色2(夜间模式) diff --git a/README.md b/README.md index d22fea3f7401caadf4a7c8ff1bb5e00e1c8657ac..ffcac02cb5d2181cfcce277891a6156b8b3b25b1 100644 GIT binary patch literal 4552 zcmc&&ZDsrCr(aDzbv#GV@LAAmlstw-CFEqBO}d7$NHR3=SG#KS&rnB)Y(=v zIl4u4EWh-o*|?5uXlmDOv+hG_KN`wDh(ZQqP5Pn6HZ&!HK?1|2m@fHZyd_(9`~U8A zKG{yzQcTBj`1Cx_|NZxWd2Ie?9}`)E_0r>EJFIsf!&*fxz8ljN=d7-@1+I2CMg7Tz#Ph++%C>NS_@)vHi|iOv=@HpsK0Wmn&JX>8$u@-=LyqG2s%Gd7 z9rp%7A<_dLEdve@&_fTLbnP1szmnZ>#qPy>flZ z;@^IQWd1v{G6ec^7ui$H zYdSf6O`V@S$TmiMYkUTz+f~7hc4Mfb?GH+Mk?EBGIVQ3FY_T{KfgZi;ZB;Nm{KbeA z+UyPBc~2bZ25u_apX7Y@aF1Yq#MzX)=T;||qZHaG4N=Cvp+ldhs8?PddOrx{AX@j2 z^>gev?VM98k%o@#=DnDf_wYZA)mv2umVR9e<`l=9UK`_;!eD5)ZUvweYz8Qt=-V~3@na47XP?aXy2ov zQ`Tm;Uts_@3bjxMo~Gvvt?uBL#xeujDgQEOX9!!Ds82IK6PcfU zueii_wb~uC-W1H3)$0;n{^W4DvrDL=S7g(XiWcK~`+?MzNh#miRnd0G+5&0i`pbrn zoUQFAwHfdu$^dmu=Yyn64hk zYTX%|sxFGmzzk9=1(dd5;ma0&_ayp}>q&S(Fvk_|#1-m$c5nPpZ3_S|hK{a;{KWfh z)Xt5XZ*2v2J?iGmeDO*dp4rvvmFuF;w1BRT)w_z8g6;ROoZqxEKE0_=Ap=C3XEj1> zz`|~pzH{`eVEG<80Cy+SuawX8=Yuzuxq??-Nxl=bdxeLlx67lL*Mz~Dh+tkXAK+G< zn~?J7c~f4>KND|GXA*Bs=Z51`1F7YqUyNKDn~6NqI#<9NPzcfLxs`jY=K6<<9?V&eAHu+eVe&@+vpEWBZ z>KV&UAQ=Ds(#p}O&&uWguq_oUE|L*bpjI$%YHaES^~+of zpYKB5hi1U`PL9b4cCV*8LUaAilP%Ucf713ABJu&vuWqO4V0henM{SMiv$O|FeDs{L zZUL~?N9RwIt*0rLEwsCj>J*;C4?G_yk0j{slCn^cC%<%7DK+A!RVn)|dRrrS2rr@m zYnOic8>R1DMZ4Nfb00+?lZ8EnZnpa2SEan6`;*R&Y9S7>dY0Y13J2$R2PuP!~1jU1V zA(74KK3USpp3l08qaE@7>fiN|v#0Y#^#^&}5LY!s1=)VJ8^UjAef zG*;VL z@J((E4o(mg_s)-1=(815{&u>z-ibK<2Q`=~u{8nNy#sTRjXKmKDdhCWyP-oV#C84M F;=enAZ#w`0 literal 16 VcmezWPnki1A(^2V2zeQ}7yvB11EBx_ diff --git a/index.html b/index.html deleted file mode 100644 index 3aa1943..0000000 --- a/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - Document - - - - 113 - - - \ No newline at end of file