Shoka主题：修改夜间模式切换动画

# 前言

# 实现

# 修改 Js

1. 找到 themes\shoka\source\js\_app\global.js ;

2. 找到 var neko = BODY.createChild 的位置，修改 js 添加 html 块的代码：

   	var neko = BODY.createChild('div', {
   	id: 'neko',
   	innerHTML: '<div class="planet"><div class="sun"></div><div class="moon"></div></div><div class="body"><div class="face"><section class="eyes left"><span class="pupil"></span></section><section class="eyes right"><span class="pupil"></span></section><span class="nose"></span></div></div>'
   	});

   将 innerHTML 中替换为你喜爱的新的 html 部分（将 html 压缩，可用在线工具），以本网站动画为例， innerHTML 改为:

   	var neko = BODY.createChild('div', {
   	id: 'neko',
   	innerHTML: '<div class="newlight"id="sunmooncont"><div class="bgclo"></div><div class="moon-box"><div class="bigmoon"></div></div><div class="sun-box"><div class="bigsun"></div></div><div class="bigsea"></div></div>'
   	});

3. 找到 if(btn.hasClass('i-sun')) 部分（在刚才部分下方十行左右），修改按钮触发动画 js ：

   	if(btn.hasClass('i-sun')) {
   	var c = function() {
   	neko.addClass('dark');
   	changeTheme('dark');
   	store.set('theme', 'dark');
   	hideNeko();
   	}
   	} else {
   	neko.addClass('dark');
   	var c = function() {
   	neko.removeClass('dark');
   	changeTheme();
   	store.set('theme', 'light');
   	hideNeko();
   	}
   	}

   修改为：

   	if(btn.hasClass('i-sun')) {
   	var c = function() {
   	sunmooncont.removeClass('newlight');
   	sunmooncont.addClass('newdark');
   	changeTheme('dark');
   	store.set('theme', 'dark');
   	hideNeko();
   	}
   	} else {
   	sunmooncont.addClass('newdark');
   	var c = function() {
   	sunmooncont.removeClass('newdark');
   	sunmooncont.addClass('newlight');
   	changeTheme();
   	store.set('theme', 'light');
   	hideNeko();
   	}
   	}

   其中，以上是个人动画示例， sunmooncont 是刚才 html 中最外层的 div 盒子。

# 修改 Stylus

1. 找到 themes\shoka\source\css\_common\components\third-party\theme.styl ；

2. 可以直接删除原本的 css 代码，增加个人喜爱的切换模式动画的 css ，以本网站动画为例：

#neko {

@extend $fix-fullscreen;

display: none;

#sunmooncont {

  height: 100vh;

}

.bgclo {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.bigsun {

  margin: 0;

  padding: 0;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  width: 600px;

  height: 600px;

  background-color: orange;

  border-radius: 50%;

  +mobile() {

    top: 60%;

    width: 200px;

    height: 200px;

  }

  +tablet() {

    top: 55%;

    width: 400px;

    height: 400px;

  }

}

.bigmoon {

  margin: 0;

  padding: 0;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(calc(-50% + -160px),calc(-50% + -180px));

  width: 600px;

  height: 600px;

  box-shadow: 160px 180px 0 cyan;

  border-radius: 50%;

  +mobile() {

    top: 60%;

    width: 200px;

    height: 200px;

    transform: translate(calc(-50% + -50px),calc(-50% + -60px));

    box-shadow: 50px 60px 0 cyan;

  }

  +tablet() {

    top: 55%;

    width: 400px;

    height: 400px;

    transform: translate(calc(-50% + -80px),calc(-50% + -90px));

    box-shadow: 80px 90px 0 cyan;

  }

}

.bigsea {

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 35%;

  backdrop-filter: blur(100px);

  -webkit-backdrop-filter: blur(100px);

  z-index: 100;

}

.bigsun,

.bigmoon,

.sun-box,

.moon-box,

.bgclo {

  transition: all 1s ease-in-out;

}

.sun-box,

.moon-box {

  position: relative;

  overflow: hidden;

}

.newlight {

  .sun-box {

    height: 100%;

  }

  .moon-box {

    height: 0;

  }

  .bgclo {

    background-color: #ffeea2;

  }

}

.newdark {

  .sun-box {

    height: 0;

  }

  .moon-box {

    height: 100%;

  }

  .bgclo {

    background-color: #040720;

  }

}

}