Aesthetic update.

Changelog excerpt:
- Added the ability to change the "mode" of the configured theme, thus
  enabling any singular theme to have some slight variation in its
  potential presentation. Two new configuration directives have been added
  to facilitate this (look for "theme_mode" under "frontend" and "web"
  respectively, directly under the existing "theme" configuration
  directives). For now, the available "modes" are just "normal" and
  "inverted" (the latter inverting the tone of the colours/lighting used by
  the theme).

Author: Maikuolan

Changelog.md

@@ -204,3 +204,4 @@ __*Why "v3.0.0" instead of "v1.0.0?"*__ Prior to phpMussel v3, the "phpMussel Co
 - [2025.07.05]: Aesthetic patch.
 - [2025.07.08]: Added the ability to route all outbound requests through a proxy, and two new configuration directives, `request_proxy` and `request_proxyauth`.
 - [2025.08.01]: Slightly improved the navigation SVGs.
+- [2025.08.08]: Added the ability to change the "mode" of the configured theme, thus enabling any singular theme to have some slight variation in its potential presentation. Two new configuration directives have been added to facilitate this (look for `theme_mode` under `frontend` and `web` respectively, directly under the existing `theme` configuration directives). For now, the available "modes" are just "normal" and "inverted" (the latter inverting the tone of the colours/lighting used by the theme).

assets/bluemetal/frontend.css

@@ -1,4 +1,4 @@
-:root{color-scheme:dark}
+:root{color-scheme:dark{theme_mode_effects}}
 *{vertical-align:text-top}
 body,input,select,textarea,.idx{font-size:calc((12px * {magnification}) + .03vw)}
 body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#333;color:#cde;background-image:url(data:image/gif;base64,R0lGODdhAwADAIACADMzM1VicCwAAAAAAwADAAACBIQRBwUAOw==);background-attachment:fixed}
@@ -83,15 +83,15 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
 li>span.comCat:first-child,input[type=file]::file-selector-button{cursor:pointer}
-.comCat::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
+.comCat::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
 .caret-down::before{animation:forRotate .2s linear 1;animation-fill-mode:both}
 .caret-up::before{animation:revRotate .2s linear 1;animation-fill-mode:both}
 .comSub{overflow:hidden;transform:scaleY(0);transform-origin:top;opacity:0;max-height:0;transition:all .5s ease-out}
 .active{transform:scaleY(1);transform-origin:top;opacity:1;max-height:99999px;transition:all .3s ease-in}
 blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
-@keyframes forRotate{0%{transform:rotate(0)}100%{transform:rotate({45deg})}}
-@keyframes revRotate{0%{transform:rotate({45deg})}100%{transform:rotate(0)}}
-.navicon{display:inline-block;filter:invert(85%) saturate(1074%) hue-rotate(-154deg) brightness(100%) contrast(87%);position:relative;top:1px;width:16px;height:16px}
+@keyframes forRotate{0%{transform:rotate(0) translate(0, 0) scaleX(1)}100%{transform:rotate({45deg}) {caretTransform}}}
+@keyframes revRotate{0%{transform:rotate({45deg}) {caretTransform}}100%{transform:rotate(0) translate(0, 0) scaleX(1)}}
+.navicon,a.showlink[onclick]::before,a.shownlink[onclick]::before,a.unshownlink[onclick]::before{display:inline-block;filter:invert(85%) saturate(1074%) hue-rotate(-154deg) brightness(100%) contrast(87%);position:relative;top:1px;width:16px;height:16px}
 a:hover>.navicon,a:active>.navicon,a:focus>.navicon{filter:invert(91%) sepia(87%) saturate(611%) hue-rotate(-62deg) brightness(100%) contrast(109%)}
 select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=submit]{height:20px;margin-{FE_Align}:-3px;border-bottom-{FE_Align}-radius:0;border-top-{FE_Align}-radius:0;padding-{FE_Align}:3px}
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
@@ -122,7 +122,7 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .configMatrixLabel.gridVB{background:linear-gradient(0deg,rgba(127,191,251,.35),rgba(0,0,0,0))}
 .warning::before,.warning::after{content:"⚠️";font-size:24px;display:inline;line-height:100%;position:relative;top:2px}
 .warning{display:inline-block;margin:4px;font-weight:700;color:#fca;background:linear-gradient({90deg},rgba(0,128,192,0) 0,rgba(0,128,192,.8) 20% 80%,rgba(0,128,192,0) 100%);line-height:100%}
-.showlink::before,.shownlink::before,.unshownlink::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px}
+.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px}
 .shownlink::before{animation:forRotate .5s ease-out 1;animation-fill-mode:both}
 .unshownlink::before{animation:revRotate .5s ease-out 1;animation-fill-mode:both}
 .subNav{text-align:center;font-size:calc((10px * {magnification}) + .03vw);color:rgba(204,221,238,.6);text-shadow:2px 2px 1px rgba(255,255,255,.2)}

assets/config.yml

@@ -7,7 +7,7 @@
 # License: GNU/GPLv2
 # @see LICENSE.txt
 #
-# This file: Configuration defaults file (last modified: 2024.06.26).
+# This file: Configuration defaults file (last modified: 2025.08.08).
 ##/
 
 frontend:
@@ -89,6 +89,16 @@ frontend:
    primerdark: "Primer Dark"
    rbi: "Red-Blue Inverted"
    slate: "Slate"
+ theme_mode:
+  type: "string"
+  default: "normal"
+  choices:
+   normal: "label.Normal"
+   inverted: "label.Inverted"
+  effects:
+   inverted: ";filter:invert(1) hue-rotate(-180deg)"
+  preview: "js:const root=document.documentElement;function config_frontend_theme_mode_function(){var sR=document.querySelector('input[name="config_frontend_theme_mode"]:checked');if(sR){root.style.filter=sR.value==='inverted'?'invert(1) hue-rotate(-180deg)':'none'}}"
+  style: "radio"
  magnification:
   type: "float"
   step: "any"

assets/default/caret.svg

@@ -1,4 +1,4 @@
-:root{color-scheme:light}
+:root{color-scheme:light{theme_mode_effects}}
 *{vertical-align:text-top}
 body,input,select,textarea,.idx{font-size:calc((12px * {magnification}) + .03vw)}
 body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#ccc;color:#033}
@@ -87,15 +87,15 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
 li>span.comCat:first-child,input[type=file]::file-selector-button{cursor:pointer}
-.comCat::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
+.comCat::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
 .caret-down::before{animation:forRotate .2s linear 1;animation-fill-mode:both}
 .caret-up::before{animation:revRotate .2s linear 1;animation-fill-mode:both}
 .comSub{overflow:hidden;transform:scaleY(0);transform-origin:top;opacity:0;max-height:0;transition:all .5s ease-out}
 .active{transform:scaleY(1);transform-origin:top;opacity:1;max-height:99999px;transition:all .3s ease-in}
 blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
-@keyframes forRotate{0%{transform:rotate(0)}100%{transform:rotate({45deg})}}
-@keyframes revRotate{0%{transform:rotate({45deg})}100%{transform:rotate(0)}}
-.navicon{display:inline-block;filter:invert(12%) sepia(91%) saturate(1979%) hue-rotate(222deg) brightness(107%) contrast(94%);position:relative;top:1px;width:16px;height:16px}
+@keyframes forRotate{0%{transform:rotate(0) translate(0, 0) scaleX(1)}100%{transform:rotate({45deg}) {caretTransform}}}
+@keyframes revRotate{0%{transform:rotate({45deg}) {caretTransform}}100%{transform:rotate(0) translate(0, 0) scaleX(1)}}
+.navicon,a.showlink[onclick]::before,a.shownlink[onclick]::before,a.unshownlink[onclick]::before{display:inline-block;filter:invert(12%) sepia(91%) saturate(1979%) hue-rotate(222deg) brightness(107%) contrast(94%);position:relative;top:1px;width:16px;height:16px}
 a:hover>.navicon,a:active>.navicon,a:focus>.navicon{filter:invert(33%) sepia(54%) saturate(1938%) hue-rotate(212deg) brightness(103%) contrast(108%)}
 select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=submit]{margin-{FE_Align}:-3px;border-bottom-{FE_Align}-radius:0;border-top-{FE_Align}-radius:0;padding-{FE_Align}:3px}
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
@@ -126,7 +126,7 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .configMatrixLabel.gridVB{background:linear-gradient(0deg,rgba(251,191,127,.7),rgba(0,0,0,0))}
 .warning::before,.warning::after{content:"⚠️";font-size:24px;display:inline;line-height:100%;position:relative;top:2px}
 .warning{display:inline-block;margin:4px;font-weight:700;color:red;background:linear-gradient({90deg},rgba(255,192,0,0) 0,rgba(255,192,0,.8) 20% 80%,rgba(255,192,0,0) 100%);line-height:100%}
-.showlink::before,.shownlink::before,.unshownlink::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px}
+.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px}
 .shownlink::before{animation:forRotate .5s ease-out 1;animation-fill-mode:both}
 .unshownlink::before{animation:revRotate .5s ease-out 1;animation-fill-mode:both}
 .subNav{text-align:center;font-size:calc((10px * {magnification}) + .03vw);color:rgba(0,51,51,.6);text-shadow:2px 2px 1px rgba(0,0,0,.2)}

assets/default/frontend.css

@@ -4,7 +4,7 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="robots" content="noindex,nofollow" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" type="text/css" href="?phpmussel-page=css&theme={theme}" />
+  <link rel="stylesheet" type="text/css" href="?phpmussel-page=css&theme={theme}&theme-mode={theme_mode}" />
   <link rel="shortcut icon" type="image/png" href="?phpmussel-page=favicon" />
   <title>{FE_Title}</title>
 </head>

assets/default/frontend.html

@@ -1,4 +1,4 @@
-:root{color-scheme:dark}
+:root{color-scheme:dark{theme_mode_effects}}
 *{vertical-align:text-top}
 body,input,select,textarea{font-size:calc((12px * {magnification}) + .03vw);background-repeat:no-repeat}
 body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#36393b;color:#c5bc8e;background-image:url('?phpmussel-asset=moon.jpg&theme={theme}');background-attachment:fixed;background-position:center center}
@@ -78,14 +78,14 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
 li>span.comCat:first-child,input[type=file]::file-selector-button{cursor:pointer}
-.comCat::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
+.comCat::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
 .caret-down::before{animation:forRotate .2s linear 1;animation-fill-mode:both}
 .caret-up::before{animation:revRotate .2s linear 1;animation-fill-mode:both}
 .comSub{overflow:hidden;transform:scaleY(0);transform-origin:top;opacity:0;max-height:0;transition:all .5s ease-out}
 .active{transform:scaleY(1);transform-origin:top;opacity:1;max-height:99999px;transition:all .3s ease-in}
 blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
-@keyframes forRotate{0%{transform:rotate(0)}100%{transform:rotate({45deg})}}
-@keyframes revRotate{0%{transform:rotate({45deg})}100%{transform:rotate(0)}}
+@keyframes forRotate{0%{transform:rotate(0) translate(0, 0) scaleX(1)}100%{transform:rotate({45deg}) {caretTransform}}}
+@keyframes revRotate{0%{transform:rotate({45deg}) {caretTransform}}100%{transform:rotate(0) translate(0, 0) scaleX(1)}}
 select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=submit]{height:20px;margin-{FE_Align}:-3px;border-bottom-{FE_Align}-radius:0;border-top-{FE_Align}-radius:0;padding-{FE_Align}:3px}
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
 select,input[type=submit],input[type=reset],input[type=button],input[type=file]::file-selector-button,input[type=text],input[type=password],input[type=number],input[type=date],input[type=time],button{box-sizing:border-box;height:20px;padding-top:0;padding-bottom:0}
@@ -115,7 +115,7 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .configMatrixLabel.gridVB{background:linear-gradient(0deg,rgba(251,191,127,.35),rgba(0,0,0,0))}
 .warning::before,.warning::after{content:"⚠️";font-size:24px;display:inline;line-height:100%;position:relative;top:2px}
 .warning{display:inline-block;margin:4px;font-weight:700;color:#e7ab7d;background:linear-gradient({90deg},rgba(128,92,0,0) 0,rgba(128,92,0,.8) 20% 80%,rgba(128,92,0,0) 100%);line-height:100%}
-.showlink::before,.shownlink::before,.unshownlink::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px}
+.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px}
 .shownlink::before{animation:forRotate .5s ease-out 1;animation-fill-mode:both}
 .unshownlink::before{animation:revRotate .5s ease-out 1;animation-fill-mode:both}
 input[type=button].reset{background:none;cursor:pointer;border:none;padding:0 12px 0 12px;margin:0;width:auto;color:#e7ab7d}

assets/fullmoon/frontend.css

@@ -4,7 +4,7 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="robots" content="noindex,nofollow" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" type="text/css" href="?phpmussel-page=css&theme={theme}" />
+  <link rel="stylesheet" type="text/css" href="?phpmussel-page=css&theme={theme}&theme-mode={theme_mode}" />
   <link rel="shortcut icon" type="image/png" href="?phpmussel-page=favicon" />
   <title>{FE_Title}</title>
 </head>

assets/fullmoon/frontend.html

@@ -1,4 +1,4 @@
-:root{color-scheme:normal}
+:root{color-scheme:normal{theme_mode_effects}}
 *{vertical-align:text-top}
 body,input,select,textarea,.idx{font-size:calc((12px * {magnification}) + .03vw);background-repeat:no-repeat}
 body{font-family:'Tahoma','Verdana','Noto Sans','Arial';letter-spacing:1px;text-decoration:none;border-style:none;margin:0;white-space:normal;background-color:#789048;background-image:url('?phpmussel-asset=bg.png&theme={theme}');background-attachment:fixed;background-position:left bottom;color:#303c24}
@@ -84,15 +84,15 @@ input[id=homebutton]{border-top-{FE_Align_Reverse}-radius:0;border-bottom-{FE_Al
 .exp{color:#ff0;background-color:#f00}
 .pieul{list-style-type:none;margin:0;padding:0}
 li>span.comCat:first-child,input[type=file]::file-selector-button{cursor:pointer}
-.comCat::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
+.comCat::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px;line-height:100%;cursor:pointer}
 .caret-down::before{animation:forRotate .2s linear 1;animation-fill-mode:both}
 .caret-up::before{animation:revRotate .2s linear 1;animation-fill-mode:both}
 .comSub{overflow:hidden;transform:scaleY(0);transform-origin:top;opacity:0;max-height:0;transition:all .5s ease-out}
 .active{transform:scaleY(1);transform-origin:top;opacity:1;max-height:99999px;transition:all .3s ease-in}
 blockquote.comSub{margin:-2px 0 0 0;padding:0 0 0 0}
-@keyframes forRotate{0%{transform:rotate(0)}100%{transform:rotate({45deg})}}
-@keyframes revRotate{0%{transform:rotate({45deg})}100%{transform:rotate(0)}}
-.navicon{display:inline-block;filter:invert(27%) sepia(5%) saturate(2258%) hue-rotate(-46deg) brightness(97%) contrast(85%);position:relative;top:1px;width:16px;height:16px}
+@keyframes forRotate{0%{transform:rotate(0) translate(0, 0) scaleX(1)}100%{transform:rotate({45deg}) {caretTransform}}}
+@keyframes revRotate{0%{transform:rotate({45deg}) {caretTransform}}100%{transform:rotate(0) translate(0, 0) scaleX(1)}}
+.navicon,a.showlink[onclick]::before,a.shownlink[onclick]::before,a.unshownlink[onclick]::before{display:inline-block;filter:invert(27%) sepia(5%) saturate(2258%) hue-rotate(-46deg) brightness(97%) contrast(85%);position:relative;top:1px;width:16px;height:16px}
 a:hover>.navicon,a:active>.navicon,a:focus>.navicon{filter:invert(40%) sepia(6%) saturate(1564%) hue-rotate(-46deg) brightness(103%) contrast(87%)}
 select+input[type=submit],select+input[type=button],input[name=qkey]+input[type=submit]{height:20px;margin-{FE_Align}:-3px;border-bottom-{FE_Align}-radius:0;border-top-{FE_Align}-radius:0;padding-{FE_Align}:3px}
 input[name=qkey]{margin-{FE_Align}:-3px;padding-{FE_Align}:3px}
@@ -123,7 +123,7 @@ input[type=checkbox]+label,input[type=radio]+label,.gridboxitem>label,.gridboxit
 .configMatrixLabel.gridVB{background:linear-gradient(0deg,rgba(191,251,127,.7),rgba(0,0,0,0))}
 .warning::before,.warning::after{content:"⚠️";font-size:24px;display:inline;line-height:100%;position:relative;top:2px}
 .warning{display:inline-block;margin:4px;font-weight:700;color:#a04848;background:linear-gradient({90deg},rgba(255,192,0,0) 0,rgba(255,192,0,.8) 20% 80%,rgba(255,192,0,0) 100%);line-height:100%}
-.showlink::before,.shownlink::before,.unshownlink::before{content:"➖";display:inline-block;margin-{FE_Align_Reverse}:6px}
+.showlink::before,.shownlink::before,.unshownlink::before{content:"";width:16px;height:16px;background-image:url(data:image/svg+xml;base64,{Base64Encode}{Asset:caret.svg}{/Base64Encode});background-repeat:no-repeat;background-position:top 2px center;display:inline-block;margin-{FE_Align_Reverse}:6px}
 .shownlink::before{animation:forRotate .5s ease-out 1;animation-fill-mode:both}
 .unshownlink::before{animation:revRotate .5s ease-out 1;animation-fill-mode:both}
 .subNav{text-align:center;font-size:calc((10px * {magnification}) + .03vw);color:rgba(48,60,36,.6);text-shadow:2px 2px 1px rgba(0,0,0,.2)}