Auto theme color changer script for Plus Ui Blogger theme.

 "This article is directly taken from theamanstark's auto theme changer repository".

Auto theme color changer script for Plus Ui Blogger theme.

Auto Theme Changer will change the theme on site load, opening posts, pages, searches, labels, categories, and reloading the site.

The Auto Theme Changer is turned on by default for every user; this behavior cannot be configured right now but will be added in the later version of autoThemeChanger.

Blogger website dashboard -> Click on theme section-> Click on arrow icon -> Click on backup-> Click on download -> Save the downloaded file in a safe place for future use.

View Demo

Step 1: Go to Blogger Dashboard.

Step 2: Click theme button , And Click EDIT HTML.

Step 3: Now copy CSS code and paste above the </head> in your theme.

<style>

.head1,.para1,.para2{margin-left:6px}.head1{font-size:14px;font-family:"Google Sans Text";color:#343435;margin-bottom:-7px;font-weight:unset}.para1{margin-bottom:-11px}.brr{content:"";display:block;border-bottom:1px solid var(--contentL);margin:12px 5px}.cusP{margin-bottom:-20px}@media screen and (min-width:750px){.switch{left:205px;transform:rotate(90deg);top:-48px}}@media screen and (max-width:361px) and (min-width:322px){.switch{left:220px!important;top:-45px!important}}@media screen and (max-width:321px){.switch{left:202px!important;top:-46px!important;transform:rotate(90deg)!important}}@media screen and (max-width:376px) and (min-width:362px){.switch{left:240px!important;top:-45px!important}}@media screen and (max-width:415px) and (min-width:395px){.switch{left:280px!important;top:-45px!important}}@media screen and (max-width:394px) and (min-width:377px){.switch{left:255px!important;top:-45px!important}}@media screen and (max-width:749px) and (min-width:416px){.switch{left:286px;top:-45px}}.switch{position:relative;display:inline-block;width:55px;height:30px;margin-bottom:-2000px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:22px;width:22px;left:3.5px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--linkC)}.drK input:checked+.slider{background-color:var(--darkU)}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}

</style>

Step 4: Now, put the following javascript above: </body>in your Theme.

<script src='https://theamanstark.com/cdn/blogger/plus-ui/autoThemeChanger/latest/autoTheme.min.js'></script>

Step 5: Finally, add the HTML <div class='cusP'> in the check the image below.

<div class="brr"/><h6 class="head1">Auto Theme Changer</h6><p class="para1">When turned on automatically changes</p><p class="para2">the theme color on reload.</p><label class="switch"><input id="theme-toggle" type="checkbox"/><span class="slider round"/></label><div class="brr" style="margin-top:-6px;"/><h6 class="head1">Auto Themer</h6><p class="para1">When turned on automatically changes</p><p class="para2">the theme color every 5 sec.</p><label class="switch"><input id="auto-theme" type="checkbox"/><span class="slider round"/></label>

Credit Theamanstark