https://dimitris.netlify.app/tags/web-development/ Recent content in Web-Development on Dimitris Kokoretsis Hugo -- gohugo.io en-us Thu, 03 Sep 2026 00:00:00 +0000 https://dimitris.netlify.app/posts/dark-mode-preview/ Thu, 03 Sep 2026 00:00:00 +0000 https://dimitris.netlify.app/posts/dark-mode-preview/ <img src="https://dimitris.netlify.app/posts/dark-mode-preview/dark-mode-demo.gif"/> This website can switch between dark and light mode by clicking this switch button on the top right corner: <span class='svg-container-fill' style='width: 24px; vertical-align:middle;'><svg width='100%' height='100%' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22 3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7 13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z'></path></svg></span> This switch affects the background and font color of the page, but it can also create cool effects with graphics that respond to it, like below. This common feature across many websites is a rich "slice" of web development, showcasing the whole toolkit: HTML, XML-based graphics (SVG), CSS, and JavaScript. Stay tuned for the next blog post, where we'll create this feature from scratch, as well as graphics responsive to it.