DarkColorScheme-Talk
This space is for User-contributed commentary and notes. Please include your name and a date along with your comment.
Please add new threads at the top.
Can PMWiki create a shadow from a transparent gif?
html.pmDarkTheme .dark-image-invert2 img { filter: invert(1); } /*100%*/
It is amazing to see that the color of the image can be changed with CSS.
I use a text-shadow so when text is on top of a video it is more readable.
Can we use similar filter/mask/whatever to make a drop shadow from a transparent image such as carulli__waltz_em1.gif ?
--gnuzoo
Indeed, you can add there a drop-shadow filter for the non-transparent parts of a picture. Something like this:
html.pmDarkTheme .dark-image-invert2 img { filter: invert(1) drop-shadow(2px 2px 3px #555); }
Adapt the distances 2px, the radius 3px, and the shadow color #555 for your needs. --Petko
More than awesome! Thank you so much. This works!
Transparent image with black staff and notes, etc, changed for dark mode to white,
on top of video, drop shadowed so can read on top of anything, and mouse clicks pass
right through image to video via "img pointer-events: none;", and prints properly
via '@media'
--gnuzoo
PMWiki ColorScheme via URL
Can PMWiki set the ColorScheme via a URL spec?
How about using something like adding "?mode=dark" & "?mode=light" to a URL
for setting the color scheme ? This would be convenient when linking to a
PMWiki website from another website or from a bookmark.
No it can't. This is really a user-centered preference, and for the responsive skin it is set to "auto", as in, the browser preference which can be changed on Firefox in Edit->Settings. Once a user has selected a mode (light, dark, or auto), it is remembered in localStorage, so on subsequent visits the same mode will be used.
On your own wiki, you can change $EnableDarkThemeToggle based on a $_REQUEST/$_COOKIE value, something like this:
if(@$_REQUEST['darkmode']) $_COOKIE['darkmode'] = intval($_REQUEST['darkmode']); if(@$_COOKIE['darkmode']) $EnableDarkThemeToggle = intval($_COOKIE['darkmode']);
Then you link to wiki?darkmode=2 (or 1, or 3, see $EnableDarkThemeToggle). This will only apply to visitors who have never used the toggle icon. --Petko
>> No it can't.
Please, are you saying it is not possible, or that you do not think it should be done?
It is not implemented, so my reply to your question whether it can, was "No it can't". I am not sure if I want it in the core, but it is definitely possible, in fact I wrote it for you. I have yet to find something that would be impossible for PmWiki. ;-) --Petko
>> definitely possible
Thank you so very much! :) gnuzoo
PMWiki Favicon DarkColorScheme
You did a fantastic job changing the PMWiki logo in the upper left corner for DarkColorScheme.
The favicon I made years ago for white/light backgrounds looks really bad in dark mode.
Can you also adjust the PMWiki favicon for DarkColorScheme? Maybe make the background transparent?
gnuzoo
How's this? --Petko Awesome! gnuzoo
To enable it on your wiki, place it in pmwiki/pub, then add to config.php something like this:
$HTMLHeaderFmt['favicon32'] = '<link rel="icon" type="image/svg+xml" href="$PubDirUrl/favicon-32.svg"/>';
It is a little blurry on a browser tab actually no, just my eyesight without glasses is blurry. 8-) --Petko
Screen Blinks
Looking at the PMWiki website and in DarkColorScheme a page will display with a lighter shade of black, and then display with a darker shade of black. This makes every page annoying because it "blinks". Can this be fixed?
OOO NO! I fooled myself. I had Firefox Addon "Dark Mode-Night Eye" enabled and it was causing the blink. Sorry - no fix needed.
Pictures
Dark theme appears to wreck an image with a white background. Am I doing something wrong ?
http://gnuzoo.org/guitarstuff/FerdinandoCarulli/WaltzInE-minor
Your picture has black lines on transparent background. Pictures are not easy, there is no way to automatically invert and hue-rotate a picture and have an acceptable result. There are 2 approaches.
One is to have different pictures, one for the light theme, the other one for the dark theme. Then in the wiki page, you use something like this:
>>onlyLightTheme<< Attach:PicForLightTheme.jpg >>onlyDarkTheme<< Attach:PicForDarkTheme.jpg >><< |
The wikistyles "onlyLightTheme" and "onlyDarkTheme" are already defined in the skin, and they will show only the content that matches the active color theme.
A second approach may work for monochrome pictures (black-on-white, or like yours black-on-transparent). You can define styles to invert the picture when on the dark theme. Something like this.
Add to pub/css/local.css:
html.pmDarkTheme .dark-image-invert img { filter: invert(.928); } /*wikitext*/
html.pmDarkTheme .dark-image-invert1 img { filter: invert(.893); } /*sidebar*/
html.pmDarkTheme .dark-image-invert2 img { filter: invert(1); } /*100%*/
Then in the wiki page, wrap the monochrome picture in the >>dark-image-invert<< wikistyle.
>>dark-image-invert<< Attach:MonochromePic.png Or a small inline icon Attach:icon.png within text. >><< |
The 3 styles I defined above are to match an inverted white to the background of the wiki elements for PmWiki 2.3.31. I'm considering adding these or similar to the responsive skin. --Petko
WOW! Great solution! I used the "invert2" on the image. I also added ".underfloat img { pointer-events: none ; }" to the CSS so on a small screen like an ipad the clicks pass through the image to the video player. I also added "filter: invert(0);" to the CSS "@media print section" so it would print nicely.
Dark theme as default
I reread this several times. I dont see it.
How does one set the DarkColorScheme as the default ?
--gnuzoo
Indeed. Currently the light theme is on by default, but if a user toggles it, their choice should be remembered for subsequent visits (unless cookies and localStorage are disabled in the browser). I am considering adding an option to set the dark theme by default (for the core skin or for other skins). --Petko
How about toss this into the local/config.php
$DefaultColorScheme = 2 ;
or
$DefaultColorScheme = 'dark' ;
--gnuzoo
With 2.3.31, it should be possible to set $EnableDarkThemeToggle to 1 (light), 2 (dark), or 3 (auto -- browser preference) by default. --Petko
Talk page for the DarkColorScheme recipe (users?).