In this livestream, Iโm taking my first look at creating a dark mode template for Joomla using Template Creator CK from joomlack.fr Join me as I experiment, test, and build โ and see what itโs like to work with this tool in real time.
00:00:00 - Intro & Stream Troubles
00:02:49 - Cribbage Story & Background Explanation
00:05:08 - Today's Topic: Dark Mode with Template Creator CK
00:06:27 - Switching to Light Mode for Clarity
00:09:22 - Template Creator CK & Dark Mode Instructions
00:12:16 - Creating a Staging Site & First Experiment
00:15:53 - Planning the Dark Mode Color Scheme
00:22:03 - The Rise of AI in Joomla Extensions
00:24:59 - Manually Adjusting Colors in Template Creator CK
00:31:09 - Fixing Logo Issues & Custom CSS
00:37:40 - Troubleshooting a White Bar (CSS Specificity)
00:42:33 - Checking Accessibility for Dark Mode
00:51:44 - Changing Link Hover Colors
01:01:24 - Browser Caching Issues & Refresh
01:06:51 - Debugging and Applying More CSS Changes
01:12:28 - The Importance of Using Template Settings Over Custom CSS
01:15:48 - Testing in Firefox & Mobile View
01:19:05 - Mysterious Padding/Margin Issue
01:25:00 - Working on Menus & Other Site Elements
01:29:30 - Final Thoughts on the Process
01:32:35 - Wrapping Up & Upcoming Streams
Summary
Create a Staging Environment:
Always work on a copy of your live site to avoid breaking it during development.
Access the Variant Feature:
In Template Creator CK, navigate to the template and click the "Variant" button to create a new "Dark Mode" variant.
Switch to Editing Dark Mode:
Enter the dark mode editing view. Changes made here will only apply when the user's operating system is in dark mode.
Plan Your Color Scheme:
Decide on a dark color palette, often using darker versions of your existing brand colors for consistency.
Manually Adjust Global Elements:
Use the template's style interface to change background colors, text colors, and link colors for major wrappers and blocks (e.g., page background, content blocks, footer).
Address Images and Logos:
Ensure logos have transparent backgrounds (e.g., use SVG format) so they display correctly on dark backgrounds without a white box.
Add Custom CSS for Specific Elements:
Use the "Custom CSS for Dark Mode" field to override styles for third-party extensions (like Raxo) or complex elements that can't be easily changed in the basic interface.
Test for Accessibility:
Check color contrast ratios between your new background and text colors to ensure readability and meet accessibility standards.
Thoroughly Test Across the Site:
Check various pages, menus, and modules to ensure the dark mode styles are applied consistently everywhere.
Test on Different Browsers & Devices:
Verify that the dark mode displays correctly in various browsers (Chrome, Firefox) and on mobile devices.
Please send any feedback or bug reports or queries to;
Contact Tim Davis โบ
Joomla Training Cohort โบ https://cybersalt.com/jtc
Add comment