Add a dark theme and is very simple switch

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;
+}

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;
+}

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;
 }
 

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);
     });
-}
+}
+
+
+// ---------- 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;
+});

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>

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>

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>