Fix icons on dark mode (closes #34)

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 45 insertions, 35 deletions

diff --git a/css/icons.scss b/css/icons.scss
new file mode 100644
index 000000000..386225aa6
--- /dev/null
+++ b/css/icons.scss
@@ -0,0 +1,45 @@
+.icon-bold {
+	background-image: url('./../../img/icons/bold.svg');
+}
+.icon-italic {
+	background-image: url('./../../img/icons/italic.svg');
+}
+.icon-underline {
+	background-image: url('./../../img/icons/underline.svg');
+}
+.icon-link {
+	background-image: url('./../../img/icons/link.svg');
+}
+.icon-ol {
+	background-image: url('./../../img/icons/ol.svg');
+}
+.icon-ul {
+	background-image: url('./../../img/icons/ul.svg');
+}
+.icon-hr {
+	background-image: url('./../../img/icons/hr.svg');
+}
+.icon-quote {
+	background-image: url('./../../img/icons/quote.svg');
+}
+.icon-paragraph {
+	background-image: url('./../../img/icons/paragraph.svg');
+}
+.icon-code {
+	background-image: url('./../../img/icons/code.svg');
+}
+.icon-image {
+	background-image: url('./../../img/icons/image.svg');
+}
+
+@include icon-black-white('bold', 'text', 1);
+@include icon-black-white('italic', 'text', 1);
+@include icon-black-white('underline', 'text', 1);
+@include icon-black-white('link', 'text', 1);
+@include icon-black-white('ol', 'text', 1);
+@include icon-black-white('ul', 'text', 1);
+@include icon-black-white('hr', 'text', 1);
+@include icon-black-white('quote', 'text', 1);
+@include icon-black-white('paragraph', 'text', 1);
+@include icon-black-white('code', 'text', 1);
+@include icon-black-white('image', 'text', 1);
diff --git a/css/style.scss b/css/style.scss
index cf2d2aa81..f41fb9877 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -83,38 +83,3 @@ div[contenteditable=false] {
   color: var(--color-main-text);
   opacity: 1;
 }
-
-
-.icon-bold {
-  background-image: url('./../../img/icons/bold.svg');
-}
-.icon-italic {
-  background-image: url('./../../img/icons/italic.svg');
-}
-.icon-underline {
-  background-image: url('./../../img/icons/underline.svg');
-}
-.icon-link {
-  background-image: url('./../../img/icons/link.svg');
-}
-.icon-ol {
-  background-image: url('./../../img/icons/ol.svg');
-}
-.icon-ul {
-  background-image: url('./../../img/icons/ul.svg');
-}
-.icon-hr {
-  background-image: url('./../../img/icons/hr.svg');
-}
-.icon-quote {
-  background-image: url('./../../img/icons/quote.svg');
-}
-.icon-paragraph {
-  background-image: url('./../../img/icons/paragraph.svg');
-}
-.icon-code {
-  background-image: url('./../../img/icons/code.svg');
-}
-.icon-image {
-  background-image: url('./../../img/icons/image.svg');
-}