approvebg, back to development

README.MD

@@ -0,0 +1,12 @@
+# Artix ElkArte Theme
+
+A theme for Artix Linux's ElkArte forum. Based off of the [Silence](https://themes.elkarte.net//variant/Silence.html) theme, this theme features dark and light mode variants.
+
+![Preview screenshot of the Artix dark theme applied to an ElkArte forum](/screenshots/preview.png)
+
+A live version can be demo'd [here](https://forum.artixlinux.org/index.php?theme=10).
+
+Screenshots:
+
+* [Dark variant](/screenshots/dark_screenie.png)
+* [Light variant](/screenshots/light_screenie.png)

css/_auto/custom_auto.css

@@ -115,6 +115,23 @@
         --color-pink-subtle: var(--color-pink-light);
         --color-brown-subtle: var(--color-brown-light);
         --color-black-subtle: var(--color-black-light);
+        /* contrasty colors */
+        --color-red-contrast: var(--color-red-dark-2);
+        --color-orange-contrast: var(--color-orange-dark-2);
+        --color-yellow-contrast: var(--color-yellow-dark-2);
+        --color-olive-contrast: var(--color-olive-dark-2);
+        --color-green-contrast: var(--color-green-dark-2);
+        --color-teal-contrast: var(--color-teal-dark-2);
+        --color-blue-contrast: var(--color-blue-dark-2);
+        --color-violet-contrast: var(--color-violet-dark-2);
+        --color-purple-contrast: var(--color-purple-dark-2);
+        --color-pink-contrast: var(--color-pink-dark-2);
+        --color-brown-contrast: var(--color-brown-dark-2);
+        --color-black-contrast: var(--color-black-dark-2);
+        --color-white-contrast: #bcbcbc;
+        --color-beige-contrast: #a0a084;
+        --color-navy-contrast: #000080;
+        --color-maroon-contrast: #800000;
         /* ansi colors used for actions console and console files */
         --color-ansi-black: #1e2327;
         --color-ansi-red: #cc4848;
@@ -234,4 +251,8 @@
     .i-upload::before {
         filter: brightness(0);
     }
+
+    .approvebg {
+        background: #ffa4a4;
+    }
 }

css/_dark/index_dark.css

@@ -160,6 +160,23 @@
 	--color-pink-subtle: var(--color-pink-dark-2);
 	--color-brown-subtle: var(--color-brown-dark-2);
 	--color-black-subtle: var(--color-black-dark-2);
+	/* contrasty colors */
+	--color-red-contrast: var(--color-red-light);
+	--color-orange-contrast: var(--color-orange-light);
+	--color-yellow-contrast: var(--color-yellow-light);
+	--color-olive-contrast: var(--color-olive-light);
+	--color-green-contrast: var(--color-green-light);
+	--color-teal-contrast: var(--color-teal-light);
+	--color-blue-contrast: var(--color-blue-light);
+	--color-violet-contrast: var(--color-violet-light);
+	--color-purple-contrast: var(--color-purple-light);
+	--color-pink-contrast: var(--color-pink-light);
+	--color-brown-contrast: var(--color-brown-light);
+	--color-black-contrast: var(--color-black-light);
+	--color-white-contrast: #ffffff;
+	--color-beige-contrast: #f5f5dc;
+	--color-navy-contrast: #3535b4;
+	--color-maroon-contrast: #973333;
 	/* ansi colors used for actions console and console files */
 	--color-ansi-black: #1e2327;
 	--color-ansi-red: #cc4848;
@@ -1438,7 +1455,7 @@ div.bbc_footnotes .meaction {}
 
 /* Colors for background of posts requiring approval */
 .approvebg {
-	background: #FFF5CD;
+	background: #220505;
 }
 
 .poster .name {
@@ -2196,6 +2213,70 @@ li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {
 	border-bottom: none;
 }
 
+/* -------------------------------------------------------
+ * Font colors
+ * -------------------------------------------------------
+ */
+.bbc_color[style="color: red;"] {
+	color: var(--color-red-contrast) !important;
+}
+
+.bbc_color[style="color: yellow;"] {
+	color: var(--color-yellow-contrast) !important;
+}
+
+.bbc_color[style="color: pink;"] {
+	color: var(--color-pink-contrast) !important;
+}
+
+.bbc_color[style="color: green;"] {
+	color: var(--color-green-contrast) !important;
+}
+
+.bbc_color[style="color: orange;"] {
+	color: var(--color-orange-contrast) !important;
+}
+
+.bbc_color[style="color: purple;"] {
+	color: var(--color-purple-contrast) !important;
+}
+
+.bbc_color[style="color: blue;"] {
+	color: var(--color-blue-contrast) !important;
+}
+
+.bbc_color[style="color: brown;"] {
+	color: var(--color-brown-contrast) !important;
+}
+
+.bbc_color[style="color: teal;"] {
+	color: var(--color-teal-contrast) !important;
+}
+
+.bbc_color[style="color: limegreen;"] {
+	color: var(--color-olive-contrast) !important;
+}
+
+.bbc_color[style="color: beige;"] {
+	color: var(--color-beige-contrast) !important;
+}
+
+.bbc_color[style="color: navy;"] {
+	color: var(--color-navy-contrast) !important;
+}
+
+.bbc_color[style="color: maroon;"] {
+	color: var(--color-maroon-contrast) !important;
+}
+
+.bbc_color[style="color: black;"] {
+	color: var(--color-secondary-dark-11) !important;
+}
+
+.bbc_color[style="color: white;"] {
+	color: var(--color-secondary-dark-1) !important;
+}
+
 /* -------------------------------------------------------
  * Cookie
  * -------------------------------------------------------

css/_dark/jquery.sceditor.elk_dark.css

@@ -238,6 +238,66 @@
 	border: 2px solid #333333;
 }
 
+.sceditor-color-option[style="background-color: red"] {
+	background-color: var(--color-red-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: yellow"] {
+	background-color: var(--color-yellow-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: pink"] {
+	background-color: var(--color-pink-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: green"] {
+	background-color: var(--color-green-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: orange"] {
+	background-color: var(--color-orange-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: purple"] {
+	background-color: var(--color-purple-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: blue"] {
+	background-color: var(--color-blue-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: brown"] {
+	background-color: var(--color-brown-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: teal"] {
+	background-color: var(--color-teal-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: limegreen"] {
+	background-color: var(--color-olive-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: beige"] {
+	background-color: var(--color-beige-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: navy"] {
+	background-color: var(--color-navy-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: maroon"] {
+	background-color: var(--color-maroon-contrast) !important;
+}
+
+.sceditor-color-option[style="background-color: black"] {
+	background-color: var(--color-secondary-dark-11) !important;
+}
+
+.sceditor-color-option[style="background-color: white"] {
+	background-color: var(--color-secondary-dark-1) !important;
+}
+
 .sceditor-toolbar {
 	overflow: hidden;
 

css/prettify.css

@@ -8,31 +8,31 @@
 
 @media screen {
   /* string content */
-  .str {color: #b5bd68;}
+  .str {color: var(--color-olive-contrast);}
   /* keyword */
-  .kwd {color: #b294bb;}
+  .kwd {color: var(--color-violet-contrast);}
   /* comment */
-  .com {color: #969896;}
+  .com {color: var(--color-text-light-3);}
   /* type name */
-  .typ {color: #81a2be;}
+  .typ {color: var(--color-teal-contrast);}
   /* literal value */
-  .lit {color: #de935f;}
+  .lit {color: var(--color-orange-contrast);}
   /* punctuation */
-  .pun {color: #c5c8c6;}
+  .pun {color: var(--color-text-light-2);}
   /* lisp open bracket */
-  .opn {color: #c5c8c6;}
+  .opn {color: var(--color-text-dark);}
   /* lisp close bracket */
-  .clo {color: #c5c8c6;}
+  .clo {color: var(--color-text-dark);}
   /* markup tag name */
-  .tag {color: #cc6666;}
+  .tag {color: var(--color-red-contrast);}
   /* markup attribute name */
-  .atn {color: #de935f;}
+  .atn {color: var(--color-yellow-contrast);}
   /* markup attribute value */
-  .atv {color: #8abeb7;}
+  .atv {color: var(--color-green-contrast);}
   /* declaration */
-  .dec {color: #de935f;}
+  .dec {color: var(--color-pink-contrast);}
   /* variable name */
-  .var {color: #cc6666;}
+  .var {color: var(--color-blue-contrast);}
   /* function name */
-  .fun {color: #81a2be;}
+  .fun {color: var(--color-brown-contrast);}
 }

index.template.php

@@ -172,9 +172,9 @@ function template_html_above()
 
 	// Show all the relative links, such as help, search, contents, and the like.
 	echo '
-	<link rel="shortcut icon" sizes="196x196" href="' . $context['favicon'] . '" />
 	<link rel="apple-touch-icon" sizes="144x144" href="' . $context['favicon'] . '.apple.144.png" />
 	<link rel="apple-touch-icon" sizes="180x180" href="' . $context['favicon'] . '.apple.png" />
+	<link rel="shortcut icon" sizes="196x196" href="' . $context['favicon'] . '" />
 	<link rel="help" href="', $scripturl, '?action=help" />
 	<link rel="contents" href="', $scripturl, '" />', ($context['allow_search'] ? '
 	<link rel="search" href="' . $scripturl . '?action=search" />' : '');

theme_info.xml

@@ -2,7 +2,7 @@
 	<theme-info xmlns="https://www.elkarte.net/site/theme-info" xmlns:elk="https://www.elkarte.net/">
 		<!-- For the id, always use something unique - put your name, a colon, and then the package name. -->
 		<id>artix:Artix</id>
-		<version>1.2.7</version>
+		<version>1.2.11</version>
 		<!-- Theme name, used purely for aesthetics. -->
 		<name>Artix</name>
 		<!-- Author: your email address or contact information. The name attribute is optional. -->