html5设置页面主题配色切换特效代码下载
1. 引入CSS
<link rel="stylesheet" href="https://cdn.bootcss.com/mdui/0.4.0/css/mdui.min.css" /><link rel="stylesheet" href="https://cdn.bootcss.com/mdui/0.4.0/css/mdui.min.css" />
2. 引入JS
<script src="js/mdui_0.4.0_js_mdui.min.js"></script><script src="js/mdui_0.4.0_js_mdui.min.js"></script>
3. HTML代码
<!--MDUI主题切换器*★,°*:.☆(￣▽￣)/$:*.°★* 。（我只是嫌没注释浑身难受而已）--><!doctype html><html lang="zh"><head> <!--响应式兼容--> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>MDUI主题切换器</title> <style> /*调色板样式*/ #wheel { position: relative; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center } .is-small-screen .mdl-gen #wheel { min-height: 100vw } #wheel svg { width: 100%; height: 100% } @media (min-width: 840px) { #wheel svg { max-width: 100%; width: 100% } } #wheel .mdl-gen-download { position: absolute; left: 50%; top: 50% } #wheel .mdl-gen-download a { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #wheel g[data-color] { opacity: 1; outline:none; transition: opacity .2s cubic-bezier(.4, 0, 1, 1) } #wheel .selector { opacity: 0; transition: opacity .4s cubic-bezier(.4, 0, 1, 1); fill: #BDBDBD } #wheel .selected .selector { opacity: 1 } #wheel .label { text-anchor: middle; opacity: 0; transition: opacity .4s cubic-bezier(.4, 0, 1, 1); fill: #fff; font-size: 24px } #wheel .selected--1 .label--1, #wheel .selected--2 .label--2 { opacity: 1 } #wheel svg.hide-nonaccents g[data-color="Blue Grey"]:not(.selected), #wheel svg.hide-nonaccents g[data-color="Brown"]:not(.selected), #wheel svg.hide-nonaccents g[data-color="Grey"]:not(.selected) { opacity: .12 } #wheel .selected { opacity: 1 !important } .mdl-gen>.mdl-grid { max-width: 1280px; padding: 0 } .mdl-gen__preview { position: relative; height: 350px } .mdl-gen__preview .mdl-layout__container { height: auto } .mdl-gen__preview .mdl-layout__content { padding: 32px; background-color: #EFEFEF; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start } .mdl-gen__preview .mdl-layout__content a { margin: 0 } .mdl-gen__preview .mdl-layout__content a { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end } .mdl-gen__preview .mdl-layout__content h3 { margin-top: 0 } .mdl-gen__panel--right { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 0 } .mdl-gen__desc strong, .mdl-gen__desc p { display: block; margin-bottom: 32px; color: rgba(0, 0, 0, .54) } .mdl-gen__cdn .demo-code { box-sizing: border-box } .content { margin-left: auto; margin-right: auto; max-width: 1280px; margin-bottom: 80px } /*响应式兼容*/ @media screen and (min-width:1024px) { .pad { max-width: 768px; } #wheel { height: 450px; width: 450px; } } .pad-card { min-height: 300px; padding: 10px; } .pad-subheader { font-weight: 500; } .preview{ background-color: #EFEFEF; height: 450px; } ::selection{ background-color: #b3d4fc; text-shadow:none; } .mdui-typo{ color: rgba(0,0,0,.54); } .fix{ margin-bottom: 0px; } .preview .mdui-typo{ height:100%; } </style></head><body class="mdui-color-grey-200"> <!--占位注释，这里没注释显得不舒服--> <header class="mdui-appbar"> <nav class="mdui-toolbar mdui-color-theme"> <button class="mdui-btn mdui-btn-icon mdui-ripple" drawer-controller><i class="mdui-icon material-icons">menu</i></button> <div class="mdui-typo-title"> 设置 </div> </nav> </header> <span class="mdui-subheader pad pad-subheader mdui-center">主题配色</span> <div class="pad pad-card mdui-card mdui-center"> <div id="wheel" class="mdui-center"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 650 650" preserveAspectRatio="xMidYMid meet" width="650" height="650" class=""> <defs> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="3.2"></feGaussianBlur> <feOffset dx="0" dy="0" result="offsetblur"></feOffset> <feFlood flood-color="rgba(0,0,0,1)"></feFlood> <feComposite in2="offsetblur" operator="in"></feComposite> <feMerge> <feMergeNode></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </defs> <g class="wheel--maing" transform="translate(325,325)"> <g data-color="Deep Orange" id="Deep Orange" transform="rotate(208.42105263157893)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(255, 87, 34);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(230, 74, 25);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-208.42105263157893)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-208.42105263157893)" dy="0.5ex">2</text> </g> </g> <g data-color="Red" id="Red" transform="rotate(227.36842105263156)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(244, 67, 54);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(211, 47, 47);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-227.36842105263156)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-227.36842105263156)" dy="0.5ex">2</text> </g> </g> <g data-color="Deep Purple" id="Deep Purple" transform="rotate(284.2105263157895)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(103, 58, 183);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(81, 45, 168);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-284.2105263157895)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-284.2105263157895)" dy="0.5ex">2</text> </g> </g> <g data-color="Blue" id="Blue" transform="rotate(322.1052631578947)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(33, 150, 243);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(25, 118, 210);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-322.1052631578947)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-322.1052631578947)" dy="0.5ex">2</text> </g> </g> <g data-color="Indigo" id="Indigo" transform="rotate(303.1578947368421)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(63, 81, 181);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(48, 63, 159);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-303.1578947368421)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-303.1578947368421)" dy="0.5ex">2</text> </g> </g> <g data-color="Purple" id="Purple" transform="rotate(265.2631578947368)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(156, 39, 176);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(123, 31, 162);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-265.2631578947368)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-265.2631578947368)" dy="0.5ex">2</text> </g> </g> <g data-color="Brown" id="Brown" transform="rotate(151.57894736842104)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(121, 85, 72);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(93, 64, 55);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-151.57894736842104)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-151.57894736842104)" dy="0.5ex">2</text> </g> </g> <g data-color="Teal" id="Teal" transform="rotate(18.94736842105263)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(0, 150, 136);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(0, 121, 107);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-18.94736842105263)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-18.94736842105263)" dy="0.5ex">2</text> </g> </g> <g data-color="Pink" id="Pink" transform="rotate(246.3157894736842)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(233, 30, 99);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(194, 24, 91);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-246.3157894736842)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-246.3157894736842)" dy="0.5ex">2</text> </g> </g> <g data-color="Light Blue" id="Light Blue" transform="rotate(341.05263157894734)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(3, 169, 244);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(2, 136, 209);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-341.05263157894734)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-341.05263157894734)" dy="0.5ex">2</text> </g> </g> <g data-color="Green" id="Green" transform="rotate(37.89473684210526)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(76, 175, 80);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(56, 142, 60);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-37.89473684210526)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-37.89473684210526)" dy="0.5ex">2</text> </g> </g> <g data-color="Lime" id="Lime" transform="rotate(75.78947368421052)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(205, 220, 57);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(175, 180, 43);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-75.78947368421052)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-75.78947368421052)" dy="0.5ex">2</text> </g> </g> <g data-color="Amber" id="Amber" transform="rotate(113.68421052631578)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(255, 193, 7);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(255, 160, 0);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-113.68421052631578)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-113.68421052631578)" dy="0.5ex">2</text> </g> </g> <g data-color="Cyan" id="Cyan" transform="rotate(0)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(0, 188, 212);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(0, 151, 167);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(0)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(0)" dy="0.5ex">2</text> </g> </g> <g data-color="Grey" id="Grey" transform="rotate(189.4736842105263)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(158, 158, 158);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(97, 97, 97);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-189.4736842105263)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-189.4736842105263)" dy="0.5ex">2</text> </g> </g> <g data-color="Blue Grey" id="Blue Grey" transform="rotate(170.52631578947367)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(96, 125, 139);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(69, 90, 100);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-170.52631578947367)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-170.52631578947367)" dy="0.5ex">2</text> </g> </g> <g data-color="Orange" id="Orange" transform="rotate(132.6315789473684)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(255, 152, 0);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(245, 124, 0);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-132.6315789473684)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-132.6315789473684)" dy="0.5ex">2</text> </g> </g> <g data-color="Yellow" id="Yellow" transform="rotate(94.73684210526315)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(255, 235, 59);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(251, 192, 45);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-94.73684210526315)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-94.73684210526315)" dy="0.5ex">2</text> </g> </g> <g data-color="Light Green" id="Light Green" transform="rotate(56.84210526315789)" tabindex="0" class=""> <g class="polygons" filter=""> <polygon points="32.94244769737761,-94.41819284282845 82.35611924344403,-236.0454821070711 0,-250 0,-140" style="fill: rgb(139, 195, 74);"></polygon> <polygon points="32.94244769737761,-94.41819284282845 46.11942677632865,-132.1854699799598 0,-140 0,-100" style="fill: rgb(104, 159, 56);"></polygon> </g> <path class="selector" d=" M 40.58743365058543 -243.2271552125793 L 24.852895361930592 -273.4550707222589 A 23.866215590706414 23.866215590706414 18.94736842105263 1 1 65.28441937535095 -266.70824265179726 z "></path> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--1" transform="rotate(-56.84210526315789)" dy="0.5ex">1</text> </g> <g transform="translate(47.0814230346791,-282.143500046592)"> <text class="label label--2" transform="rotate(-56.84210526315789)" dy="0.5ex">2</text> </g> </g> </g> </svg> <div class="mdl-gen-download"> <a id="apply" class="mdui-ripple mdui-fab mdui-color-theme-accent" mdui-tooltip="{content:'应用主题'}" data-upgraded=",MaterialButton,MaterialRipple" download="material.min.css"><i class="mdui-icon material-icons">check</i></a> </div> </div> <div class="mdui-m-a-2 preview"> <div class="mdui-appbar"> <div class="mdui-toolbar" data-preview-primary> <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a> <div class="mdui-typo-title">主题预览</div> <div class="mdui-toolbar-spacer"></div> <div class="mdui-textfield mdui-textfield-expandable mdui-float-right"> <button class="mdui-textfield-icon mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></button> <input class="mdui-textfield-input" type="text" placeholder="Search"/> <button class="mdui-textfield-close mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">close</i></button> </div> </div> </div> <div class="mdui-typo mdui-p-a-4"> <h1>你好！</h1> <p> 举头望涵涵，低头思第一。这个主题切换器用的怎么样啊？(按钮仅供预览，没有实际作用) </p> <p> <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-m-a-1" data-preview-accent>好</button> <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-m-a-1" data-preview-accent>尚待改进</button> <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-m-a-1" data-preview-accent>辣鸡</button> </p> <button class="mdui-fab mdui-float-right mdui-ripple fix" data-preview-accent><i class="mdui-icon material-icons">thumb_up</i></button> </div> </div> </div> <script> /*这必须凌驾于JS上*/ var $ = mdui.JQ;//MDUI的选择器，不必引入MDUI了。 var done= true;//颜色是否全部选择 var theme = function(){ var page={ primary:"blue", accent:"pink" }; var preview={ primary:"red", accent:"pink" }; this.set = { page:function(primary=false,accent=false){ if(!primary||!accent) return false; if(typeof primary!="string"||typeof accent!="string") return false; $("body").removeClass("mdui-theme-primary-"+page.primary); $("body").removeClass("mdui-theme-accent-"+page.accent); $("body").addClass("mdui-theme-primary-"+primary); $("body").addClass("mdui-theme-accent-"+accent); page={ primary:primary, accent:accent }; return true; }, preview:function(primary,accent){ if(!primary||!accent) return false; if(typeof primary!="string"||typeof accent!="string") return false; $("[data-preview-primary]").removeClass("mdui-color-"+preview.primary); $("[data-preview-accent]").removeClass("mdui-color-"+preview.accent); $("[data-preview-primary]").addClass("mdui-color-"+primary); $("[data-preview-accent]").addClass("mdui-color-"+accent); preview = { primary:primary, accent:accent }; } }; this.info = { page:function(){return page;}, preview:function(){return preview;} }; $("body").addClass("mdui-theme-primary-"+page.primary);//初始化 $("body").addClass("mdui-theme-accent-"+page.accent); $("[data-preview-primary]").addClass("mdui-color-"+preview.primary); $("[data-preview-accent]").addClass("mdui-color-"+preview.accent); return true; }; theme = new theme(); var setting = { primary:theme.info.preview().primary, accent:theme.info.preview().accent }; var unsupportedAccent = ["Grey","Blue Grey","Brown"]; $("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").addClass("selected selected--1"); $("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","url(#drop-shadow)"); $("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").addClass("selected selected--2"); $("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter","url(#drop-shadow)"); $("g[data-color]").on("click",function(e){ if(done){ $("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").removeClass("selected selected--1"); $("g[data-color=\""+setting.primary.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter",""); $("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").removeClass("selected selected--2"); $("g[data-color=\""+setting.accent.replace(/\-/g," ").replace(/^([a-z])| ([a-z])/g,function($1){return $1.toUpperCase();})+"\"]").children("g[filter]").attr("filter",""); setting.primary=$(this).attr("data-color").toLowerCase().replace(/ /g,"-"); console.log("您选择的主色："+$(this).attr("data-color")); $(this).addClass("selected selected--1"); $(this).children("g[filter]").attr("filter","url(#drop-shadow)"); $("#wheel svg").addClass("hide-nonaccents"); done=!done; }else{ if($(this).attr("data-color").toLowerCase().replace(/ /g,"-")!=setting.primary&&unsupportedAccent.indexOf($(this).attr("data-color"))==-1){ setting.accent=$(this).attr("data-color").toLowerCase().replace(/ /g,"-"); console.log("您选择的强调色："+$(this).attr("data-color")); $(this).addClass("selected selected--2"); $(this).children("g[filter]").attr("filter","url(#drop-shadow)"); console.log("主题色："+JSON.stringify(setting)); theme.set.preview(setting.primary,setting.accent); $("#wheel svg").removeClass("hide-nonaccents"); done=!done; } } }); $("#apply").on("click",function(){ theme.set.page(setting.primary,setting.accent); mdui.snackbar("已应用"); }); </script></body></html>
