feat: init

src/style/_blue_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #2e1f78;
+$important-color: #02e5f6;
+$font-color: #fbfbfb;
+$light-color: #fd5913;
+$normal-color: #15115d;
+$dark-card-color: #fbfbfb;
+
+$blue_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/_dark_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #1e1f25;
+$important-color: #ff864d;
+$font-color: #fbfbfb;
+$light-color: #00e6f6;
+$normal-color: #183561;
+$dark-card-color: #fbfbfb;
+
+$dark_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/_default.scss

@@ -0,0 +1,22 @@
+$theme-color: #fbfbfb;
+$important-color: #6a47bb;
+$font-color: #030303;
+$light-color: #409eff;
+$normal-color: #fbfbfb;
+$dark-card-color: #fbfbfb;
+
+$default: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/_purple_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #0a142e;
+$important-color: #8c5ff6;
+$font-color: #fbfbfb;
+$light-color: #c678fd;
+$normal-color: #0a142e;
+$dark-card-color: #fbfbfb;
+
+$purple_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/changeTheme.ts

@@ -0,0 +1 @@
+import './global.scss';

src/style/global.module.scss

@@ -0,0 +1,14 @@
+:root {
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+body {
+    // background: $theme-bg-color;
+}

src/style/global.scss

@@ -0,0 +1,11 @@
+// global.scss
+@import "./theme/index.scss";
+// variables.scss
+$primary-color: #fe4e5e;
+$background-color: #fefefe;
+$padding: 124px;
+// :export {
+//     primaryColor: $primary-color;
+//     backgroundColor: $background-color;
+//     padding: $padding;
+// }

src/style/index.scss

@@ -0,0 +1,50 @@
+@import "./default.scss"; //默认主题颜色
+@import "./dark_theme.scss"; // 红色主题颜色
+@import "./blue_theme.scss"; // 灰色主题颜色
+@import "./purple_theme.scss"; // 灰色主题颜色
+//生成对应元素的主题样式代码
+//主题参数
+$themes: (
+    default: $default,
+    blue_theme: $blue_theme,
+    dark_theme: $dark_theme,
+    purple_theme: $purple_theme,
+);
+// 生成body的主题样式
+@mixin themeify {
+    @each $themes-key, $themes-map in $themes {
+        $themes-map: $themes-map !global;
+        &[data-theme="#{$themes-key}"] {
+            @content;
+        }
+    }
+}
+// 生成子元素样式
+@mixin themeChildify {
+    @each $themes-key, $themes-map in $themes {
+        $themes-map: $themes-map !global;
+        [data-theme="#{$themes-key}"] & {
+            @content;
+        }
+    }
+}
+// 获取主题对应的theme-color
+@function getThemeColor($key) {
+    $currentTheme: map-get($themes, $key);
+    @return map-get($currentTheme, "theme-bg-color");
+}
+@function themed($key) {
+    @if map-get($themes-map, $key) {
+        @return map-get($themes-map, $key);
+    } @else {
+        @return $key;
+    }
+}
+// 随机数颜色
+@function themedRandom($key) {
+    @if map-get($themes-map, $key) {
+        @return map-get($themes-map, $key);
+    } @else {
+        @return $key;
+    }
+} ;

src/style/theme/_blue_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #2e1f78;
+$important-color: #02e5f6;
+$font-color: #fbfbfb;
+$light-color: #fd5913;
+$normal-color: #15115d;
+$dark-card-color: #fbfbfb;
+
+$blue_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/theme/_dark_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #1e1f25;
+$important-color: #ff864d;
+$font-color: #fbfbfb;
+$light-color: #00e6f6;
+$normal-color: #183561;
+$dark-card-color: #fbfbfb;
+
+$dark_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/theme/_default.scss

@@ -0,0 +1,22 @@
+$theme-color: #fbfbfb;
+$important-color: #6a47bb;
+$font-color: #030303;
+$light-color: #409eff;
+$normal-color: #fbfbfb;
+$dark-card-color: #fbfbfb;
+
+$default: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/theme/_purple_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #0a142e;
+$important-color: #8c5ff6;
+$font-color: #fbfbfb;
+$light-color: #c678fd;
+$normal-color: #0a142e;
+$dark-card-color: #fbfbfb;
+
+$purple_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/theme/index.scss

@@ -0,0 +1,50 @@
+@import "./default.scss"; //默认主题颜色
+@import "./dark_theme.scss"; // 红色主题颜色
+@import "./blue_theme.scss"; // 灰色主题颜色
+@import "./purple_theme.scss"; // 灰色主题颜色
+//生成对应元素的主题样式代码
+//主题参数
+$themes: (
+    default: $default,
+    blue_theme: $blue_theme,
+    dark_theme: $dark_theme,
+    purple_theme: $purple_theme,
+);
+// 生成body的主题样式
+@mixin themeify {
+    @each $themes-key, $themes-map in $themes {
+        $themes-map: $themes-map !global;
+        &[data-theme="#{$themes-key}"] {
+            @content;
+        }
+    }
+}
+// 生成子元素样式
+@mixin themeChildify {
+    @each $themes-key, $themes-map in $themes {
+        $themes-map: $themes-map !global;
+        [data-theme="#{$themes-key}"] & {
+            @content;
+        }
+    }
+}
+// 获取主题对应的theme-color
+@function getThemeColor($key) {
+    $currentTheme: map-get($themes, $key);
+    @return map-get($currentTheme, "theme-bg-color");
+}
+@function themed($key) {
+    @if map-get($themes-map, $key) {
+        @return map-get($themes-map, $key);
+    } @else {
+        @return $key;
+    }
+}
+// 随机数颜色
+@function themedRandom($key) {
+    @if map-get($themes-map, $key) {
+        @return map-get($themes-map, $key);
+    } @else {
+        @return $key;
+    }
+} ;