{"id":67,"date":"2026-10-09T16:36:20","date_gmt":"2026-10-09T16:36:20","guid":{"rendered":"https:\/\/wordpress.theicealphawolfden.com\/?p=67"},"modified":"2026-10-09T16:36:21","modified_gmt":"2026-10-09T16:36:21","slug":"about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager","status":"publish","type":"post","link":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/","title":{"rendered":"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager"},"content":{"rendered":"\n<div class=\"wp-block-group alignwide has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:14px;color:#e6eef2;background-color:#172f39;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\">\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\"><strong>DESIGN NOTES \u00b7 THE EARLIER AUDIOBOOK MANAGER<\/strong><\/p>\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">I wanted the library to feel like mine.<\/h2>\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">Building an audiobook manager was about more than editing tags and counting books. I wanted a place that felt familiar when I opened it: my collection, my artwork, and an atmosphere that matched the way I listen.<\/p>\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">That became <strong>Dark Mode<\/strong> and <strong>Winter Mode<\/strong>\u2014two looks for the same library, each with its own mood.<\/p>\n\n<\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">I often listen at night, in quiet surroundings, and during the colder seasons. A bright, busy interface was not the feeling I wanted when choosing the next story. I wanted the books to remain easy to recognise while the surrounding interface stayed calm.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">This post records the theme work in my earlier Audiobook Manager, before the later Flatpak version. The screenshots below preserve that stage of the project.<\/p>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group alignwide has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:14px;color:#e6eef2;background-color:#202c2a;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\">\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\"><strong>DARK MODE<\/strong><\/p>\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The everyday look I used most: charcoal backgrounds, green status indicators, and the covers in focus.<\/p>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group alignwide has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:14px;color:#e6eef2;background-color:#173448;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\">\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\"><strong>WINTER MODE<\/strong><\/p>\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The seasonal look: colder blue tones, frosted edges, pale highlights, and drifting snow.<\/p>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">Winter Mode: a quiet winter evening<\/h2>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">Winter Mode grew from a particular feeling: snow outside, a cold night, and a quiet moment to choose something to listen to. I wanted that atmosphere inside the library without losing the information I actually needed to use it.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\" style=\"margin:30px 0\"><a href=\"https:\/\/i.ibb.co\/F4Sz3SHv\/Winter-author-grid.png\" target=\"_blank\" rel=\"noopener\" style=\"display:block;max-width:1886px;margin:0 auto\"><img src=\"https:\/\/i.ibb.co\/F4Sz3SHv\/Winter-author-grid.png\" alt=\"Original Audiobook Manager author grid in Winter Mode, showing blue-toned backgrounds, glowing card edges, pale author labels, mint badges, and snowflake particles.\" width=\"1886\" height=\"843\" style=\"display:block;width:100%;max-width:1886px;height:auto;margin:0 auto;border-radius:10px\" loading=\"lazy\" decoding=\"async\" \/><\/a><figcaption style=\"color:#bdcfd6;font-size:0.88em;line-height:1.6;margin-top:12px\">Winter Mode on the original author grid: a dark blue background, frosted-looking cards, pale highlights, and visible snowflakes. <a style=\"color:#a9dd8a\" href=\"https:\/\/i.ibb.co\/F4Sz3SHv\/Winter-author-grid.png\" target=\"_blank\" rel=\"noopener\">View full size<\/a>.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The author grid keeps its familiar arrangement, but the surroundings change. The background becomes darker and bluer, the cards gain a frosted appearance, and pale highlights pick out the labels and edges. The cover artwork brings its own warmer colours into that colder setting.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">What I put into the winter look<\/h3>\n\n\n\n<ul class=\"wp-block-list has-text-color\" style=\"color:#e6eef2\">\n\n<li><strong>A dark blue background<\/strong> inspired by winter evenings.<\/li>\n\n\n<li><strong>Gentle snowfall and snowflake particles<\/strong> drifting over the interface.<\/li>\n\n\n<li><strong>Frosted-looking cards and UI elements<\/strong> with light blur and soft shadows.<\/li>\n\n\n<li><strong>Light text and icy highlights<\/strong> to keep names and controls visible.<\/li>\n\n\n<li><strong>Subtle sparkle effects<\/strong> as another small seasonal detail.<\/li>\n\n<\/ul>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The intention was a gentle seasonal layer. I still wanted to recognise an author, spot a series, and read its counters without the decorative effects taking over the screen.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\" style=\"margin:30px 0\"><a href=\"https:\/\/i.ibb.co\/Z6Tc87h1\/Winter-series-view.png\" target=\"_blank\" rel=\"noopener\" style=\"display:block;max-width:1047px;margin:0 auto\"><img src=\"https:\/\/i.ibb.co\/Z6Tc87h1\/Winter-series-view.png\" alt=\"Original Bruce Sentar album view in Winter Mode, with eight series cards, collection and read-status badges, pale blue highlights, and snowflakes.\" width=\"1047\" height=\"317\" style=\"display:block;width:100%;max-width:1047px;height:auto;margin:0 auto;border-radius:10px\" loading=\"lazy\" decoding=\"async\" \/><\/a><figcaption style=\"color:#bdcfd6;font-size:0.88em;line-height:1.6;margin-top:12px\">Winter Mode on Bruce Sentar\u2019s series view, with icy labels and snowflakes around the familiar cover cards and counters. <a style=\"color:#a9dd8a\" href=\"https:\/\/i.ibb.co\/Z6Tc87h1\/Winter-series-view.png\" target=\"_blank\" rel=\"noopener\">View full size<\/a>.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The Bruce Sentar series view shows the same approach on a smaller part of the collection. The covers, counts, and reading-status badges remain in place; the blue tones, pale glow, and snowflakes give the view a different atmosphere.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:14px;color:#e6eef2;background-color:#173448;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\">\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\"><strong>The mood I was trying to create<\/strong><\/p>\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">Seeing the snow drift over the covers made browsing feel like a peaceful winter evening. That personal feeling was the reason for the theme.<\/p>\n\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">Dark Mode: the view I used most<\/h2>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">Dark Mode was the first theme I built, and it was the one I used most at this stage. I wanted a subdued screen for browsing at night, with the artwork and useful indicators carrying the visual attention.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\" style=\"margin:30px 0\"><a href=\"https:\/\/i.ibb.co\/q3PSh835\/Dark-author-grid.png\" target=\"_blank\" rel=\"noopener\" style=\"display:block;max-width:1894px;margin:0 auto\"><img src=\"https:\/\/i.ibb.co\/q3PSh835\/Dark-author-grid.png\" alt=\"Original Audiobook Manager author grid in Dark Mode, showing author portraits and covers on charcoal cards with green labels and number badges.\" width=\"1894\" height=\"849\" style=\"display:block;width:100%;max-width:1894px;height:auto;margin:0 auto;border-radius:10px\" loading=\"lazy\" decoding=\"async\" \/><\/a><figcaption style=\"color:#bdcfd6;font-size:0.88em;line-height:1.6;margin-top:12px\">Dark Mode on the original author grid: charcoal backgrounds, subdued cards, and bright green labels and badges. <a style=\"color:#a9dd8a\" href=\"https:\/\/i.ibb.co\/q3PSh835\/Dark-author-grid.png\" target=\"_blank\" rel=\"noopener\">View full size<\/a>.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">Deep charcoal backgrounds give the covers room to stand out. Green labels and progress or status indicators provide familiar points to look for, while quieter accents help the interface stay consistent from one view to the next.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">What I put into the dark look<\/h3>\n\n\n\n<ul class=\"wp-block-list has-text-color\" style=\"color:#e6eef2\">\n\n<li><strong>Charcoal backgrounds and restrained gradients<\/strong> around the collection.<\/li>\n\n\n<li><strong>Cover art that stands out<\/strong> against the darker surrounding cards.<\/li>\n\n\n<li><strong>Bright green indicators<\/strong> for progress and status.<\/li>\n\n\n<li><strong>Muted accents and consistent page brightness<\/strong> across the interface.<\/li>\n\n\n<li><strong>Soft hover, selection, and transition effects<\/strong> for moving between cards.<\/li>\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image alignwide\" style=\"margin:30px 0\"><a href=\"https:\/\/i.ibb.co\/hJ3qPR3g\/Dark-series-view.png\" target=\"_blank\" rel=\"noopener\" style=\"display:block;max-width:1214px;margin:0 auto\"><img src=\"https:\/\/i.ibb.co\/hJ3qPR3g\/Dark-series-view.png\" alt=\"Original Bruce Sentar album view in Dark Mode, showing eight series cover cards, counts, and green reading-status indicators on a charcoal background.\" width=\"1214\" height=\"350\" style=\"display:block;width:100%;max-width:1214px;height:auto;margin:0 auto;border-radius:10px\" loading=\"lazy\" decoding=\"async\" \/><\/a><figcaption style=\"color:#bdcfd6;font-size:0.88em;line-height:1.6;margin-top:12px\">Dark Mode on Bruce Sentar\u2019s series view, with green labels and status indicators against the charcoal interface. <a style=\"color:#a9dd8a\" href=\"https:\/\/i.ibb.co\/hJ3qPR3g\/Dark-series-view.png\" target=\"_blank\" rel=\"noopener\">View full size<\/a>.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">In the series view, the green headings and indicators make the dark theme immediately recognisable. It gives me the same collection overview as Winter Mode, with a more restrained everyday appearance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">Two moods, one familiar library<\/h2>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">I did not want changing the theme to mean learning a different interface. The author grid, series view, book or track lists, navigation, menus, and icons needed to belong to the same visual system.<\/p>\n\n\n\n<figure class=\"wp-block-table alignwide\" style=\"margin:28px 0\"><div style=\"overflow-x:auto;border:1px solid #3d5965;border-radius:10px\"><table style=\"width:100%;min-width:580px;border-collapse:collapse;font-size:0.95em;line-height:1.55\"><thead><tr><th scope=\"col\" style=\"padding:14px 16px;text-align:left;background:#24444c;color:#f4f8fa;border-bottom:1px solid #507078\">Design choice<\/th><th scope=\"col\" style=\"padding:14px 16px;text-align:left;background:#24444c;color:#f4f8fa;border-bottom:1px solid #507078\">Dark Mode<\/th><th scope=\"col\" style=\"padding:14px 16px;text-align:left;background:#24444c;color:#f4f8fa;border-bottom:1px solid #507078\">Winter Mode<\/th><\/tr><\/thead><tbody><tr><td style=\"padding:14px 16px;vertical-align:top;background:#142c36;color:#e6eef2;border-bottom:1px solid #3d5965\">Background<\/td><td style=\"padding:14px 16px;vertical-align:top;background:#142c36;color:#e6eef2;border-bottom:1px solid #3d5965\">Deep charcoal and subdued gradients.<\/td><td style=\"padding:14px 16px;vertical-align:top;background:#142c36;color:#e6eef2;border-bottom:1px solid #3d5965\">Dark blue tones inspired by winter evenings.<\/td><\/tr><tr><td style=\"padding:14px 16px;vertical-align:top;background:#1a343f;color:#e6eef2;border-bottom:1px solid #3d5965\">Accents<\/td><td style=\"padding:14px 16px;vertical-align:top;background:#1a343f;color:#e6eef2;border-bottom:1px solid #3d5965\">Green labels and bright progress or status indicators.<\/td><td style=\"padding:14px 16px;vertical-align:top;background:#1a343f;color:#e6eef2;border-bottom:1px solid #3d5965\">Pale icy highlights, glowing edges, and mint-toned badges.<\/td><\/tr><tr><td style=\"padding:14px 16px;vertical-align:top;background:#142c36;color:#e6eef2;border-bottom:1px solid #3d5965\">Atmosphere<\/td><td style=\"padding:14px 16px;vertical-align:top;background:#142c36;color:#e6eef2;border-bottom:1px solid #3d5965\">A quieter everyday view for browsing at night.<\/td><td style=\"padding:14px 16px;vertical-align:top;background:#142c36;color:#e6eef2;border-bottom:1px solid #3d5965\">A seasonal view with drifting snow and a frosted appearance.<\/td><\/tr><tr><td style=\"padding:14px 16px;vertical-align:top;background:#1a343f;color:#e6eef2;border-bottom:1px solid #3d5965\">What stays familiar<\/td><td style=\"padding:14px 16px;vertical-align:top;background:#1a343f;color:#e6eef2;border-bottom:1px solid #3d5965\">Author cards, series covers, counts, and navigation.<\/td><td style=\"padding:14px 16px;vertical-align:top;background:#1a343f;color:#e6eef2;border-bottom:1px solid #3d5965\">The same library structure in a different visual mood.<\/td><\/tr><\/tbody><\/table><\/div><figcaption style=\"color:#bdcfd6;font-size:0.88em;margin-top:12px\">A comparison of the two themes described in my original design post.<\/figcaption><\/figure>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The original interface uses <strong>album<\/strong> and <strong>track<\/strong> labels inherited from audio metadata. In my setup, those labels help organise audiobook series and their entries. The themes change the presentation around that structure.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">How the theme system was organised<\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">Shared CSS variables<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The design used shared CSS variables for backgrounds, text, card borders, highlights, shadows, and icon colours. Components drew their colours from those values, so I could change a palette without individually restyling each card. Winter Mode reused the darker foundation and added its colder colours and effects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">A theme setting on the page<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The selected look was identified by an attribute such as <code>&lt;html data-theme=\"dark\"&gt;<\/code> or <code>&lt;html data-theme=\"winter\"&gt;<\/code>. Matching CSS rules supplied the values for that theme. Updating the attribute lets those rules apply in the existing page, without requiring a full page reload.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">CSS variables handle the shared styling; a theme selector still needs a way to change the active setting. This is the pattern described in <a style=\"color:#a9dd8a\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascading_variables\/Using_custom_properties\">MDN\u2019s guide to CSS custom properties<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">Seasonal animation alongside the styling<\/h3>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The original winter design also included a canvas snow overlay and an animation loop. That motion is separate from choosing CSS colour values. Keeping it gentle and lightweight was a design goal, while the frosted styling and sparkle effects completed the seasonal look.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The useful distinction is between selecting a theme and drawing its animated effects. <a style=\"color:#a9dd8a\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/Guides\/CSS_JavaScript_animation_performance\">MDN explains how CSS and JavaScript animation differ<\/a>; the canvas work still needs to draw its changing frames.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">Why making it personal mattered<\/h2>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">At the time, my audiobook collection had grown beyond <strong>400 books<\/strong>. I needed clear organisation, but I also wanted to enjoy the place where I managed it. A collection full of stories should feel inviting to browse.<\/p>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">Dark Mode gave me the everyday view I was comfortable using. Winter Mode gave me atmosphere: snow, colder colours, and the feeling of stepping into a quieter corner of my own world. The important part was that both still put the books within reach.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:14px;color:#e6eef2;background-color:#172f39;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\">\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\"><strong>My library should look like somewhere I want to spend time.<\/strong><\/p>\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The themes made the manager feel more personal while keeping the author cards, series covers, counts, and controls familiar.<\/p>\n\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-color\" style=\"color:#f4f8fa\">Where I wanted the themes to go next<\/h2>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">At this stage, I was also considering other looks for the same system:<\/p>\n\n\n\n<ul class=\"wp-block-list has-text-color\" style=\"color:#e6eef2\">\n\n<li><strong>Autumn Mode<\/strong> with falling leaves.<\/li>\n\n\n<li><strong>Forest Mode<\/strong> with green overlays.<\/li>\n\n\n<li><strong>Sci-Fi Mode<\/strong> with neon blue HUD-style elements.<\/li>\n\n\n<li><strong>Classic Mode<\/strong> inspired by old bookshelves.<\/li>\n\n<\/ul>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">These were ideas in the original post, rather than a list of completed themes. The shared styling system gave me a starting point for exploring them.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-text-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-radius:14px;color:#e6eef2;background-color:#172f39;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px\">\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\"><strong>Part of the earlier project\u2019s story<\/strong><\/p>\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#e6eef2\">The theme work was another step in turning a small metadata tool into a manager I wanted to use. A later stage of the project moved to a Flatpak version of the program; the screens here belong to the earlier interface.<\/p>\n\n<\/div>\n\n\n\n<p class=\"has-text-color wp-block-paragraph\" style=\"color:#bdcfd6\">All four screenshots come from the original theme post. They are static captures of that earlier interface. Book-cover artwork and author photographs visible inside them belong to their respective rights holders.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>DESIGN NOTES \u00b7 THE EARLIER AUDIOBOOK MANAGER I wanted the library to feel like mine. Building an audiobook manager was about more than editing tags and counting books. I wanted a place that felt familiar when I opened it: my collection, my artwork, and an atmosphere that matched the way I listen. That became Dark [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":68,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAow86rODA:productID":"","footnotes":""},"categories":[510,511],"tags":[],"snowpaw_game":[],"class_list":["post-67","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-audiobooks","category-php-audibook-program"],"snowpaw":{"managed":true,"game_id":"","game_ids":[],"games":[],"review_game_ids":[],"cover_sizes":[{"url":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/2026\/10\/Mork-vinterarbejdsplads-for-lydboger-300x169.png","width":300},{"url":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/iawd-covers\/68-c1b611061327-480.webp","width":480},{"url":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/iawd-covers\/68-c1b611061327-768.webp","width":768},{"url":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/2026\/10\/Mork-vinterarbejdsplads-for-lydboger-1024x576.png","width":1024},{"url":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/iawd-covers\/68-c1b611061327-1200.webp","width":1200}]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager - The Ice Alpha Wolf Den<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager - The Ice Alpha Wolf Den\" \/>\n<meta property=\"og:description\" content=\"DESIGN NOTES \u00b7 THE EARLIER AUDIOBOOK MANAGER I wanted the library to feel like mine. Building an audiobook manager was about more than editing tags and counting books. I wanted a place that felt familiar when I opened it: my collection, my artwork, and an atmosphere that matched the way I listen. That became Dark [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/\" \/>\n<meta property=\"og:site_name\" content=\"The Ice Alpha Wolf Den\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-09T16:36:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-09T16:36:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/2026\/10\/Mork-vinterarbejdsplads-for-lydboger-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kiba Snowpaw\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kiba Snowpaw\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/\"},\"author\":{\"name\":\"Kiba Snowpaw\",\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/#\\\/schema\\\/person\\\/9aa16d0f1046d121317e4de844c396f1\"},\"headline\":\"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager\",\"datePublished\":\"2026-10-09T16:36:20+00:00\",\"dateModified\":\"2026-10-09T16:36:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/\"},\"wordCount\":1303,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/#\\\/schema\\\/person\\\/9aa16d0f1046d121317e4de844c396f1\"},\"image\":{\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Mork-vinterarbejdsplads-for-lydboger.png\",\"articleSection\":[\"Audiobooks\",\"PHP Audibook Program\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/\",\"url\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/\",\"name\":\"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager - The Ice Alpha Wolf Den\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Mork-vinterarbejdsplads-for-lydboger.png\",\"datePublished\":\"2026-10-09T16:36:20+00:00\",\"dateModified\":\"2026-10-09T16:36:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Mork-vinterarbejdsplads-for-lydboger.png\",\"contentUrl\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/Mork-vinterarbejdsplads-for-lydboger.png\",\"width\":1672,\"height\":941},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/2026\\\/10\\\/09\\\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/#website\",\"url\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/\",\"name\":\"The Ice Alpha Wolf Den\",\"description\":\"Game reviews, photography and audiobooks\",\"publisher\":{\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/#\\\/schema\\\/person\\\/9aa16d0f1046d121317e4de844c396f1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/#\\\/schema\\\/person\\\/9aa16d0f1046d121317e4de844c396f1\",\"name\":\"Kiba Snowpaw\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2a2f88455e1cd93bebe8b4c59c91ce4dd186615e2aea0ca5fd25fa96bffa14e8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2a2f88455e1cd93bebe8b4c59c91ce4dd186615e2aea0ca5fd25fa96bffa14e8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2a2f88455e1cd93bebe8b4c59c91ce4dd186615e2aea0ca5fd25fa96bffa14e8?s=96&d=mm&r=g\",\"caption\":\"Kiba Snowpaw\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2a2f88455e1cd93bebe8b4c59c91ce4dd186615e2aea0ca5fd25fa96bffa14e8?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\\/\\\/theicealphawolfden.com\"],\"url\":\"https:\\\/\\\/wordpress.theicealphawolfden.com\\\/index.php\\\/author\\\/admin2183\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager - The Ice Alpha Wolf Den","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/","og_locale":"en_GB","og_type":"article","og_title":"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager - The Ice Alpha Wolf Den","og_description":"DESIGN NOTES \u00b7 THE EARLIER AUDIOBOOK MANAGER I wanted the library to feel like mine. Building an audiobook manager was about more than editing tags and counting books. I wanted a place that felt familiar when I opened it: my collection, my artwork, and an atmosphere that matched the way I listen. That became Dark [&hellip;]","og_url":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/","og_site_name":"The Ice Alpha Wolf Den","article_published_time":"2026-10-09T16:36:20+00:00","article_modified_time":"2026-10-09T16:36:21+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/2026\/10\/Mork-vinterarbejdsplads-for-lydboger-1024x576.png","type":"image\/png"}],"author":"Kiba Snowpaw","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kiba Snowpaw","Estimated reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/#article","isPartOf":{"@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/"},"author":{"name":"Kiba Snowpaw","@id":"https:\/\/wordpress.theicealphawolfden.com\/#\/schema\/person\/9aa16d0f1046d121317e4de844c396f1"},"headline":"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager","datePublished":"2026-10-09T16:36:20+00:00","dateModified":"2026-10-09T16:36:21+00:00","mainEntityOfPage":{"@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/"},"wordCount":1303,"commentCount":0,"publisher":{"@id":"https:\/\/wordpress.theicealphawolfden.com\/#\/schema\/person\/9aa16d0f1046d121317e4de844c396f1"},"image":{"@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/#primaryimage"},"thumbnailUrl":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/2026\/10\/Mork-vinterarbejdsplads-for-lydboger.png","articleSection":["Audiobooks","PHP Audibook Program"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/","url":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/","name":"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager - The Ice Alpha Wolf Den","isPartOf":{"@id":"https:\/\/wordpress.theicealphawolfden.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/#primaryimage"},"image":{"@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/#primaryimage"},"thumbnailUrl":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/2026\/10\/Mork-vinterarbejdsplads-for-lydboger.png","datePublished":"2026-10-09T16:36:20+00:00","dateModified":"2026-10-09T16:36:21+00:00","breadcrumb":{"@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/#primaryimage","url":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/2026\/10\/Mork-vinterarbejdsplads-for-lydboger.png","contentUrl":"https:\/\/wordpress.theicealphawolfden.com\/wp-content\/uploads\/2026\/10\/Mork-vinterarbejdsplads-for-lydboger.png","width":1672,"height":941},{"@type":"BreadcrumbList","@id":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/2026\/10\/09\/about-this-project-building-dark-mode-winter-mode-for-my-audiobook-manager\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wordpress.theicealphawolfden.com\/"},{"@type":"ListItem","position":2,"name":"About This Project \u2013 Building Dark Mode &amp; Winter Mode for My Audiobook Manager"}]},{"@type":"WebSite","@id":"https:\/\/wordpress.theicealphawolfden.com\/#website","url":"https:\/\/wordpress.theicealphawolfden.com\/","name":"The Ice Alpha Wolf Den","description":"Game reviews, photography and audiobooks","publisher":{"@id":"https:\/\/wordpress.theicealphawolfden.com\/#\/schema\/person\/9aa16d0f1046d121317e4de844c396f1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wordpress.theicealphawolfden.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":["Person","Organization"],"@id":"https:\/\/wordpress.theicealphawolfden.com\/#\/schema\/person\/9aa16d0f1046d121317e4de844c396f1","name":"Kiba Snowpaw","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/2a2f88455e1cd93bebe8b4c59c91ce4dd186615e2aea0ca5fd25fa96bffa14e8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2a2f88455e1cd93bebe8b4c59c91ce4dd186615e2aea0ca5fd25fa96bffa14e8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2a2f88455e1cd93bebe8b4c59c91ce4dd186615e2aea0ca5fd25fa96bffa14e8?s=96&d=mm&r=g","caption":"Kiba Snowpaw"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/2a2f88455e1cd93bebe8b4c59c91ce4dd186615e2aea0ca5fd25fa96bffa14e8?s=96&d=mm&r=g"},"sameAs":["http:\/\/theicealphawolfden.com"],"url":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/author\/admin2183\/"}]}},"_links":{"self":[{"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/posts\/67","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/comments?post=67"}],"version-history":[{"count":1,"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/posts\/67\/revisions"}],"predecessor-version":[{"id":69,"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/posts\/67\/revisions\/69"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/media\/68"}],"wp:attachment":[{"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/media?parent=67"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/categories?post=67"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/tags?post=67"},{"taxonomy":"snowpaw_game","embeddable":true,"href":"https:\/\/wordpress.theicealphawolfden.com\/index.php\/wp-json\/wp\/v2\/snowpaw_game?post=67"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}