Add a dark theme and is very simple switch

20 files changed, 221 insertions, 60 deletions

diff --git a/css/style-dark.css b/css/style-dark.css
new file mode 100644
index 00000000..813c291d
--- /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
index 00000000..5b9c6c11
--- /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 29dca289..7fc8f056 100644
--- 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
index 00000000..efc3439f
--- /dev/null
+++ b/img/dark/checkmark-off.png
diff --git a/img/dark/checkmark-on.png b/img/dark/checkmark-on.png
new file mode 100644
index 00000000..24391c2e
--- /dev/null
+++ b/img/dark/checkmark-on.png
diff --git a/img/dark/down.png b/img/dark/down.png
new file mode 100644
index 00000000..41ea9604
--- /dev/null
+++ b/img/dark/down.png
diff --git a/img/dark/logo.png b/img/dark/logo.png
new file mode 100644
index 00000000..9fba0642
--- /dev/null
+++ b/img/dark/logo.png
diff --git a/img/dark/remove.png b/img/dark/remove.png
new file mode 100644
index 00000000..41786fd7
--- /dev/null
+++ b/img/dark/remove.png
diff --git a/img/dark/star-off.png b/img/dark/star-off.png
new file mode 100644
index 00000000..90651b54
--- /dev/null
+++ b/img/dark/star-off.png
diff --git a/img/dark/star-on.png b/img/dark/star-on.png
new file mode 100644
index 00000000..7fc14477
--- /dev/null
+++ b/img/dark/star-on.png
diff --git a/img/dark/up.png b/img/dark/up.png
new file mode 100644
index 00000000..1679e18f
--- /dev/null
+++ b/img/dark/up.png
diff --git a/img/checkmark-off.png b/img/light/checkmark-off.png
index 3db5a06d..3db5a06d 100644
--- a/img/checkmark-off.png
+++ b/img/light/checkmark-off.png
diff --git a/img/checkmark-on.png b/img/light/checkmark-on.png
index cd3abb2c..cd3abb2c 100644
--- a/img/checkmark-on.png
+++ b/img/light/checkmark-on.png
diff --git a/img/remove.png b/img/light/remove.png
index f8ad56a3..f8ad56a3 100644
--- a/img/remove.png
+++ b/img/light/remove.png
diff --git a/img/star-off.png b/img/light/star-off.png
index 6a0133a7..6a0133a7 100644
--- a/img/star-off.png
+++ b/img/light/star-off.png
diff --git a/img/star-on.png b/img/light/star-on.png
index a9f96eaa..a9f96eaa 100644
--- a/img/star-on.png
+++ b/img/light/star-on.png
diff --git a/js/poche.js b/js/poche.js
index 6bc3c188..d27ecbba 100644
--- 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 6fcf9741..66b6895d 100644
--- 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 6fb9444c..62c77bd3 100644
--- 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 4b8ce60f..9ba5e208 100644
--- 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>