Gnuboard A Complete Guide to Dark Mode on the Web 페이지 정보 작성자 Docker 댓글 0건 조회 5,801회 작성일 21-05-19 10:06 목록 본문 다크 모드는 최근 많은 관심을 받고 있습니다. 예를 들어 Apple과 마찬가지로 iOS 및 MacOS 운영 체제에 다크 모드를 추가했습니다. Windows와 Google도 마찬가지입니다. https://duckduckgo.com/settings#theme 웹 사이트의 맥락에서 다크 모드로 들어가 보겠습니다. 다크 모드 디자인을 구현하기위한 다양한 옵션과 접근 방식과 그에 수반되는 기술적 고려 사항을 살펴 보겠습니다. 또한 그 과정에서 몇 가지 디자인 팁을 다룰 것입니다. [toc] ### Toggling Themes 일반적인 시나리오는 사이트에 대한 밝은 테마가 이미 있고 더 어둡게 만드는 데 관심이 있다는 것입니다. 또는 처음부터 시작하더라도 밝고 어두운 두 가지 테마가 있습니다. 하나의 테마는 사용자가 처음 방문 할 때받는 기본값으로 정의되어야합니다. 대부분의 경우 밝은 테마입니다 (우리가 보게 될 것처럼 사용자의 브라우저가 선택하도록 할 수 있음). 또한 다른 테마로 전환 할 수있는 방법도 있어야합니다 (자동으로 수행 할 수 있음). 사용자가 버튼을 클릭하면 색상 테마가 변경됩니다. 이를 수행하기위한 몇 가지 접근 방식이 있습니다. ##### Using a Body Class The trick here is to swap out a class that can be a hook for changing a style anywhere on the page. ```html <body class="dark-theme || light-theme"> ``` Here’s a script for a button that will toggle that class, for example: ```javascript // Select the button const btn = document.querySelector('.btn-toggle'); // Listen for a click on the button btn.addEventListener('click', function() { // Then toggle (add/remove) the .dark-theme class to the body document.body.classList.toggle('dark-theme'); }) ``` Here’s how we can use that idea: ```html <body> <button class="btn-toggle">Toggle Dark Mode</button> <h1>Hey there! This is just a title</h1> <p>I am just a boring text, existing here solely for the purpose of this demo</p> <p>And I am just another one like the one above me, because two is better than having only one</p> <a href="#">I am a link, don't click me!</a> </body> ``` The general idea of this approach is to style things up as we normally would, call that our “default” mode, then create a complete set of color styles using a class set on the `<body>` element we can use as a “dark” mode. Let’s say our default is a light color scheme. All of those “light” styles are written exactly the same way you normally write CSS. Given our HTML, let’s apply some global styling to the body and to links. ```css body { color: #222; background: #fff; } a { color: #0033cc; } ``` Good good. We have dark text (`#222`) and dark links (`#0033cc`) on a light background (`#fff`). Our “default” theme is off to a solid start. Now let’s redefine those property values, this time set on a different body class: ```css body { color: #222; background: #fff; } a { color: #0033cc; } /* Dark Mode styles */ body.dark-theme { color: #eee; background: #121212; } body.dark-theme a { color: #809fff; } ``` Dark theme styles will be descendants of the same parent class — which is `.dark-theme` in this example — which we’ve applied to the `<body>` tag. How do we “switch” body classes to access the dark styles? We can use JavaScript! We’ll select the button class (`.btn-toggle`), add a listener for when it’s clicked, then add the dark theme class (`.dark-theme`) to the body element’s class list. That effectively overrides all of the “light” colors we set, thanks to the cascade and specificity. Here’s the complete code working in action. Click the toggle button to toggle in and out of dark mode. [demo](https://codepen.io/adhuham/pen/dyodgPj) ##### Using Separate Stylesheets Rather than keeping all the styles together in one stylesheet, we could instead toggle between stylesheets for each theme. This assumes you have full stylesheets ready to go. For example, a default light theme like `light-theme.css`: ```css /* light-theme.css */ body { color: #222; background: #fff; } a { color: #0033cc; } ``` Then we create styles for the dark theme and save them in a separate stylesheet we’re calling `dark-theme.css`. ```css /* dark-theme.css */ body { color: #eee; background: #121212; } body a { color: #809fff; } ``` This gives us two separate stylesheets — one for each theme — we can link up in the HTML `<head>` section. Let’s link up the light styles first since we’re calling those the default. ```html <!DOCTYPE html> <html lang="en"> <head> <!-- Light theme stylesheet --> <link href="light-theme.css" rel="stylesheet" id="theme-link"> </head> <!-- etc. --> </html> ``` We are using a `#theme-link` ID that we can select with JavaScript to, again, toggle between light and dark mode. Only this time, we’re toggling files instead of classes. ```javascript // Select the button const btn = document.querySelector(".btn-toggle"); // Select the stylesheet <link> const theme = document.querySelector("#theme-link"); // Listen for a click on the button btn.addEventListener("click", function() { // If the current URL contains "ligh-theme.css" if (theme.getAttribute("href") == "light-theme.css") { // ... then switch it to "dark-theme.css" theme.href = "dark-theme.css"; // Otherwise... } else { // ... switch it to "light-theme.css" theme.href = "light-theme.css"; } }); ``` [View Demo](https://codepen.io/adhuham/project/full/AqjdGV) ##### Using Custom Properties We can also leverage the power of CSS custom properties to create a dark theme! It helps us avoid having to write separate style rulesets for each theme, making it a lot faster to write styles and a lot easier to make changes to a theme if we need to. We still might choose to swap a body class, and use that class to re-set custom properties: ```javascript // Select the button const btn = document.querySelector(".btn-toggle"); // Listen for a click on the button btn.addEventListener("click", function() { // Then toggle (add/remove) the .dark-theme class to the body document.body.classList.toggle("dark-theme"); }); ``` First, let’s define the default light color values as custom properties on the body element: ```css body { --text-color: #222; --bkg-color: #fff; --anchor-color: #0033cc; } ``` Now we can redefine those values on a `.dark-theme` body class just like we did in the first method: ```css body.dark-theme { --text-color: #eee; --bkg-color: #121212; --anchor-color: #809fff; } ``` Here are our rulesets for the body and link elements using custom properties: ```css body { color: var(--text-color); background: var(--bkg-color); } a { color: var(--anchor-color); } ``` We could just as well have defined our custom properties inside the document `:root`. That’s totally legit and [even common practice](https://css-tricks.com/breaking-css-custom-properties-out-of-root-might-be-a-good-idea/). In that case, all the default theme styles definitions would go inside `:root { }` and all of the dark theme properties go inside `:root.dark-mode { }`. ##### Using Server-Side Scripts If we’re already working with a server-side language, say PHP, then we can use it instead of JavaScript. This is a great approach if you prefer working directly in the markup. ```javascript <?php $themeClass = ''; if (isset($_GET['theme']) && $_GET['theme'] == 'dark') { $themeClass = 'dark-theme'; } $themeToggle = ($themeClass == 'dark-theme') ? 'light' : 'dark'; ?> <!DOCTYPE html> <html lang="en"> <!-- etc. --> <body class="<?php echo $themeClass; ?>"> <a href="?theme=<?php echo $themeToggle; ?>">Toggle Dark Mode</a> <!-- etc. --> </body> </html> ``` We can have the user send a `GET` or `POST` request. Then, we let our code (PHP in this case) apply the appropriate body class when the page is reloaded. I am using a `GET` request (URL params) for the purpose of this demonstration. And, yes, we can swap stylesheets just like we did in the second method. ```javascript <?php $themeStyleSheet = 'light-theme.css'; if (isset($_GET['theme']) && $_GET['theme'] == 'dark') { $themeStyleSheet = 'dark-theme.css'; } $themeToggle = ($themeStyleSheet == 'dark-theme.css') ? 'light' : 'dark'; ?> <!DOCTYPE html> <html lang="en"> <head> <!-- etc. --> <link href="<?php echo $themeStyleSheet; ?>" rel="stylesheet"> <script src="https://docker.apachezone.com/js/owlcarousel/owl.carousel.min.js?ver=191202"></script> <script src="https://docker.apachezone.com/js/jquery.bxslider.js?ver=191202"></script> </head> <body> <a href="?theme=<?php echo $themeToggle; ?>">Toggle Dark Mode</a> <!-- etc. --> </body> </html> ``` This method has an obvious downside: the page needs to be refreshed for the toggle to take place. But a server-side solution like this is useful in persisting the user’s theme choice across page reloads, as we will see later. #### Which method should you choose? "올바른"방법은 프로젝트의 요구 사항에 달려 있습니다. 예를 들어 대규모 프로젝트를 수행하는 경우 CSS 속성을 사용하여 대규모 코드베이스를 엉망으로 만들 수 있습니다. 반면에 프로젝트에서 레거시 브라우저를 지원해야하는 경우 다른 접근 방식이 대신 수행해야합니다. 또한 한 가지 방법 만 사용할 수 있다는 말도 없습니다. 때로는 방법의 조합이 가장 효과적인 경로가 될 것입니다. 우리가 논의한 것 외에 다른 가능한 방법이있을 수도 있습니다. ### Dark Mode at the Operating System Level 지금까지 라이트 모드와 다크 모드 사이를 전환하는 버튼을 사용했지만 사용자의 운영 체제가 이러한 작업을 수행하도록 할 수 있습니다. 예를 들어 많은 운영 체제에서는 사용자가 시스템 설정에서 직접 밝은 테마와 어두운 테마를 선택할 수 있습니다. 관련링크 https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ 2074회 연결 이전글Webp-ing your site: reduce image file size, increase site performance 21.05.21 다음글그누보드에서 태그 21.05.15 댓글 0 댓글목록 등록된 댓글이 없습니다.
