[Feature] Add a dark theme

Close #1, #421, #656, #764. Related issue: #825, #226.
Laverna · Oct 19, 2017 · 4acc821 · 4acc821
1 parent c47f507
commit 4acc821
Show file tree

Hide file tree

Showing 4 changed files with 378 additions and 1 deletion.
diff --git a/app/styles/theme-dark/main.less b/app/styles/theme-dark/main.less
@@ -0,0 +1,37 @@
+/**
+ * Default theme
+ */
+@import "bootstrap/less/variables.less";
+@import "bootstrap/less/mixins.less";
+
+// Variables
+@import '../theme-default/variables.less';
+
+// Core
+@import '../theme-default/layout.less';
+@import '../theme-default/utils.less';
+@import '../theme-default/forms.less';
+@import '../theme-default/modal.less';
+@import '../theme-default/buttons.less';
+@import '../theme-default/checkbox.less';
+
+// Navbars
+@import '../theme-default/header.less';
+@import '../theme-default/sidemenu.less';
+
+// List of notes, notebooks, etc.
+@import '../theme-default/list.less';
+
+// Settings
+@import '../theme-default/settings.less';
+
+// Codemirror editor
+@import '../theme-default/editor.less';
+@import '../theme-default/codemirror.less';
+@import '../theme-default/dropzone.less';
+
+// Loading animation
+@import '../theme-default/loading-animation.less';
+
+@import 'prism.less';
+@import 'theme.less';
diff --git a/app/styles/theme-dark/prism.less b/app/styles/theme-dark/prism.less
@@ -0,0 +1,139 @@
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+.-note,
+.editor--preview {
+    pre {
+        display: block;
+        position: relative;
+        overflow: auto;
+        overflow: auto;
+        max-height: inherit;
+        height: 100%;
+        padding: 0.5em 1em;
+        border: 1px solid lighten(@theme-primary, 10%);
+    }
+}
+.-note {
+    pre {
+        max-height: 50rem;
+    }
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+	color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+	color: #e6db74;
+}
+
+.token.keyword {
+	color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
diff --git a/app/styles/theme-dark/theme.less b/app/styles/theme-dark/theme.less
@@ -0,0 +1,201 @@
+/**
+ * Dark theme.
+ */
+@theme-primary : #252830;
+@theme-success : #1BC98E;
+@theme-info    : #1997C6;
+@theme-danger  : #E64759;
+@theme-warning : #E4D836;
+@theme-fg      : lighten(#A7A7A7, 12%);
+
+@color--brand: @theme-success;
+@color--info : @theme-info;
+
+// Note view
+@layout--note--bg    : @theme-primary;
+@layout--note--color : @theme-fg;
+
+// Header
+@header--bg            : @theme-primary;
+@header--color         : @theme-fg;
+@header--shadow        : 1px 1px 1px -1px @theme-fg;
+@header--right--shadow : 0px -1px 1px 1px @theme-fg;
+
+// Buttons in note view
+@btn--note--bg         : @theme-primary;
+@btn--note--hover      : @theme-primary;
+
+// Sidemenu
+@sidemenu--bg          : @theme-primary;
+@sidemenu--item        : @theme-primary;
+@sidemenu--item--color : @theme-fg;
+
+// Pagedown bar
+@pagedown--bar--bg    : @theme-primary;
+@pagedown--bar--border: lighten(@theme-primary, 15%);
+@pagedown--bar--color : lighten(@theme-primary, 10%);
+
+// Buttons
+@pagedown--btn--hover--bg    : lighten(@theme-primary, 10%);
+@pagedown--btn--hover--color : @theme-fg;
+
+body {
+    background-color : @theme-primary;
+    color            : @theme-fg;
+}
+.layout--brand {
+    background-color: @theme-primary;
+}
+.container--white {
+    background-color: lighten(@theme-primary, 15%);
+    color: #fff;
+}
+.layout--sidebar {
+    border-right-color: lighten(@theme-primary, 20%);
+}
+.page-header.-note {
+    color: #FFF;
+}
+hr {
+    border-color: lighten(@theme-primary, 10%);
+}
+
+// Buttons
+.btn {
+    color: #FFF;
+    border-radius: 0;
+}
+.btn-default {
+    background-color : lighten(@theme-primary, 8%);
+    color            : lighten(@theme-fg, 5%);
+    border-color     : lighten(@theme-primary, 10%);
+    &:hover {
+        background-color : lighten(@theme-primary, 15%);
+        color            : #FFF;
+    }
+}
+.btn-warning {
+    background-color: @theme-warning;
+    &:hover {
+        background-color: darken(@theme-warning, 14%);
+    }
+}
+.btn-danger {
+    background-color: @theme-danger;
+    &:hover {
+        background-color: darken(@theme-danger, 14%);
+    }
+}
+.btn-info {
+    background-color: @theme-info;
+    &:hover {
+        background-color: darken(@theme-info, 14%);
+    }
+}
+
+// Editor styles
+.editor--fullscreen.-preview .layout--content {
+    background-color: lighten(@theme-primary, 10%);
+}
+.CodeMirror,
+.editor--fullscreen.-preview .editor--preview,
+.editor--input,
+.editor--layout {
+    background-color : @theme-primary;
+    color            : #FFF;
+}
+.cm-s-default .cm-header,
+.cm-link {
+    color: #FFF;
+}
+.cm-comment {
+    background-color: lighten(@theme-primary, 10%);
+}
+
+// Forms
+.form-control {
+    background-color : @theme-primary;
+    border-color     : lighten(@theme-primary, 15%);
+    color            : #FFF;
+    border-radius    : 0;
+    &:focus {
+        border-color: lighten(@theme-primary, 30%);
+    }
+}
+.container--white .input--brand {
+    color: #FFF;
+}
+.form-control[disabled],
+.form-control[readonly],
+.fieldset[disabled] .form-control {
+    background-color : lighten(@theme-primary, 8%);
+}
+legend {
+    color        : #FFF;
+    border-color : lighten(@theme-primary, 45%);
+}
+
+.progress {
+    border-radius: 2px;
+}
+
+// Modal window
+.modal-content {
+    background-color : @theme-primary;
+    color            : #FFF;
+    border-radius    : 0;
+}
+.modal-header,
+.modal-footer,
+.modal--group {
+    border-color: lighten(@theme-primary, 15%);
+}
+.form-group.modal--group {
+    border-bottom: 1px solid lighten(@theme-primary, 15%);
+}
+
+// Notes list
+.list--navbar {
+    border-color: lighten(@theme-primary, 15%);
+}
+.list-group-item,
+a.list-group-item,
+a.list--item,
+.list--item {
+    background-color  : transparent;
+    color             : @theme-fg;
+    border-color      : lighten(@theme-primary, 15%);
+    border-left-width : 0;
+    &:hover {
+        background-color: lighten(@theme-primary, 10%);
+    }
+    .list-group-item-heading {
+        color: #FFF;
+    }
+    .list-group-item-text {
+        color: @theme-fg;
+    }
+}
+
+.table-striped {
+    tbody tr {
+        &:nth-of-type(2n+1) {
+            background-color: lighten(@theme-primary, 2%);
+        }
+        td {
+            border-color: lighten(@theme-primary, 8%);
+        }
+    }
+}
+.table-hover {
+    tbody tr:hover {
+        background-color: lighten(@theme-primary, 20%);
+    }
+}
+
+.dropdown-menu {
+    background-color: lighten(@theme-primary, 8%);
+    > li > a {
+        color: lighten(@theme-fg, 10%);
+    }
+}
diff --git a/app/styles/theme-default/variables.less b/app/styles/theme-default/variables.less
@@ -1,7 +1,7 @@
 /**
  * Variables
  */
-@color--brand: #52D6B0;
+@color--brand: darken(#52D6B0, 15%);
 @color--info : #1693A7;