Add a dark theme and is very simple switch

diff --git a/css/style-dark.css b/css/style-dark.css
new file mode 100644 (file)
index 0000000..813c291
--- /dev/null
+++ b/css/style-dark.css
@@ -0,0 +1,90 @@
+/*** GENERAL ***/
+body {
+    color: #fff;
+    background-color: #0d0d0d;
+}
+
+a, a:hover, a:visited {
+    color: #fff;
+}
+
+#main ul#links li a.current {
+    background-color: #000;
+    color: #fff;
+}
+
+#links a:hover, .backhome a:hover{
+    background-color: #fff;
+    color: #000;
+}
+
+input[type=submit].delete {
+    background : url('../img/dark/remove.png') no-repeat center center;
+    color : transparent;
+}
+
+#main .entrie {
+    color: #fff;
+    background-color: #000;
+    border: 1px solid #fff;
+}
+
+#main .entrie h2 a:hover {
+    color: #29B1E3;
+}
+
+a.fav span {
+    background: url('../img/dark/star-on.png') no-repeat;
+}
+
+a.fav span:hover {
+    background: url('../img/dark/star-off.png') no-repeat;
+}
+
+a.fav-off span {
+    background: url('../img/dark/star-off.png') no-repeat;
+}
+
+a.fav-off span:hover {
+    background: url('../img/dark/star-on.png') no-repeat;
+}
+
+a.archive span {
+    background: url('../img/dark/checkmark-on.png') no-repeat;
+}
+
+a.archive span:hover {
+    background: url('../img/dark/checkmark-off.png') no-repeat;
+}
+
+a.archive-off span {
+    background: url('../img/dark/checkmark-off.png') no-repeat;
+}
+
+a.archive-off span:hover {
+    background: url('../img/dark/checkmark-on.png') no-repeat;
+}
+
+/*** ***/
+/*** ARTICLE PAGE ***/
+
+body.article {
+       color: #fff;
+    background-color: #0d0d0d;
+}
+
+#article header {
+    border-bottom: 1px solid #222222;
+}
+
+#article article {
+    border-bottom: 1px solid #222222;
+}
+
+.vieworiginal a {
+    color: #888888;
+}
+
+.entrie {
+    background-color: #fff;
+}

diff --git a/css/style-light.css b/css/style-light.css
new file mode 100644 (file)
index 0000000..5b9c6c1
--- /dev/null
+++ b/css/style-light.css
@@ -0,0 +1,90 @@
+/*** GENERAL ***/
+body {
+    color: #222222;
+    background-color: #F1F1F1;
+}
+
+a, a:hover, a:visited {
+    color: #000;
+}
+
+#main ul#links li a.current {
+    background-color: #000;
+    color: #fff;
+}
+
+#links a:hover, .backhome a:hover{
+    background-color: #040707;
+    color: #F1F1F1;
+}
+
+input[type=submit].delete {
+    background : url('../img/light/remove.png') no-repeat center center;
+    color : transparent;
+}
+
+#main .entrie {
+    color: #2e2e2e;
+    background-color: #ffffff;
+    border: 1px solid #000;
+}
+
+#main .entrie h2 a:hover {
+    color: #F5BE00;
+}
+
+a.fav span {
+    background: url('../img/light/star-on.png') no-repeat;
+}
+
+a.fav span:hover {
+    background: url('../img/light/star-off.png') no-repeat;
+}
+
+a.fav-off span {
+    background: url('../img/light/star-off.png') no-repeat;
+}
+
+a.fav-off span:hover {
+    background: url('../img/light/star-on.png') no-repeat;
+}
+
+a.archive span {
+    background: url('../img/light/checkmark-on.png') no-repeat;
+}
+
+a.archive span:hover {
+    background: url('../img/light/checkmark-off.png') no-repeat;
+}
+
+a.archive-off span {
+    background: url('../img/light/checkmark-off.png') no-repeat;
+}
+
+a.archive-off span:hover {
+    background: url('../img/light/checkmark-on.png') no-repeat;
+}
+
+/*** ***/
+/*** ARTICLE PAGE ***/
+
+body.article {
+       color: #222222;
+    background-color: #F1F1F1;
+}
+
+#article header {
+    border-bottom: 1px solid #222222;
+}
+
+#article article {
+    border-bottom: 1px solid #222222;
+}
+
+.vieworiginal a {
+    color: #888888;
+}
+
+.entrie {
+    background-color: #fff;
+}

diff --git a/css/style.css b/css/style.css
index 29dca289a25cae99fb21820652f8ce70cd76b5bf..7fc8f056be0b8750ee17d5e3c7981f9aa147ab26 100644 (file)
--- a/css/style.css
+++ b/css/style.css
@@ -1,16 +1,10 @@
 /*** GENERAL ***/
 body {
-    color: #222222;
     font: 20px/1.3em Palatino,Georgia,serif;
-    background-color: #F1F1F1;
     margin: 10px;
 }
 
 
-a, a:hover, a:visited {
-    color: #000;
-}
-
 header {
     text-align: center;
 }
@@ -28,8 +22,6 @@ header {
 #main ul#links li a.current {
     -webkit-border-radius: 2px;
     border-radius: 2px;
-    background-color: #040707;
-    color: #F1F1F1;
 }
 
 #main ul#sort {
@@ -58,8 +50,6 @@ header {
 #links a:hover, .backhome a:hover{
     -webkit-border-radius: 2px;
     border-radius: 2px;
-    background-color: #040707;
-    color: #F1F1F1;
 }
 
 footer {
@@ -80,11 +70,9 @@ ul#login li {
 }
 
 input[type=submit].delete {
-    background : url('../img/remove.png') no-repeat center center;
     width : 16px;
     height :16px;
     border : none;
-    color : transparent;
     cursor: pointer;
     font-size : 0;
 }
@@ -94,8 +82,6 @@ input[type=submit].delete {
 }
 
 #main .entrie {
-    color: rgb(46, 46, 46);
-    background-color: #ffffff;
     padding: 15px;
     min-height: 8em;
     border: 1px solid;
@@ -105,10 +91,6 @@ input[type=submit].delete {
     text-decoration: none;
 }
 
-#main .entrie h2 a:hover {
-    color: #F5BE00;
-}
-
 .tools {
     text-align: right;
 }
@@ -145,62 +127,23 @@ input[type=submit].delete {
     height: 16px;
 }
 
-a.fav span {
-    background: url('../img/star-on.png') no-repeat;
-}
-
-a.fav span:hover {
-    background: url('../img/star-off.png') no-repeat;
-}
-
-a.fav-off span {
-    background: url('../img/star-off.png') no-repeat;
-}
-
-a.fav-off span:hover {
-    background: url('../img/star-on.png') no-repeat;
-}
-
-a.archive span {
-    background: url('../img/checkmark-on.png') no-repeat;
-}
-
-a.archive span:hover {
-    background: url('../img/checkmark-off.png') no-repeat;
-}
-
-a.archive-off span {
-    background: url('../img/checkmark-off.png') no-repeat;
-}
-
-a.archive-off span:hover {
-    background: url('../img/checkmark-on.png') no-repeat;
-}
 
 /*** ***/
 /*** ARTICLE PAGE ***/
 
 body.article {
-    color: #222222;
     font: 20px/1.3em Palatino,Georgia,serif;
-    background-color: #F1F1F1;
 }
 
 #article header {
     text-align: left;
-    border-bottom: 1px solid #222222;
 }
 
 #article header a {
     text-decoration: none;
 }
 
-#article article {
-    border-bottom: 1px solid #222222;
-}
-
 .vieworiginal a {
-    color: #888888;
     text-decoration: none;
 }
 

diff --git a/img/dark/checkmark-off.png b/img/dark/checkmark-off.png
new file mode 100644 (file)
index 0000000..efc3439
Binary files /dev/null and b/img/dark/checkmark-off.png differ

diff --git a/img/dark/checkmark-on.png b/img/dark/checkmark-on.png
new file mode 100644 (file)
index 0000000..24391c2
Binary files /dev/null and b/img/dark/checkmark-on.png differ

diff --git a/img/dark/down.png b/img/dark/down.png
new file mode 100644 (file)
index 0000000..41ea960
Binary files /dev/null and b/img/dark/down.png differ

diff --git a/img/dark/logo.png b/img/dark/logo.png
new file mode 100644 (file)
index 0000000..9fba064
Binary files /dev/null and b/img/dark/logo.png differ

diff --git a/img/dark/remove.png b/img/dark/remove.png
new file mode 100644 (file)
index 0000000..41786fd
Binary files /dev/null and b/img/dark/remove.png differ

diff --git a/img/dark/star-off.png b/img/dark/star-off.png
new file mode 100644 (file)
index 0000000..90651b5
Binary files /dev/null and b/img/dark/star-off.png differ

diff --git a/img/dark/star-on.png b/img/dark/star-on.png
new file mode 100644 (file)
index 0000000..7fc1447
Binary files /dev/null and b/img/dark/star-on.png differ

diff --git a/img/dark/up.png b/img/dark/up.png
new file mode 100644 (file)
index 0000000..1679e18
Binary files /dev/null and b/img/dark/up.png differ

diff --git a/img/checkmark-off.png b/img/light/checkmark-off.png
similarity index 100%
rename from img/checkmark-off.png
rename to img/light/checkmark-off.png

diff --git a/img/checkmark-on.png b/img/light/checkmark-on.png
similarity index 100%
rename from img/checkmark-on.png
rename to img/light/checkmark-on.png

diff --git a/img/remove.png b/img/light/remove.png
similarity index 100%
rename from img/remove.png
rename to img/light/remove.png

diff --git a/img/star-off.png b/img/light/star-off.png
similarity index 100%
rename from img/star-off.png
rename to img/light/star-off.png

diff --git a/img/star-on.png b/img/light/star-on.png
similarity index 100%
rename from img/star-on.png
rename to img/light/star-on.png

diff --git a/js/poche.js b/js/poche.js
index 6bc3c188aa6a0857daa841ad7bd0f1483d435bc7..d27ecbbacfe7916ca625441c0a61e44dd28c8865 100644 (file)
--- a/js/poche.js
+++ b/js/poche.js
@@ -27,4 +27,32 @@ function sort_links(view, sort) {
     $.get('index.php', { view: view, sort: sort, full_head: 'no' }, function(data) {
       $('#content').html(data);
     });
-}
\ No newline at end of file
+}
+
+
+// ---------- Swith light or dark view
+function setActiveStyleSheet(title) {
+       var i, a, main;
+       for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
+               if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
+                       a.disabled = true;
+                       if(a.getAttribute("title") == title) a.disabled = false;
+               }
+       }
+}
+$('#themeswitch').click(function() {
+       // we want the dark
+       if ($('body').hasClass('light-style')) {
+               setActiveStyleSheet('dark-style');
+               $('body').addClass('dark-style');
+               $('body').removeClass('light-style');
+               $('#themeswitch').text('light');
+       // we want the light
+       } else if ($('body').hasClass('dark-style')) {
+               setActiveStyleSheet('light-style');
+               $('body').addClass('light-style');
+               $('body').removeClass('dark-style');
+               $('#themeswitch').text('dark');
+       }
+       return false;
+});

diff --git a/tpl/head.html b/tpl/head.html
index 6fcf9741967e19ba20b5e060312d6fbbac67526b..66b6895d7225c6f5ed78b1e72aa088ba40f0cd31 100644 (file)
--- a/tpl/head.html
+++ b/tpl/head.html
@@ -15,8 +15,12 @@
         <link rel="apple-touch-icon-precomposed" href="./img/apple-touch-icon-precomposed.png">
         <link rel="stylesheet" href="./css/knacss.css" media="all">
         <link rel="stylesheet" href="./css/style.css" media="all">
+        <!-- Light Theme -->
+        <link rel="stylesheet" href="./css/style-light.css" media="all" title="light-style">
+        <!-- Dark Theme -->
+        <link rel="alternate stylesheet" href="./css/style-dark.css" media="all" title="dark-style">
     </head>
-    <body>
+    <body class="light-style">
         <header>
             <h1><img src="./img/logo.png" alt="logo poche" />poche</h1>
         </header>

diff --git a/tpl/home.html b/tpl/home.html
index 6fb9444cd3bb1e7e00020888f67d011904ae7d8a..62c77bd352b2503e860a54b826f178b2725170ec 100644 (file)
--- a/tpl/home.html
+++ b/tpl/home.html
@@ -2,6 +2,7 @@
                 <li><a href="index.php" {if="$view == 'index'"}class="current"{/if}>home</a></li>
                 <li><a href="?view=fav" {if="$view == 'fav'"}class="current"{/if}>favorites</a></li>
                 <li><a href="?view=archive" {if="$view == 'archive'"}class="current"{/if}>archive</a></li>
+                <li><a href="#" id="themeswitch">dark</a></li>
                 <li><a style="cursor: move" title="i am a bookmarklet, use me !" href="javascript:(function(){var%20url%20=%20location.href%20||%20url;window.open('{$poche_url}?action=add&url='%20+%20encodeURIComponent(url),'_self');})();">poche it !</a></li>
                 <li><a href="?logout" title="Logout">logout</a></li>
             </ul>

diff --git a/tpl/view.html b/tpl/view.html
index 4b8ce60fbba104c25362dc0ccd758dc8a346f607..9ba5e208d45cd45f84b97ea4f95c5fd66ec6c3c1 100644 (file)
--- a/tpl/view.html
+++ b/tpl/view.html
@@ -15,8 +15,12 @@
         <link rel="apple-touch-icon-precomposed" href="./img/apple-touch-icon-precomposed.png">
         <link rel="stylesheet" href="./css/knacss.css" media="all">
         <link rel="stylesheet" href="./css/style.css" media="all">
+        <!-- Light Theme -->
+        <link rel="stylesheet" href="./css/style-light.css" media="all" title="light-style">
+        <!-- Dark Theme -->
+        <link rel="alternate stylesheet" href="./css/style-dark.css" media="all" title="dark-style">
     </head>
-    <body class="article">
+    <body class="article light-style">
         <div id="article" class="w600p">
                <div class="backhome">
                        <a href="index.php" title="back to home">&larr;</a>
@@ -24,6 +28,7 @@
             <div class="tools">
                 <ul>
                     <li><a title="toggle mark as read" class="tool archive {if="$is_read == '0'"}archive-off{/if}" onclick="toggle_archive(this, {$id})"><span></span></a></li>
+                    <li><a href="#" id="themeswitch">dark</a></li>
                     <li><a title="toggle favorite" class="tool fav {if="$is_fav == '0'"}fav-off{/if}" onclick="toggle_favorite(this, {$id})"><span></span></a></li>
                     <li><form method="post" onsubmit="return confirm('Are you sure?')" style="display: inline;" action="index.php"><input type="hidden" name="token" id="token" value="<?php echo Session::getToken(); ?>" /><input type="hidden" id="view" name="view" value="index" /><input type="hidden" id="action" name="action" value="delete" /><input type="hidden" id="id" name="id" value="{$id}" /><input type="submit" class="delete" title="toggle delete" /></form></li>
                     <li><a href="?logout" title="Logout">logout</a></li>