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 d22fea3..ffcac02 100644 Binary files a/README.md and b/README.md differ diff --git a/index.html b/index.html deleted file mode 100644 index f3247da..0000000 --- a/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - Document - - - - - - - \ No newline at end of file