style动态换肤

冫水阔落

已于 2022-03-28 14:33:17 修改

阅读量559

点赞数

文章标签： css

于 2022-03-28 12:47:06 首次发布

本文链接：https://blog.csdn.net/HAINIHAOya/article/details/123792102

版权

style动态换肤

在这里插入图片描述

reset.scss清除标签的默认样式

html,body {
  height: 100%;
  overflow: hidden;
  font-weight: 400;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
    sans-serif;
}

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite，code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fiedset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  list-style: none;
  box-sizing: border-box;
}
body {
  line-height: 1.2;
}
:focus {
  outline: 1;
}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,
summary {
  display: block;
}
nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
  content: "";
  content: none;
}
a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}

img[src=""],
img:not([src]) {
  opacity: 0;
}

variables.scss scss变量文件

$theme-color: #d33a31;
$black: #000;
$white: #fff;
$gold: #e7aa5a;
$blue: #517eaf;

$font-size: 14px;
$font-size-medium-sm: 13px;
$font-size-lg: 16px;
$font-size-sm: 12px;
$font-size-xs: 10px;
$font-size-medium: 15px;
$font-size-title: 18px;
$font-size-title-lg: 24px;

$font-weight-bold: 700;

$font-color-transparent: rgba(255, 255, 255, 0.5);

$border: 1px solid #3f3f3f;

$page-padding: 16px 32px;
// layout
$layout-content-min-width: 700px;
// content
$center-content-max-width: 1000px;
// header
$header-height: 50px;

// mini-player
$mini-player-height: 60px;
$mini-player-z-index: 1002;

//playlist
$playlist-z-index: 1001;

//search
$search-panel-z-index: 1001;

//song-detail
$song-detail-z-index: 1000;

mixin.scss 混和样式

@mixin text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-ellipsis-multi($line) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

@mixin flex-center($direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
}

@mixin box-shadow {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}

@mixin img-wrap($width, $height: $width) {
  width: $width;
  height: $height;
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
  }
}

@mixin abs-stretch {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
}

@mixin abs-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@mixin round($d) {
  width: $d;
  height: $d;
  border-radius: 50%;
}

@mixin list($item-width) {
  .list-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;

    .list-item {
      width: $item-width;
      margin-bottom: 36px;
      padding: 0 12px;
    }
  }
}

variables.js ,variables-white.js,variables-red.js 用于主题变化

export default {
  ['--body-bgcolor']: '#252525',
  ['--light-bgcolor']: '#2e2e2e',

  ['--font-color']: '#b1b1b1',
  ['--font-color-shallow']: '#6f6f6f',
  ['--font-color-white']: '#dcdde4',
  ['--font-color-grey']: '#5C5C5C',
  ['--font-color-grey2']: '#808080',
  ['--font-color-grey-shallow']: '#727272',
  ['--border']: '#3F3F3F',
  ['--scrollbar-color']: '#3a3a3a',
  ['--round-hover-bgcolor']: '#373737',
  ['--stripe-bg']: '#323232',
  ['--shallow-theme-bgcolor']: '#2D2625',
  ['--shallow-theme-bgcolor-hover']: '#352726',

  //header
  ['--header-bgcolor']: '#252525',
  ['--header-font-color']: '#b1b1b1',
  ['--header-input-color']: '#b1b1b1',
  ['--header-input-bgcolor']: '#4B4B4B',
  ['--header-input-placeholder-color']: '#727272',

  //menu
  ['--menu-bgcolor']: '#202020',
  ['--menu-item-hover-bg']: '#1d1d1d',
  ['--menu-item-active-bg']: '#1b1b1b',

  //player
  ['--player-bgcolor']: '#252525',

  //playlist
  ['--playlist-bgcolor']: '#363636',
  ['--playlist-hover-bgcolor']: '#2e2e2e',

  //search
  ['--search-bgcolor']: '#363636',

  //progress
  ['--progress-bgcolor']: '#232323',

  //input
  ['--input-color']: '#b1b1b1',
  ['--input-bgcolor']: '#4B4B4B',

  //button
  ['--button-border-color']: '#454545',
  ['--button-hover-bgcolor']: '#3E3E3E',
  //tab
  ['--tab-item-color']: '#797979',
  ['--tab-item-hover-color']: '#B4B4B4',
  ['--tab-item-active-color']: '#fff',
  //modal
  ['--modal-bg-color']: '#202020',
  // prompt
  ['--prompt-bg-color']: '#363636',
  //song-detail
  ['--song-shallow-grey-bg']: '#2A2A2A',
}

import variables from "@/style/themes/variables"
 Object.keys(variables).forEach(key => {
        const value = theme[key]
        document.documentElement.style.setProperty(key, value)//方法接口为一个声明了CSS样式的对象设置一个新的值 
      })

设置后的结果在这里插入图片描述

app.scss 应用级别(app)的一些样式

需要随主题改变的样式用var（–）设置值

/**
 ** 应用级别的一些样式
 **/
body {
  color: var(--font-color);
}

::selection {
  background-color: $theme-color;
  color: white;
}

// 滚动条
::-webkit-scrollbar-track {
  background-color: var(--menu-bgcolor);
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-color);
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
  transform: none;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(100%);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
  opacity: 1;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

// 转化为rem
.iconfont {
  font-size: 16px;
}

a {
  color: $theme-color;

  &:hover,
  &:focus,
  &:visited {
    color: $theme-color;
  }
}

element-overwrite.scss 用于elementui重写样式

把需要随主题改变的的属性用var（–）代替

// table
.el-table th,
.el-table td {
  padding: 4px !important;
  font-size: $font-size-sm !important;
}
.el-table::before {
  height: 0 !important;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: var(--playlist-hover-bgcolor) !important;
}
// 空数据
.el-table__empty-block {
  background: var(--body-bgcolor);
  color: var(--font-color);
}
.el-table__header-wrapper th {
  color: var(--font-color);
}
.el-table {
  background-color: var(--body-bgcolor) !important;
}

// 表格单元格的通用样式
@mixin el-td-style($color) {
  td,
  th,
  tr {
    background-color: $color !important;
    transition: background-color 0s !important;
    border-bottom: none !important;

    .cell {
      white-space: nowrap !important;
    }
  }
}
.el-table,
.el-table {
  @include el-td-style(var(--body-bgcolor));

  tr.el-table__row--striped {
    @include el-td-style(var(--stripe-bg));
  }
}
// 允许外部在某个类下面覆写table样式
@mixin el-table-theme($color, $stripe-color: var(--stripe-bg)) {
  /deep/.el-table {
    @include el-td-style($color);

    tr.el-table__row--striped {
      @include el-td-style(#{$stripe-color});
    }
  }
}
// carosel
.el-carousel--horizontal {
  overflow: hidden;
}

// popover
@each $direction in 'bottom' 'top' 'left' 'right' {
  .el-popper[x-placement^='#{$direction}'] .popper__arrow,
  .el-popper[x-placement^='#{$direction}'] .popper__arrow::after {
    border-#{$direction}-color: var(--prompt-bg-color) !important;
  }
}
.el-popover {
  background: var(--prompt-bg-color) !important;
  border: none !important;
  text-align: left;
  @include box-shadow;
}

// input
$input-height: 24px;
@mixin el-input-style($color, $bg-color, $placeholder-color) {
  .el-input__inner {
    height: $input-height !important;
    line-height: $input-height !important;
    background: #{$bg-color} !important;
    border: none !important;
    color: #{$color} !important;

    &:hover {
      border: none !important;
    }
  }
  .el-input__prefix {
    i {
      line-height: $input-height + 1px !important;
      color: #{$color} !important;
      transition: none !important;
    }
  }

  input::-webkit-input-placeholder {
    color: #{$placeholder-color} !important;
  }
}

// 外部覆写input-theme样式
@mixin el-input-theme($color, $bg-color, $placeholder-color: $color) {
  /deep/.el-input {
    @include el-input-style($color, $bg-color, $placeholder-color);
  }
}

.el-input {
  @include el-input-style(
    var(--input-color),
    var(--input-bgcolor),
    var(--font-color-grey-shallow)
  );
}

// pagination
.el-pagination,
.el-pagination button,
.el-pager li {
  background: inherit !important;
  color: var(--font-color) !important;

  .active {
    color: $theme-color !important;
  }
}

// dialog
.el-dialog {
  background: var(--modal-bg-color) !important;
  @include box-shadow;

  .el-dialog__body {
    color: var(--font-color) !important;
  }

  // 右上角图标
  .el-dialog__headerbtn:focus .el-dialog__close,
  .el-dialog__headerbtn:hover .el-dialog__close {
    color: $theme-color;
  }
}

// button
.el-button--primary {
  background: $theme-color !important;
  border-color: $theme-color !important;
}

// loading
.el-loading-spinner {
  circle {
    stroke: $theme-color !important;
  }
  .el-loading-text {
    color: $theme-color !important;
  }
  .el-icon-loading {
    color: $theme-color !important;
  }
}

index.scss文件引入

@import “./element-overwrite.scss”;
@import “./reset.scss”;
@import “./app.scss”;

main.js入口文件引入index.scss

main.js
import '@/style/index.scss'

在vue.config.js中全局引入变量

大量的vue单文件组件会用到这些变量，每个组件都引人一次又太麻烦。全局引入是个不错的方法，于是，在main.js 中引入variable.styl文件，但是你会发现，并不起作用。

vue.config.js

  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "~@/style/variables.scss";
          @import "~@/style/mixin.scss";
        `,
      },
    },
  },

vue.config.js less 引入全局变量
module.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#254184', // 全局主色
        }
      }
    }
  }
}

这样能在<style lang="less">中使用该变量：
a {
    color: @primary-color;
}

冫水阔落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
style动态换肤

style动态换肤reset.scss清除标签的默认样式html,body { height: 100%; overflow: hidden; font-weight: 400; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;}html,body,div,span,object
复制链接

扫一扫