다크 모드 토글 버튼

dev-dain · Apr 22, 2020 · adb15ac · adb15ac
1 parent 5fc95da
commit adb15ac
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 105 deletions.
diff --git a/css/darkmode.css b/css/darkmode.css
@@ -0,0 +1,103 @@
+/* dark mode */
+    * {
+        transition: color 0.3s;
+        transition: background-color 0.5s;
+    }
+    ::selection {
+        color: rgb(87, 58, 189);
+        background: #ddd; 
+    }
+    body {
+        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a4e0+0,46137a+100 */
+        background: #00a4e0; /* Old browsers */
+        background: -moz-linear-gradient(left,  #00a4e0 0%, #46137a 100%); /* FF3.6-15 */
+        background: -webkit-linear-gradient(left,  #00a4e0 0%,#46137a 100%); /* Chrome10-25,Safari5.1-6 */
+        background: linear-gradient(to right,  #00a4e0 0%,#46137a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4e0', endColorstr='#46137a',GradientType=1 ); /* IE6-9 */
+    }
+    #header {
+        background: #111;
+        box-shadow: #000 0 0 10px 5px;
+    }
+    .head {
+        background-image: url('../img/day.png');
+    }
+    #welcome, #result {
+        background: #111;
+        box-shadow: #000 0 0 10px 5px;
+        color: rgb(252, 252, 252);
+    }
+    .logo {
+        opacity: 1;
+    }
+    .logo:hover {
+        opacity: 0.8;
+    }
+    .time-logo, .foot, .pin {
+        filter: invert(100%);
+    }
+    #title-box + div > input {
+        color: #fff;
+        background-color: #111;
+        border: 1.5px solid #fff;
+    }
+    .warning {
+        color: rgb(231, 20, 20, 1.0);
+    }
+    .highlight {
+        color: rgb(0, 205, 245);
+        font-weight: bolder;
+    }
+    #footer {
+        background: #111;
+        box-shadow: #000 0 0 15px 2px;
+        color: rgb(252, 252, 252);
+    }
+    .box {
+        background: #111;
+        box-shadow: none;
+        border: 3px solid #000;
+        color: rgb(252, 252, 252);
+    }
+    .a:hover, .a:focus {
+        border: 3px solid #ddd;
+        background: #fff;
+        color: #000;
+    }
+    .status-bar {
+        border: 3px solid #111;
+        background: #333;
+    }
+    .status {
+        background-color: rgba(191, 168, 255, 1.0);
+    }
+    .wait {
+        color: rgb(252, 252, 252);
+    }
+    .art {
+        box-shadow: #333 0px 0px 10px 5px;
+    }
+    hr {
+        border: 1.5px dashed #ddd;
+    }
+    #share-box {
+        background: #666;
+    }
+    .btn {
+        background: rgba(167, 105, 218, 1.0);
+    }
+    .btn:hover {
+        background: rgba(167, 105, 218, 0.7);
+    }
+    .pro_pic {
+        opacity: 1.0;
+    }
+    .pro_pic:hover {
+        opacity: 0.7;
+    }
+    .caution > p > a {
+        color: rgba(94, 134, 255, 1.0);
+    }
+    .caution > p > a:hover {
+        color: rgba(94, 134, 255, 0.7);
+    }
diff --git a/css/main.css b/css/main.css
@@ -7,6 +7,8 @@
 @import url("https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css");
 * {
   font-family: 'Spoqa Han Sans', 'Sans-serif';
+  transition: color 0.3s;
+  transition: background-color 0.3s;
 }
 
 /* animation */
@@ -123,7 +125,7 @@ body {
     opacity: 1;
 }
 .head {
-    background-image: url("../img/logo.png");
+    background-image: url('../img/night.png');
     position: fixed;
     left: 50%;
     transform: translateX(-50%);
@@ -192,8 +194,8 @@ body {
 }
 #title-box + div {
     box-sizing: border-box;
-    width: 60%;
-    margin: 20px 20% 10px 20%;
+    width: 50%;
+    margin: 20px 25% 10px 25%;
 }
 #title-box + div > input {
     width: 100%;
@@ -215,6 +217,7 @@ body {
     margin: 10px 10%;
 }
 .warning {
+    font-weight: bold;
     color: rgb(231, 20, 20, 0.8);
 }
 .start-wrap {
@@ -428,7 +431,7 @@ body {
             going-down 0.6s ease-out 1.8s forwards;
 }
 .pin {
-    background-image: url('../img/down-pin.png');
+    background-image: url('../img/pin.png');
     background-size: cover;
     width: 30px; 
     height: 30px;
@@ -622,6 +625,10 @@ hr {
         letter-spacing: 14px;
         letter-spacing: 1rem;
     }
+    #share-box {
+        width: 60%;
+        margin: 25px 20% 30px 20%;
+    }
 }
 
 @media all and (min-width: 768px) {
@@ -981,98 +988,4 @@ hr {
         line-height: 28px;
         line-height: 2rem;
     }
-}
-
-/* dark mode */
-@media (prefers-color-scheme: dark) {
-    ::selection {
-        color: rgb(87, 58, 189);
-        background: #ddd; 
-    }
-    body {
-        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a4e0+0,46137a+100 */
-        background: #00a4e0; /* Old browsers */
-        background: -moz-linear-gradient(left,  #00a4e0 0%, #46137a 100%); /* FF3.6-15 */
-        background: -webkit-linear-gradient(left,  #00a4e0 0%,#46137a 100%); /* Chrome10-25,Safari5.1-6 */
-        background: linear-gradient(to right,  #00a4e0 0%,#46137a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4e0', endColorstr='#46137a',GradientType=1 ); /* IE6-9 */
-    }
-    #header {
-        background: #111;
-        box-shadow: #000 0 0 10px 5px;
-    }
-    #welcome, #result {
-        background: #111;
-        box-shadow: #000 0 0 10px 5px;
-        color: rgb(252, 252, 252);
-    }
-    .logo {
-        opacity: 1;
-    }
-    .logo:hover {
-        opacity: 0.8;
-    }
-    .time-logo, .foot, .pin {
-        filter: invert(100%);
-    }
-    .warning {
-        color: rgb(231, 20, 20, 1.0);
-    }
-    .highlight {
-        color: rgb(0, 205, 245);
-        font-weight: bolder;
-    }
-    #footer {
-        background: #111;
-        box-shadow: #000 0 0 15px 2px;
-        color: rgb(252, 252, 252);
-    }
-    .box {
-        background: #111;
-        box-shadow: none;
-        border: 3px solid #000;
-        color: rgb(252, 252, 252);
-    }
-    .a:hover, .a:focus {
-        border: 3px solid #eee;
-        background: #eee;
-        color: #000;
-    }
-    .status-bar {
-        border: 3px solid #111;
-        background: #333;
-    }
-    .status {
-        background-color: rgba(191, 168, 255, 1.0);
-    }
-    .wait {
-        color: rgb(252, 252, 252);
-    }
-    .art {
-        box-shadow: #333 0px 0px 10px 5px;
-    }
-    hr {
-        border: 1.5px dashed #ddd;
-    }
-    #share-box {
-        background: #666;
-    }
-    .btn {
-        background: rgba(167, 105, 218, 1.0);
-    }
-    .btn:hover {
-        background: rgba(167, 105, 218, 0.7);
-    }
-    .pro_pic {
-        opacity: 1.0;
-    }
-    .pro_pic:hover {
-        opacity: 0.7;
-    }
-    .caution > p > a {
-        color: rgba(94, 134, 255, 1.0);
-    }
-    .caution > p > a:hover {
-        color: rgba(94, 134, 255, 0.7);
-    }
 }
diff --git a/img/day.png b/img/day.png
diff --git a/img/logo.png b/img/logo.png
diff --git a/img/night.png b/img/night.png
diff --git a/img/pin.png b/img/pin.png
diff --git a/index.html b/index.html
@@ -28,9 +28,7 @@
     <body>
         <div id="wrap">
             <header id="header">
-                <a href="" title="로고" alt="로고">
-                    <span class="logo head">로고</span>
-                </a>
+                <button class="logo head" onclick=javascript:switchMode()></button>
             </header>
             <section id="welcome" class="container">
                 <div id="title-box">
@@ -161,11 +159,13 @@ <h3 class="sec-tit">
         </div>
     </body>
     <!--[if lt IE 11]
+        <script src="js/darkmode_es5.js"></script>
         <script src="js/data_es5.js"></script>
         <script src="js/main_es5.js"></script>
         <script src="js/share_es5.js"></script>
     <![endif]-->
     <!--[If gte IE 11]><!-->
+        <script src="js/darkmode.js"></script>
         <script src="js/data.js"></script>
         <script src="js/main.js"></script>
         <script src="js/share.js"></script>

diff --git a/js/darkmode.js b/js/darkmode.js
@@ -0,0 +1,33 @@
+let flag = 0;
+const head = document.getElementsByTagName('head')[0];
+const dark_css = document.createElement('link');
+dark_css.rel = 'stylesheet';
+dark_css.type = 'text/css';
+dark_css.href = 'css/darkmode.css';
+
+function goDark() {
+    flag = 1;
+    head.appendChild(dark_css);
+}
+
+function goLight() {
+    flag = 0;
+    if (head.lastChild === dark_css)
+        head.removeChild(dark_css);
+}
+
+function isDarkMode() {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        goDark();
+    else 
+        goLight();
+}
+
+function switchMode() {
+    if (flag)
+        goLight();
+    else
+        goDark();
+}
+
+isDarkMode();
diff --git a/js/darkmode_es5.js b/js/darkmode_es5.js
@@ -0,0 +1,28 @@
+"use strict";
+
+var flag = 0;
+var head = document.getElementsByTagName('head')[0];
+var dark_css = document.createElement('link');
+dark_css.rel = 'stylesheet';
+dark_css.type = 'text/css';
+dark_css.href = 'css/darkmode.css';
+
+function goDark() {
+  flag = 1;
+  head.appendChild(dark_css);
+}
+
+function goLight() {
+  flag = 0;
+  if (head.lastChild === dark_css) head.removeChild(dark_css);
+}
+
+function isDarkMode() {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) goDark();else goLight();
+}
+
+function switchMode() {
+  if (flag) goLight();else goDark();
+}
+
+isDarkMode();
diff --git a/js/share.js b/js/share.js
@@ -9,9 +9,17 @@ function fb() {
     return false;
 }
 function tw() {
-    const name = document.querySelector('.result');
+    let name = document.querySelector('.result').innerHTML;
+    switch (name) {
+        case '표범': 
+        case '유니콘':
+            name += '이에요! ';
+            break;
+        default:
+            name += '예요! ';
+    }
     window.open('https://twitter.com/intent/tweet?text='
-        + title + '%0A' + '저는 '+ name.innerHTML + ' 이에요! ' + hash + '%0A' + url, 
+        + title + '%0A' + '저는 '+ name + '' + hash + '%0A' + url, 
         'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
     return false;
 }

diff --git a/js/share_es5.js b/js/share_es5.js
@@ -10,8 +10,19 @@ function fb() {
 }
 
 function tw() {
-  var name = document.querySelector('.result');
-  window.open('https://twitter.com/intent/tweet?text=' + title + '%0A' + '저는 ' + name.innerHTML + ' 이에요! ' + hash + '%0A' + url, 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
+  var name = document.querySelector('.result').innerHTML;
+
+  switch (name) {
+    case '표범':
+    case '유니콘':
+      name += '이에요! ';
+      break;
+
+    default:
+      name += '예요! ';
+  }
+
+  window.open('https://twitter.com/intent/tweet?text=' + title + '%0A' + '저는 ' + name + '' + hash + '%0A' + url, 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
   return false;
 }