TablePress Dark Mode Solution (for Dark Mode Only)

  • Resolved whygames

    (@whygames)


    2 years, 1 month ago

    Hello.
    I’m relatively new to WordPress and I’m trying to get my TablePress table to look nice in both Light and Dark mode.

    I found this thread that offers a great solution, but it seems to change my TablePress table even when not in Dark mode.

    @media (prefers-color-scheme: dark) {

	.tablepress thead th {
		background: #336699;
	}

	.tablepress .odd td {
		background: #4d4d4d;
	}

	.tablepress .even td {
		background: #3a3a3a;
	}

	.tablepress tbody td,
	.tablepress tfoot th {
		border-top: 1px solid #666;
	}

}

    I’ve tried using the solution provided above in the Custom CSS in the Theme, as well as in the TablePress Plugin, but the same happens.

    I know this is not an issue with TablePress, but does anyone have any ideas how to implement this ONLY when Dark mode is active?
    I’m using a WordPress theme, so didn’t set up the Dark mode myself.
    Thanks.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    2 years, 1 month ago

    Hi,

    thanks for your post, and sorry for the trouble.

    I just tested this on my dev machine (a MacBook) and the CSS is working fine. I added this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress, and when I now toggle the dark mode setting in the MacOS system settings, the colors switch back and forth as expected…

    Note that most browsers have a separate setting for dark mode (that can basically override the OS system setting), so you might want to check that that is not set to dark mode explicitly.

    Regards,
    Tobias

    Thread Starter whygames

    (@whygames)

    2 years, 1 month ago

    @tobiasbg Hello, thank you for replying. I appreciate your time.

    I see. I’ve just tested on my MacBook and you are correct, the CSS above works as expected when the MacOS is switched between Light and Dark mode.

    I guess it’s a theme issue, as in Mobile (or thin Browsers), an Icon appears and allows switching to a Dark Mode. It’s at this point it no-longer works.

    I will have to try and figure out a way to include the table in the Themes Dark Mode settings, or even just to exclude the text from the table when switch.

    Thanks again.

    Plugin Author TobiasBg

    (@tobiasbg)

    2 years, 1 month ago

    Hi,

    ah, now I see. Indeed, this icon does not use the native OS/browser dark mode setting, but is a custom one.
    Essentially, it works by toggling a CSS class on the HTML element to site-s-dark. Thus, you can use that in your “Custom CSS”:

    .site-s-dark .tablepress thead th {
	background: #336699;
}

.site-s-dark .tablepress .odd td {
	background: #4d4d4d;
}

.site-s-dark .tablepress .even td {
	background: #3a3a3a;
}

.site-s-dark .tablepress tbody td,
.site-s-dark .tablepress tfoot th {
	border-top: 1px solid #666;
}

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘TablePress Dark Mode Solution (for Dark Mode Only)’ is closed to new replies.