[01:06:05] [discord] I want to make a template-based style that will make text stand out. What's a good color that isn't red? [01:06:11] [discord] And that will be visible in both dark and light mode [01:06:39] [discord] It really depends on your wiki's theme. [01:07:48] [discord] Currently it's uh. It looks like Wikipedia. I forget what that theme is called. [01:09:12] [discord] So default white with grays. Then any color that isn't blue (would be confused with links) and that looks good in your eyes [01:09:53] [discord] I think purple would fit. But that's a blind guess considering I know nothing about where you'll use it :pupCoffeeMH: [01:10:44] [discord] Wait. I know. I can use custom CSS to make it change color depending whether it's in dark mode or light mode. [01:10:47] [discord] idk if one color to suit both modes is really the trick [01:10:57] [discord] yeah, you just realized the alternative :p [01:26:29] [discord] Wait hold on. How does dark mode work here? CSS color names are resulting in different colors than I expecterd [01:26:30] [discord] Wait hold on. How does dark mode work here? CSS color names are resulting in different colors than I expected (edited) [01:30:28] [discord] dark mode is an invert filter [01:30:41] [discord] I don't really care for it myself at all [01:30:57] [discord] a few skins do have a proper dark mode built in, citizen most notably [01:31:06] [discord] dark mode toggle I should say [01:32:57] [discord] What kind of inversion does it do? I tried to give words yellow highlighting and what happened was that I got yellow highdarking [01:34:09] [discord] What's the RGB transformation? [01:37:36] [discord] That I'm not sure, but it's the mediawiki extension DarkMode iirc [02:04:04] [discord] Ah it looks like there's a class you can stick onto things in order to prevent the inversion [05:06:48] [discord] ```css [05:06:49] [discord] filter: invert(1) hue-rotate(180 deg); [05:06:51] [discord] ``` [05:08:14] [discord] Yeah I found the documentation [06:05:36] [discord] This doesn't properly invert the colors and some artifacts are still oresent dues to how those filters are calculated. [06:06:21] [discord] The best way would be to completely disable the filter on the body. That's how our wiki does it. Otherwise you'll get oretty bad inconsistencies between what colors you set and what you see :P [06:07:15] [discord] the code I used to negate the default invert is [06:07:16] [discord] ``` [06:07:18] [discord] /* negate */ [06:07:19] [discord] .client-dark-mode, .client-dark-mode img, .client-dark-mode video, .client-dark-mode svg, .client-dark-mode iframe, .client-dark-mode .mw-no-invert, .client-dark-mode .mw-mmv-overlay, .client-dark-mode .mw-mmv-pre-image, .client-dark-mode .mw-kartographer-map, .client-dark-mode .mw-kartographer-mapDialog-map { [06:07:20] [discord] filter: none; [06:07:22] [discord] -webkit-filter: none; [06:07:23] [discord] } [06:07:24] [discord] ``` [06:07:41] [discord] The best way would be to completely disable the filter on the body. That's how our wiki does it. Otherwise you'll get pretty bad inconsistencies between what colors you set and what you see :P (edited) [06:07:57] [discord] This doesn't properly invert the colors and some artifacts are still present due to how those filters are calculated. (edited) [06:09:13] [discord] Some elements like the search bar need something in addition for it to work, but most elements are back to normal with this