From 2995c80814d27e80dec8aced9c2d8be27a16ae09 Mon Sep 17 00:00:00 2001 From: Gmaus Date: Fri, 20 Oct 2023 00:36:46 +0200 Subject: [PATCH 1/4] Added first version of dark mode Signed-off-by: Gmaus --- .../Startup.cs | 3 +- .../Views/Shared/_Layout.cshtml | 10 +- .../wwwroot/css/site.css | 108 ++++++++++++++++++ .../wwwroot/js/darkTheme.js | 23 ++++ 4 files changed, 141 insertions(+), 3 deletions(-) create mode 100644 src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/js/darkTheme.js diff --git a/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Startup.cs b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Startup.cs index 526e841b..d1e7d404 100644 --- a/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Startup.cs +++ b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Startup.cs @@ -34,7 +34,8 @@ public void ConfigureServices(IServiceCollection services) string connectionString = Environment.GetEnvironmentVariable("SqlConnectionString"); - services.AddScoped(x => new SqlTechEventRepository(connectionString)); + services.AddScoped(x => new FakeTechEventRepository()); + //services.AddScoped(x => new SqlTechEventRepository(connectionString)); services.AddScoped(x => new SqlTechEventRepository(connectionString)); services.AddLocalization(); diff --git a/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Views/Shared/_Layout.cshtml b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Views/Shared/_Layout.cshtml index 75890480..34fde391 100644 --- a/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Views/Shared/_Layout.cshtml +++ b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Views/Shared/_Layout.cshtml @@ -8,7 +8,7 @@ @**@ - + @@ -36,7 +36,13 @@ TechCommunityCalendar.com Map Add Event - +
+
Dark Theme
+ +
diff --git a/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/css/site.css b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/css/site.css index fb038008..fbfacef5 100644 --- a/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/css/site.css +++ b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/css/site.css @@ -114,10 +114,118 @@ img#logo { align-items: center; } + .flex-container > div.event-type { margin: 0 15px 0px 15px; } + +/*Toggle switch styling*/ +.theme-switch-wrapper { + display: flex; + align-items: center; + position: absolute; + top: 10px; + right: 70px; +} + +.theme-switch { + display: inline-block; + height: 34px; + position: relative; + width: 60px; +} + + .theme-switch input { + display: none; + } + +.slider { + background-color: #ccc; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .4s; +} + + .slider:before { + background-color: #fff; + bottom: 4px; + content: ""; + height: 26px; + left: 4px; + position: absolute; + transition: .4s; + width: 26px; + } + +input:checked + .slider { + background-color: #66bb6a; +} + + input:checked + .slider:before { + transform: translateX(26px); + } + +.slider.round { + border-radius: 34px; +} + + .slider.round:before { + border-radius: 50%; + } + +/* Adding theme support */ +:root { + --primary-color: #424242; + --secondary-color: #536390; + --font-color: #424242; + --bg-color: #fff; + --heading-color: #292922; + --nav-toggle-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} + +[data-theme="dark"] { + --primary-color: #9A97F3; + --secondary-color: #818cab; + --font-color: #e1e1ff; + --bg-color: #161625; + --heading-color: #818cab; + --nav-toggle-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} + +body { + color: var(--font-color); + background-color: var(--bg-color); +} + +.navbar { + color: var(--font-color) !important; + background-color: var(--bg-color) !important; +} + +a.navbar-brand { + color: var(--font-color) !important; + background-color: var(--bg-color) !important; +} + +.nav-link { + color: var(--font-color) !important; + background-color: var(--bg-color) !important; +} + +.navbar-toggler-icon { + background-image: var(--nav-toggle-icon); +} + +.navPadding { + padding-right: 8px; +} + + /* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px diff --git a/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/js/darkTheme.js b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/js/darkTheme.js new file mode 100644 index 00000000..6d51d220 --- /dev/null +++ b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/js/darkTheme.js @@ -0,0 +1,23 @@ +const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); +const currentTheme = localStorage.getItem('theme'); + +if (currentTheme) { + document.documentElement.setAttribute('data-theme', currentTheme); + + if (currentTheme === 'dark') { + toggleSwitch.checked = true; + } +} + +function switchTheme(e) { + if (e.target.checked) { + document.documentElement.setAttribute('data-theme', 'dark'); + localStorage.setItem('theme', 'dark'); + } + else { document.documentElement.setAttribute('data-theme', 'light'); + localStorage.setItem('theme', 'light'); + } +} + +toggleSwitch.addEventListener('change', switchTheme, false); + From 110a1943c8495d18bd85730897b1aac04e949f99 Mon Sep 17 00:00:00 2001 From: Gmaus Date: Mon, 23 Oct 2023 23:36:38 +0200 Subject: [PATCH 2/4] Added same approach as CodeReview Signed-off-by: Gmaus --- .../Views/Shared/_Layout.cshtml | 1 + 1 file changed, 1 insertion(+) diff --git a/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Views/Shared/_Layout.cshtml b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Views/Shared/_Layout.cshtml index 34fde391..322153ea 100644 --- a/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Views/Shared/_Layout.cshtml +++ b/src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Views/Shared/_Layout.cshtml @@ -103,6 +103,7 @@ + @RenderSection("Scripts", required: false)