Change themes for better contrast on buttons

app/static/css/themes/FK_dark_theme.css

@@ -127,6 +127,9 @@ table tr:nth-child(odd) {
 table.codehilitetable {
     --background: #263238;
 }
+.editor svg {
+    --icons: #fff;
+}
 
 div.editor-toolbar, div.CodeMirror {
     --border: #404040;

app/static/css/themes/default_theme.css

@@ -1,26 +1,26 @@
 /* Some colors, variables etc. to be used as theme */
 
 :root {
-    --background: #ffffff;
-    --text: #000000;
-    --text-light: #101010;
+    --background: #fff;
+    --text: #000;
+    --text-light: #111;
 
     --links: #c61a1a;
 
     --ok: #149641;
-    --ok-text: #ffffff;
+    --ok-text: #fff;
     --ok-active: #0f7331;
 
     --warn: #f59f25;
-    --warn-text: #ffffff;
+    --warn-text: #fff;
     --warn-active: #ea9720;
 
     --error: #d23a2f;
-    --error-text: #ffffff;
+    --error-text: #fff;
     --error-active: #b32a20;
 
     --info: #2e7aec;
-    --info-text: #ffffff;
+    --info-text: #fff;
     --info-active: #215ab0;
 
     --hr-border: 1px solid #d8d8d8;
@@ -33,21 +33,21 @@ table tr:nth-child(odd) {
     --background: rgba(0, 0, 0, .1);
 }
 table th {
-    --background: #e0e0e0;
-    --border: #d0d0d0;
+    --background: #eee;
+    --border: #ddd;
 }
 
 .form {
-    --background: #ffffff;
-    --text: #000000;
+    --background: #fff;
+    --text: #000;
     --border: 1px solid #c8c8c8;
     --border-focused: #7cade0;
     --shadow-focused: rgba(87, 143, 228, 0.5);
 }
 
 .editor button {
-    --background: #ffffff;
-    --text: #000000;
+    --background: #fff;
+    --text: #000;
     --border: 1px solid rgba(0, 0, 0, 0);
     --border-focused: 1px solid rgba(0, 0, 0, .5);
 }
@@ -82,13 +82,13 @@ header {
 
 footer {
     --background: #ffffff;
-    --text: #a0a0a0;
-    --border: #d0d0d0;
+    --text: #aaa;
+    --border: #ddd;
 }
 
 .flash {
-    --background: #ffffff;
-    --text: #212121;
+    --background: #fff;
+    --text: #222;
     --shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
 
     /* Uncomment to inherit :root values
@@ -98,27 +98,27 @@ footer {
     --info: #2e7aec; */
 
     --btn-bg: rgba(0, 0, 0, 0);
-    --btn-text: #000000;
+    --btn-text: #000;
     --btn-bg-active: rgba(0, 0, 0, .15);
 }
 
 .profile-xp {
-    --background: #e0e0e0;
-    --border: 1px solid #c0c0c0;
-    --background-xp: #f85555;
-    --background-xp-100: #d03333;
-    --border-xp: 1px solid #d03333;
+    --background: #eee;
+    --border: 1px solid #ccc;
+    --background-xp: #f55;
+    --background-xp-100: #d33;
+    --border-xp: 1px solid #d33;
 }
 
 .context-menu {
-    --background: #ffffff;
-    --shadow: 0 0 12px -9px #000000;
-    --border: #d0d0d0;
-    --background-light: #f0f0f0;
+    --background: #fff;
+    --shadow: 0 0 12px -9px #000;
+    --border: #ddd;
+    --background-light: #fff;
 }
 
-.editor {
-    --icons: #ffffff;
+.editor svg {
+    --icons: #000;
 }
 
 .dl-button {
@@ -136,7 +136,7 @@ footer {
 
 /* Extra style on top of the Pygments style */
 table.codehilitetable td.linenos {
-    color: #808080;
+    color: #888;
 }
 
 .tag {

app/static/less/editor.less

@@ -1,11 +1,15 @@
 @import "vars";
 
 .editor {
-	& > button > svg {
-		width: 25px;
+	& > button {
+		background-color: #000;
 
-		& > path, & > rect {
-			fill: var(--icons);
+		& > svg {
+			width: 25px;
+
+			& > path, & > rect {
+				fill: var(--icons);
+			}
 		}
 	}
 }