colors for code block: light theme

css/_auto/custom_auto.css

@@ -115,6 +115,19 @@
         --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);
         /* ansi colors used for actions console and console files */
         --color-ansi-black: #1e2327;
         --color-ansi-red: #cc4848;
@@ -209,6 +222,11 @@
         --color-highlight-fg: #eed200;
         --color-highlight-bg: #fffbdd;
         --color-overlay-backdrop: #080808c0;
+        --color-sceditor-button: #dddddd;
+        --color-sceditor-button-hover: #bbbbbb;
+	    --color-sceditor-button-active: #aaaaaa;
+        --color-sceditor-button-border: #777777;
+        --color-sceditor-button-border-bottom: #666666;
         accent-color: var(--color-accent);
         color-scheme: light;
     }
@@ -225,4 +243,8 @@
     .i-rss::before {
         filter: initial;
     }
+
+    .i-upload::before {
+        filter: brightness(0);
+    }
 }

css/_dark/index_dark.css

@@ -160,6 +160,19 @@
 	--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);
 	/* ansi colors used for actions console and console files */
 	--color-ansi-black: #1e2327;
 	--color-ansi-red: #cc4848;
@@ -254,6 +267,11 @@
 	--color-highlight-fg: #87651e;
 	--color-highlight-bg: #352c1c;
 	--color-overlay-backdrop: #080808c0;
+	--color-sceditor-button: #999999;
+	--color-sceditor-button-hover: #bbbbbb;
+	--color-sceditor-button-active: #eeeeee;
+	--color-sceditor-button-border: #dfdfdf;
+	--color-sceditor-button-border-bottom: #dddddd;
 	accent-color: var(--color-accent);
 	color-scheme: dark;
 }
@@ -1357,7 +1375,7 @@ div.bbc_footnotes .meaction {}
 }
 
 .topic_stats {
-	color: var(--color-secondary);
+	color: var(--color-secondary-dark-6);
 }
 
 .qaction_row {
@@ -1578,13 +1596,13 @@ div.bbc_footnotes .meaction {}
 
 #postAdditionalOptionsHeader,
 #postDraftOptionsHeader {
-	border-color: #2F2F2F;
-	background: var(--color-body) linear-gradient(to bottom, #1A1A1A 0%, #222222 100%);
+	border-color: var(--color-secondary-dark-3);
+	background: var(--color-card);
 }
 
 #postAdditionalOptions,
 #postDraftOptions {
-	border-color: #2F2F2F;
+	border-color: var(--color-secondary-dark-3);
 	border-top-color: transparent;
 	background: var(--color-body);
 }
@@ -1595,13 +1613,13 @@ div.bbc_footnotes .meaction {}
 }
 
 .drop_area {
-	color: #444444;
-	border-color: #CCCCCC;
-	background-color: rgb(230, 230, 230);
+	color: var(--color-text-dark);
+	border-color: var(--color-text);
+	background-color: var(--color-secondary-light-1);
 }
 
 .drop_area>a {
-	color: #000000;
+	color: var(--color-primary-contrast);
 }
 
 .statusbar {
@@ -1655,7 +1673,7 @@ div.bbc_footnotes .meaction {}
 }
 
 #postMoreOptions {
-	border-top-color: var(--color-secondary);
+	border-top-color: var(--color-secondary-dark-3);
 	background: var(--color-card);
 }
 
@@ -2131,7 +2149,7 @@ li.ui-tab.ui-tabs-active.ui-state-active.ui-state-hover .ui-tabs-anchor {
 
 /* Absolute positioning stops these breaking the bars on narrow screens. */
 .statsbar .righttext {
-	background: #1A1A1A;
+	background: var(--color-body);
 }
 
 #stats {

css/_dark/jquery.sceditor.elk_dark.css

@@ -270,12 +270,16 @@
 
 	cursor: pointer;
 
-	color: #222222;
-	border: 1px solid #BBBBBB;
+	color: var(--color-text);
+	border: 1px solid var(--color-sceditor-button-border);
 	border-right: none;
-	border-bottom: 1px solid #AAAAAA;
-	background: #999999;
-	box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.15) inset;
+	border-bottom: 1px solid var(--color-sceditor-button-border-bottom);
+	background: var(--color-sceditor-button);
+	box-shadow: none;
+}
+
+.sceditor-button:has(+.sceditor-button-space) {
+	border-right: 1px solid var(--color-sceditor-button-border);
 }
 
 .sceditor-button.disabled div {
@@ -285,7 +289,8 @@
 .sceditor-button.disabled:hover {
 	cursor: default;
 
-	background: inherit;
+	background: var(--color-sceditor-button);
+	box-shadow: none;
 }
 
 .sceditor-button div, .sceditor-button {
@@ -303,13 +308,13 @@
 }
 
 .sceditor-button:hover {
-	background: #FAFAFA;
-	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
+	background: var(--color-sceditor-button-hover);
+	box-shadow: none;
 }
 
 .sceditor-button.active {
-	background: #DFFFBF;
-	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2) inset;
+	background: var(--color-sceditor-button-active);
+	box-shadow: none;
 }
 
 .sceditor-button-emoticon {
@@ -334,7 +339,8 @@ a.sceditor-button-space, .sceditor-button-space div {
 	padding: 4px 0;
 
 	border: none;
-	border-left: 1px solid #BBBBBB;
+	border-left: 1px solid transparent;
+	visibility: hidden;
 	background: transparent;
 	box-shadow: none;
 }
@@ -351,7 +357,7 @@ a.sceditor-button-space, .sceditor-button-space div {
 }
 
 .sceditor-button-source.active {
-	background: #FAFAFA;
+	background: var(--color-sceditor-button-active);
 	box-shadow: none;
 }
 

css/icons_svg.css

@@ -259,7 +259,7 @@
 }
 
 .i-upload::before {
-	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23222222' viewBox='0 0 32 32'%3E%3Cpath d='M15 22H0v8h30v-8H15zm13 4h-4v-2h4v2zM7 10l8-8 8 8h-5v10h-6V10z'/%3E%3C/svg%3E");
+	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 32 32'%3E%3Cpath d='M15 22H0v8h30v-8H15zm13 4h-4v-2h4v2zM7 10l8-8 8 8h-5v10h-6V10z'/%3E%3C/svg%3E");
 }
 
 .i-support::before {

css/index.css

@@ -4122,24 +4122,15 @@ dl.merge_topic dd {
 	overflow: auto;
 	margin: 0 0 18px 0;
 	padding: 0 0 15px 0;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	gap: .25em;
 }
 
 #detailedinfo dt, #tracking dt, .profileblock dt {
-	float: left;
-	clear: both;
-	margin: 0 0 3px 0;
-	padding: 0;
-	width: 35%;
 	font-weight: bold;
 }
 
-#detailedinfo dd, #tracking dd, .profileblock dd {
-	float: left;
-	margin: 0 0 3px 0;
-	padding: 0;
-	width: 65%;
-}
-
 .profileblock_signature dd {
 	width: auto;
 	word-wrap: break-word;
@@ -6827,6 +6818,10 @@ a > i {
 		display: none;
 	}
 
+	#detailedinfo dl, #tracking dl, .profileblock dl {
+		display: block;
+	}
+
 	dt, dd, dd label, .login dt, #advanced_search dt {
 		width: 100% !important;
 		margin: 0 !important;

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

@@ -173,6 +173,7 @@ 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="help" href="', $scripturl, '?action=help" />
 	<link rel="contents" href="', $scripturl, '" />', ($context['allow_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.5</version>
+		<version>1.2.8</version>
 		<!-- Theme name, used purely for aesthetics. -->
 		<name>Artix</name>
 		<!-- Author: your email address or contact information. The name attribute is optional. -->