From c85b1fc98865dfe34b767eb9d1784469dc6f3428 Mon Sep 17 00:00:00 2001 From: Levi Morrison Date: Wed, 29 Jun 2022 09:30:45 -0600 Subject: [PATCH] Improve contrast for dark mode phpinfo Also use CSS variable names; all browsers I can find that support the prefers-color-scheme media query also support CSS variables. Also do some minor updates like the background texture. --- ext/standard/css.c | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/ext/standard/css.c b/ext/standard/css.c index 2daafb61426c0..c83a0790e7beb 100644 --- a/ext/standard/css.c +++ b/ext/standard/css.c @@ -17,6 +17,15 @@ #include "php.h" #include "info.h" + +/* Encoded from (without newlines): + + + + */ +#define BACKGROUND_SVG_ENCODED \ + "%3Csvg%20xmlns%3D%27https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%274%27%20height%3D%274%27%3E%3Cpath%20style%3D%27stroke%3A%23000%3Bstroke-width%3A.5%3Bstroke-opacity%3A.25%27%20d%3D%27M%200%2C0%204%2C4%20M%200%2C4%204%2C0%27%2F%3E%3C%2Fsvg%3E" + PHPAPI ZEND_COLD void php_info_print_css(void) /* {{{ */ { PUTS("body {background-color: #fff; color: #222; font-family: sans-serif;}\n"); @@ -38,13 +47,17 @@ PHPAPI ZEND_COLD void php_info_print_css(void) /* {{{ */ PUTS(".v i {color: #999;}\n"); PUTS("img {float: right; border: 0;}\n"); PUTS("hr {width: 934px; background-color: #ccc; border: 0; height: 1px;}\n"); - PUTS("@media (prefers-color-scheme: dark) {\n"); - PUTS(" body {background-color: #333; color: #ddd;}\n"); - PUTS(" td, th {border-color: #777;}\n"); - PUTS(" .e {background-color: #4F5B93;}\n"); - PUTS(" .h {background-color: #5b69a6;}\n"); - PUTS(" .v {background-color: #444;}\n"); - PUTS(" hr {background-color: #777;}\n"); - PUTS("}\n"); + PUTS(":root {--php-dark-grey: #333; --php-dark-blue: #4F5B93; --php-medium-blue: #8892BF; --php-light-blue: #E2E4EF; --php-accent-purple: #793862}"); + PUTS( + "@media (prefers-color-scheme: dark) {\n" + " body {background: var(--php-dark-grey) url('data:image/svg+xml;utf8," BACKGROUND_SVG_ENCODED "'); color: var(--php-light-blue)}\n" + " .h td, td.e, th {border-color: #606A90}\n" + " td {border-color: #505153}\n" + " .e {background-color: #404A77}\n" + " .h {background-color: var(--php-dark-blue)}\n" + " .v {background-color: var(--php-dark-grey)}\n" + " hr {background-color: #505153}\n" + "}\n" + ); } /* }}} */