We are pleased to inform you about significant improvements to our website aimed at providing a more tailored and sophisticated user experience. The website has been updated to v2.0.0 and introduces a theme selector and a colour mode selector, offering you the ability to personalise your interaction with our website.
Key features:
1. Website upgrade
This website utilises the Bootstrap framework as the backbone to the website structure. This has been updated from v4.6.0 to v5.3.2. This upgrade bring various improvements and some changes to how the information is being shown. Some minor layout changes have been implemented which uses the screen space more effectively. Where possible the website style and look has not been changed to aid with maintaining familiarity. The main benefit of this upgrade is to implement a dark mode as described below.
2. Theme Selector: Personalising Your Visual Experience
Our new theme selector, powered by Bootswatch themes for Bootstrap v5.3.2, gives you the ability to customise the visual aesthetics of our website. The implementation involves dynamically loading the theme based on user selections from a choice of themes. You may choose your theme using the paint palette icon at the far right of the top navigation menu. By default the existing theme is displayed but if you like to try something different feel free to use the theme selector. There are various themes available to use that vary in colour, line spacing, font and visual design.
3. Colour Mode Selector: Enhancing Visual Comfort
Introducing a colour mode selector that facilitates the choice between light and dark modes. This feature is designed to accommodate different user preferences. If you find that overall brightness of the white background to be too much then dark mode might suit you better. The default is your system preference (auto), however you can manually switch between light and dark modes. To change the colour mode use the sun/ moon icon at the far right of the top navigation menu
Additional Considerations:
- Visibility: The formatting of the website content is tailored according to the selected theme for optimal contrast and legibility across all themes.
- Efficient Loading: Themes load swiftly and page content shouldn’t be displayed while themes are being switched, maintaining a responsive user experience. You might notice a spinning wheel for a brief moment while themes are being switched
- Visual preferences: Your theme and colour mode preferences are saved for future visits. By default the existing site theme is loaded, but is switched to your preference based on your saved preference. If you delete your site data in your browser or use another browser or device you will need re-apply your preferences.
Technical Insights:
For those interested in the technical aspects:
Theme Selector and Colour Mode Selector Implementation:
Our theme selector leverages Bootswatch themes and dynamically applies the selected theme by creating and appending a new link element to the document’s head before unloading the old theme and reloading the new theme. This process has been implemented so that themes are loaded effectively and as quickly as possible.
Various colour and styling adjustments are made to the loaded theme to ensure reasonable readability and contrast. Please let us know if you believe there is content that you believe doesn’t provide enough contrast to view in a legible fashion.
This utilises local Storage to store user preferences, ensuring that your chosen colour mode persists across sessions. Additionally, the implementation includes a system preference check by default (the auto setting), to dynamically setting the theme based on the user’s operating system.
Other updates:
- Fixed an issue where the calm wind icon on the home page is not shown in calm winds.
- Changed the layout in the top section of the home page and the Gauges page to use space more effectively.
- Corrected an issue from v1.13.0 for Annual Data Summary not displaying due to jQuery being loaded after the page content is loaded.
- Dynamically calculated station age in years that was previously listed manually in the header
- Replaced the Met24 satellite graphic being no longer available, and instead with a graphic from Meteoblue.
Getting Started:
Feel free to explore the newly integrated theme selector and colour mode selector. Your preferences will be retained for future visits, ensuring a consistent and personalised experience.
Thank you:
We extend our sincere appreciation to our valued website users for their continued support for Ferny Grove Weather (December 2023 was our strongest month for visitor activity yet). These updates are aimed at elevating your experience, and we hope they prove to be valuable additions.
Please note there is the chance of the website experiencing unexpected behaviour when using these features. Whilst this has undergone significant testing these issues may occur. Please reply to this post or contact us to inform of the issue for rectification in a future update.
Further updates to bring new content and different ways to explore existing data are in the works for 2024.
For any inquiries or feedback, please don’t hesitate to reach out.