diff --git a/customstyles.css b/customstyles.css
deleted file mode 100644
index f8a3d65..0000000
--- a/customstyles.css
+++ /dev/null
@@ -1,377 +0,0 @@
-body {
- background-color: #222222;
- color: #eee;
-}
-
-/* Mobile view buttion */
-#topline button {
- background-color: #333;
-}
-
-textarea,
-input,
-select {
- color: #eee;
- background-color: #333;
- border: 1px solid #888;
-}
-
-.listsearchbox {
- background-color: #333;
-}
-
-/* About dialog */
-.ui-dialog .ui-dialog-content,
-.ui-dialog .ui-widget-content {
- color: #eee;
- background: #333;
- box-shadow: none;
-}
-
-.ui-dialog .ui-dialog-buttonpane,
-.ui-dialog .ui-dialog-titlebar {
- color: #eee;
- background-color: #444;
-}
-.records-table thead tr th{
- color: #eee;
- background-color: #444;
- border-color: #555;
-}
-.records-table tbody tr td{
- background-color: #333;
- border-color: #555;
-}
-/* eof About dialog */
-
-/* Toolbar */
-.toolbar a.button {
- opacity: 1;
- color: #eee;
-}
-
-.toolbar a.button.disabled {
- opacity: .5;
-}
-
-.searchbox input,
-a.menuselector,
-#quicksearchbar input {
- color: #eee;
- background-color: #333;
- border-color: #999;
-}
-
-a.menuselector .handle {
- color: #eee;
-}
-/* oef Toolbar */
-
-/* Mail compose */
-#compose-contacts #directorylist {
- border-bottom: 1px solid #888;
-}
-
-#composeheaders {
- background-color: #333;
- border-color: #888;
-}
-
-#compose-attachments .hint,
-#compose-attachments {
- color: #eee;
- background-color: #333;
-}
-/* eof Mail compose */
-
-/* Folder list */
-.folderlist li.mailbox.inbox.selected > a,
-.folderlist li.mailbox ul li.selected > a {
- color: #333;
- background-color: #aaa;
-}
-
-.folderlist li.mailbox ul li a {
- color:#eee;
-}
-
-.folderlist li.mailbox ul, /* group border */
-.folderlist li.mailbox a {
- color: #eee;
- background-color: #333;
- border-color: #555;
-}
-
-ul.listing li {
- border-color: #555;
-}
-
-.uibox .listbutton,
-.uibox .boxfooter {
- background-color: #333;
- border-color: #555;
-}
-/* eof Folder list */
-
-/* Message List */
-.widescreen #messagelistheader,
-#messagelistfooter {
- background-color: #333;
- color: #eee;
- border-color: #555;
-}
-
-/* List elements */
-.pagejumper,
-.widescreen #messagelistcontainer,
-.messagelist td.subject,
-.messagelist td.flags{
- background-color: #333;
- color: #eee;
- border-color: #555;
-}
-
-.widescreen .messagelist td.subject span.date,
-.widescreen .messagelist td.subject span.fromto {
- color: #aaa;
-}
-.messagelist tr td.subject a {
- color: #eee;
-}
-/* eof List elements */
-/* eof Message List */
-
-/* Message composition */
-body.iframe {
- color: #eee;
- background-color: #333;
- border-color: #555;
-}
-
-.moreheaderstoggle,
-#messageheader,
-#composeheader,
-#all-headers,
-#headers-source {
- background-color: #333;
- color: #ccc;
- border-color: #555;
-}
-
-.headers-table td,
-.headers-table td.header a {
- color: #ccc;
-}
-/* eof Message composition */
-
-/* Settings */
-#settings-tabs .listitem a {
- color: #eee;
-}
-
-#settings-sections .selected a {
- color: #333;
- background-color: #aaa;
-}
-
-
-#settings-tabs .listitem {
- background-color: #333;
- border-color: #555;
-}
-/* eof Settings */
-
-/* Settings Section */
-.uibox {
- background-color: #333;
- border-color: #555 !important;
-}
-
-.uibox .boxtitle {
- color: #eee;
- background-color: #444;
-}
-
-#subscription-table li.root {
- background-color: #333;
-}
-
-#identities-table .selected td,
-#filtersetslist .selected td,
-#filterslist .selected td,
-#responses-table .selected td,
-#sections-table .selected td {
- color: #333 !important;
- background-color: #aaa;
-}
-
-#identities-table td,
-#responses-table td,
-#filtersetslist td,
-#filterslist td,
-.listbox,
-.uibox td.section {
- color: #eee !important;
- background-color: #333;
- border-color: #555;
-}
-
-#identities-table tr.selected td {
- color: #333;
- background-color: #aaa;
-}
-/* eof Settings Section */
-
-/* Settings modification area*/
-table.propform td.title {
- color: #eee;
-}
-
-body.iframe .boxtitle,
-body.iframe .footerleft.floating {
- color: #eee;
- background-color: #444;
- border-color: #555;
-}
-ul.proplist li,
-table.propform td {
- color: #eee;
- background-color: #333;
- border-color: #555;
- border-width: 1px;
-}
-
-.footerleft {
- background-color: #444;
- padding: 8px;
-}
-
-/* Plugin: sieve manager */
-div.actionrow:hover,
-div.rulerow:hover {
- background-color: #444;
-}
-
-div.actionrow,
-div.rulerow {
- color: #888;
- background-color: #333;
- border: 1px solid #555;
-}
-
-.listarea {
- border-color: #555;
-}
-
-td.rowtargets span {
- color: #aaa;
- /*background-color: #333;*/
-}
-
-#filter-form .listelement input { /* Filter definition text input */
- background-color: #333 !important;
-}
-
-label,
-span.label,
-#filter-form label {
- color: #aaa;
-}
-/* eof Plugin: sieve manager */
-/* eof Settings modifications area */
-
-/* Spellcheck */
-.googie_edit_layer {
- background-color: #333 !important;
-}
-
-.googie_link {
- color: #ff5252 !important;
-}
-/* eof Spellcheck */
-
-/* Plugin: Contacts */
-#contacts-table tr.selected td,
-#directorylist .selected > a {
- color: #333;
- background-color: #aaa;
-}
-
-#contacts-table tr td,
-#directorylist a {
- color: #eee;
- background-color: #333;
- border-color: #555;
-}
-
-#contacttabs li.ui-tabs-active a {
- color: #333;
- background-color: #aaa;
- font-weight: bold;
-}
-
-#contacttabs li,
-#contacttabs a {
- color: #888;
- background-color: #333;
- border: 1px solid #555;
-}
-
-#contacttabs fieldset {
- color: #eee;
- background-color: #333;
- padding-top: 4px;
-}
-
-#contacttabs fieldset legend {
- color: #eee;
- background-color: #444;
- border-color: #555;
-}
-/* eof Plugin: Contacts */
-
-/* Plugin: Tasks */
-#tasklists li.selected span.listname,
-#tasklists li.selected {
- color: #333 !important;
- background-color: #aaa;
-}
-
-#tasklists li span.listname,
-#tasklists li {
- color: #eee !important;
- background-color: #333;
-}
-
-#taskedit ul.tagedit-list,
-#taskedit li,
-#taskedit a {
- color: #eee;
- background-color: #333;
- border: 1px solid #555;
-}
-
-#taskedit li.ui-tabs-active a {
- color: #333;
- background-color: #aaa;
- font-weight: bold;
-}
-
-#taskedit li a.tagedit-close {
- border: 0px;
-}
-
-li.tagedit-listelement,
-#taskedit input {
- color: #eee !important;
- background: #333 !important;
-}
-
-#taskshow {
- color: #eee !important;
-}
-
-.tagcloud li{
- color: #eee;
-}
-/* eof Plugin: Tasks */
diff --git a/dark_contacts.css b/dark_contacts.css
new file mode 100644
index 0000000..a524897
--- /dev/null
+++ b/dark_contacts.css
@@ -0,0 +1,40 @@
+/*
+ * Plugin: Contacts
+ */
+#contacts-table tr.selected td,
+#directorylist .selected > a {
+ color: #333;
+ background-color: #aaa;
+}
+
+#contacts-table tr td,
+#directorylist a {
+ color: #eee;
+ background-color: #333;
+ border-color: #555;
+}
+
+#contacttabs li.ui-tabs-active a {
+ color: #333;
+ background-color: #aaa;
+ font-weight: bold;
+}
+
+#contacttabs li,
+#contacttabs a {
+ color: #888;
+ background-color: #333;
+ border: 1px solid #555;
+}
+
+#contacttabs fieldset {
+ color: #eee;
+ background-color: #333;
+ padding-top: 4px;
+}
+
+#contacttabs fieldset legend {
+ color: #eee;
+ background-color: #444;
+ border-color: #555;
+}
diff --git a/dark_mail.css b/dark_mail.css
new file mode 100644
index 0000000..805e1fa
--- /dev/null
+++ b/dark_mail.css
@@ -0,0 +1,96 @@
+/* Mail compose */
+#compose-contacts #directorylist {
+ border-bottom: 1px solid #888;
+}
+
+#composeheaders {
+ background-color: #333;
+ border-color: #888;
+}
+
+#compose-attachments .hint,
+#compose-attachments {
+ color: #eee;
+ background-color: #333;
+}
+/* eof Mail compose */
+
+/* Folder list */
+.folderlist li.mailbox.inbox.selected > a,
+.folderlist li.mailbox ul li.selected > a {
+ color: #333;
+ background-color: #aaa;
+}
+
+.folderlist li.mailbox ul li a {
+ color:#eee;
+}
+
+.folderlist li.mailbox ul, /* group border */
+.folderlist li.mailbox a {
+ color: #eee;
+ background-color: #333;
+ border-color: #555;
+}
+
+ul.listing li {
+ border-color: #555;
+}
+
+.uibox .listbutton,
+.uibox .boxfooter {
+ background-color: #333;
+ border-color: #555;
+}
+/* eof Folder list */
+
+/* Message List */
+.widescreen #messagelistheader,
+#messagelistfooter {
+ background-color: #333;
+ color: #eee;
+ border-color: #555;
+}
+
+/* List elements */
+.pagejumper,
+.widescreen #messagelistcontainer,
+.messagelist td.subject,
+.messagelist td.flags{
+ background-color: #333;
+ color: #eee;
+ border-color: #555;
+}
+
+.widescreen .messagelist td.subject span.date,
+.widescreen .messagelist td.subject span.fromto {
+ color: #aaa;
+}
+.messagelist tr td.subject a {
+ color: #eee;
+}
+/* eof List elements */
+/* eof Message List */
+
+/* Message composition */
+body.iframe {
+ color: #eee;
+ background-color: #333;
+ border-color: #555;
+}
+
+.moreheaderstoggle,
+#messageheader,
+#composeheader,
+#all-headers,
+#headers-source {
+ background-color: #333;
+ color: #ccc;
+ border-color: #555;
+}
+
+.headers-table td,
+.headers-table td.header a {
+ color: #ccc;
+}
+/* eof Message composition */
diff --git a/dark_settings.css b/dark_settings.css
new file mode 100644
index 0000000..937a736
--- /dev/null
+++ b/dark_settings.css
@@ -0,0 +1,86 @@
+/*
+ * General color definition: see dark_styles.css
+ */
+
+/* Settings */
+#settings-tabs .listitem a {
+ color: #eee;
+}
+
+#settings-sections .selected a {
+ color: #333;
+ background-color: #aaa;
+}
+
+
+#settings-tabs .listitem {
+ background-color: #333;
+ border-color: #555;
+}
+/* eof Settings */
+
+/* Settings Section */
+.uibox {
+ background-color: #333;
+ border-color: #555 !important;
+}
+
+.uibox .boxtitle {
+ color: #eee;
+ background-color: #444;
+}
+
+#subscription-table li.root {
+ background-color: #333;
+}
+
+#identities-table .selected td,
+#filtersetslist .selected td,
+#filterslist .selected td,
+#responses-table .selected td,
+#sections-table .selected td {
+ color: #333 !important;
+ background-color: #aaa;
+}
+
+#identities-table td,
+#responses-table td,
+#filtersetslist td,
+#filterslist td,
+.listbox,
+.uibox td.section {
+ color: #eee !important;
+ background-color: #333;
+ border-color: #555;
+}
+
+#identities-table tr.selected td {
+ color: #333;
+ background-color: #aaa;
+}
+/* eof Settings Section */
+
+/* Settings modification area*/
+table.propform td.title {
+ color: #eee;
+}
+
+body.iframe .boxtitle,
+body.iframe .footerleft.floating {
+ color: #eee;
+ background-color: #444;
+ border-color: #555;
+}
+ul.proplist li,
+table.propform td {
+ color: #eee;
+ background-color: #333;
+ border-color: #555;
+ border-width: 1px;
+}
+
+.footerleft {
+ background-color: #444;
+ padding: 8px;
+}
+/* eof Settings modifications area */
diff --git a/dark_sieve.css b/dark_sieve.css
new file mode 100644
index 0000000..41afb56
--- /dev/null
+++ b/dark_sieve.css
@@ -0,0 +1,33 @@
+/*
+ * Plugin: Sieve Manager (settings)
+ */
+div.actionrow:hover,
+div.rulerow:hover {
+ background-color: #444;
+}
+
+div.actionrow,
+div.rulerow {
+ color: #888;
+ background-color: #333;
+ border: 1px solid #555;
+}
+
+.listarea {
+ border-color: #555;
+}
+
+td.rowtargets span {
+ color: #aaa;
+ /*background-color: #333;*/
+}
+
+#filter-form .listelement input { /* Filter definition text input */
+ background-color: #333 !important;
+}
+
+label,
+span.label,
+#filter-form label {
+ color: #aaa;
+}
diff --git a/dark_styles.css b/dark_styles.css
new file mode 100644
index 0000000..47c1a1c
--- /dev/null
+++ b/dark_styles.css
@@ -0,0 +1,88 @@
+/*
+ * Colors
+ *
+ * Body background: #222
+ * App background: #333
+ * Font color: #eee
+ * Font color darker: #aaa
+ * Border color: #555
+ * Header/Footer background: #444
+ * Section selected/focused/... #aaa
+ */
+body {
+ background-color: #222;
+ color: #eee;
+}
+
+/* Mobile view buttion */
+#topline button {
+ background-color: #333;
+}
+
+textarea,
+input,
+select {
+ color: #eee;
+ background-color: #333;
+ border: 1px solid #888;
+}
+
+.listsearchbox {
+ background-color: #333;
+}
+
+/* About dialog */
+.ui-dialog .ui-dialog-content,
+.ui-dialog .ui-widget-content {
+ color: #eee;
+ background: #333;
+ box-shadow: none;
+}
+
+.ui-dialog .ui-dialog-buttonpane,
+.ui-dialog .ui-dialog-titlebar {
+ color: #eee;
+ background-color: #444;
+}
+.records-table thead tr th{
+ color: #eee;
+ background-color: #444;
+ border-color: #555;
+}
+.records-table tbody tr td{
+ background-color: #333;
+ border-color: #555;
+}
+/* eof About dialog */
+
+/* Toolbar */
+.toolbar a.button {
+ opacity: 1;
+ color: #eee;
+}
+
+.toolbar a.button.disabled {
+ opacity: .5;
+}
+
+.searchbox input,
+a.menuselector,
+#quicksearchbar input {
+ color: #eee;
+ background-color: #333;
+ border-color: #888;
+}
+
+a.menuselector .handle {
+ color: #eee;
+}
+
+/* Spellcheck */
+.googie_edit_layer {
+ background-color: #333 !important;
+}
+
+.googie_link {
+ color: #ff5252 !important;
+}
+/* eof Spellcheck */
diff --git a/dark_tasks.css b/dark_tasks.css
new file mode 100644
index 0000000..00e8c79
--- /dev/null
+++ b/dark_tasks.css
@@ -0,0 +1,46 @@
+/*
+ * Plugin: Tasks
+ */
+#tasklists li.selected span.listname,
+#tasklists li.selected {
+ color: #333 !important;
+ background-color: #aaa;
+}
+
+#tasklists li span.listname,
+#tasklists li {
+ color: #eee !important;
+ background-color: #333;
+}
+
+#taskedit ul.tagedit-list,
+#taskedit li,
+#taskedit a {
+ color: #eee;
+ background-color: #333;
+ border: 1px solid #555;
+}
+
+#taskedit li.ui-tabs-active a {
+ color: #333;
+ background-color: #aaa;
+ font-weight: bold;
+}
+
+#taskedit li a.tagedit-close {
+ border: 0px;
+}
+
+li.tagedit-listelement,
+#taskedit input {
+ color: #eee !important;
+ background: #333 !important;
+}
+
+#taskshow {
+ color: #eee !important;
+}
+
+.tagcloud li{
+ color: #eee;
+}
diff --git a/includes/links.html b/includes/links.html
index 478080f..67affd5 100644
--- a/includes/links.html
+++ b/includes/links.html
@@ -1,2 +1,7 @@
-
+
+
+
+
+
+