Dark Theme using CSS - Revision history

Philip: /* Example of Light and Dark Theme Switching */

2025-02-10T10:03:51Z

Example of Light and Dark Theme Switching

← Older revision		Revision as of 13:03, 10 February 2025
Line 102:		Line 102:
	== Example of Light and Dark Theme Switching ==		== Example of Light and Dark Theme Switching ==
	{{Iframe		{{Iframe
	\|~~ссылка~~ = https://codeeditor.ru/code.php?id=2502AUUwBzN5Vw&lang=en		\|url = https://codeeditor.ru/code.php?id=2502AUUwBzN5Vw&lang=en
	\|~~высота~~ = 500px		\|height = 500px
	\|~~название~~ = Dark Theme using CSS		\|title = Dark Theme using CSS
	}}		}}

Philip: /* Example of Light and Dark Theme Switching */

2025-02-10T10:03:31Z

Example of Light and Dark Theme Switching

@@ Line 101: / Line 101: @@
 == Example of Light and Dark Theme Switching ==
-<syntaxhighlight lang="html" copy>
+{{Iframe
-<!DOCTYPE html>
+|ссылка = https://codeeditor.ru/code.php?id=2502AUUwBzN5Vw&lang=en
-<html lang="en">
+|высота = 500px
-<head>
+|название = Dark Theme using CSS
-    <meta charset="UTF-8">
+}}
 == Conclusion ==

Philip: /* Combining Automatic Detection and Manual Selection */

2025-02-05T18:13:04Z

Combining Automatic Detection and Manual Selection

← Older revision		Revision as of 21:13, 5 February 2025
Line 73:		Line 73:
	== Combining Automatic Detection and Manual Selection ==		== Combining Automatic Detection and Manual Selection ==
	To account for both methods, you can first check if there is a saved theme choice in <code>localStorage</code>. If not, apply the system settings:		To account for both methods, you can first check if there is a saved theme choice in <code>localStorage</code>. If not, apply the system settings:
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript" copy>
	const userTheme = localStorage.getItem('theme');		const userTheme = localStorage.getItem('theme');
	const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';		const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

Philip: /* Switching Themes with JavaScript */

2025-02-05T18:12:50Z

Switching Themes with JavaScript

← Older revision		Revision as of 21:12, 5 February 2025
Line 38:		Line 38:
	== Switching Themes with JavaScript ==		== Switching Themes with JavaScript ==
	To allow users to switch between light and dark themes, you can use JavaScript:		To allow users to switch between light and dark themes, you can use JavaScript:
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript" copy>
	const toggleThemeBtn = document.getElementById('theme-toggle');		const toggleThemeBtn = document.getElementById('theme-toggle');

Philip: Philip moved page Dark Theme Using CSS to Dark Theme using CSS without leaving a redirect

2025-02-05T13:48:34Z

Philip moved page Dark Theme Using CSS to Dark Theme using CSS without leaving a redirect

← Older revision		Revision as of 16:48, 5 February 2025
(No difference)

Philip at 13:47, 5 February 2025

2025-02-05T13:47:27Z

Philip: /* Related CSS Articles */

2025-02-05T13:43:11Z

Philip: /* Related CSS Articles */

2025-02-05T13:42:31Z

Philip: /* Related CSS Articles */

2025-02-05T13:41:52Z

Philip at 13:40, 5 February 2025

2025-02-05T13:40:49Z

← Older revision		Revision as of 16:40, 5 February 2025
Line 6:		Line 6:
	There are two main ways to implement a dark theme:		There are two main ways to implement a dark theme:

	1. Using CSS variables and switching styles via JavaScript.		* Using CSS variables and switching styles via JavaScript.
	2. Automatically applying the theme based on system settings using <code>prefers-color-scheme</code>.		* Automatically applying the theme based on system settings using <code>prefers-color-scheme</code>.

	Both approaches can be combined to make theme handling more flexible.		Both approaches can be combined to make theme handling more flexible.

← Older revision		Revision as of 16:43, 5 February 2025
Line 196:		Line 196:
	{{Template:Navigation/CSS\|state=collapsed}}		{{Template:Navigation/CSS\|state=collapsed}}
	[[Category:CSS]]		[[Category:CSS]]
	[[wj-en:~~Dark Theme Using~~ CSS]]		[[wj-ru:Темная тема с использованием CSS]]
	[[wj-de:Dunkles Design mit CSS]]		[[wj-de:Dunkles Design mit CSS]]
	[[wj-fr:Thème sombre avec CSS]]		[[wj-fr:Thème sombre avec CSS]]
	[[wj-es:Tema oscuro usando CSS]]		[[wj-es:Tema oscuro usando CSS]]
	[[wj-it:Tema scuro con CSS]]		[[wj-it:Tema scuro con CSS]]

← Older revision		Revision as of 16:42, 5 February 2025
Line 193:		Line 193:

	==Related CSS Articles==		==Related CSS Articles==
	{{Encyclopedia CSS/Navigation\|state=~~uncollapsed~~}}		{{Encyclopedia CSS/Navigation\|state=collapsed}}
	{{Template:Navigation/CSS}}		{{Template:Navigation/CSS\|state=collapsed}}
	[[Category:CSS]]		[[Category:CSS]]
	[[wj-en:Dark Theme Using CSS]]		[[wj-en:Dark Theme Using CSS]]

← Older revision		Revision as of 16:41, 5 February 2025
Line 193:		Line 193:

	==Related CSS Articles==		==Related CSS Articles==
	{{~~Template:~~Navigation~~/CSS~~\|state=uncollapsed}}		{{Encyclopedia CSS/Navigation\|state=uncollapsed}}
	{{CSS ~~Encyclopedia/Navigation\|state=autocollapse~~}}		{{Template:Navigation/CSS}}
	[[Category:CSS]]		[[Category:CSS]]
	[[wj-en:Dark Theme Using CSS]]		[[wj-en:Dark Theme Using CSS]]

← Older revision		Revision as of 16:47, 5 February 2025
Line 1:		Line 1:
	In recent years, dark mode has become an integral part of modern web design. It not only reduces eye strain when working in low-light conditions but also saves battery life on devices with OLED displays. Implementing a dark theme on a website using CSS is quite simple, but it is important to do it correctly so that users can easily switch between light and dark versions.		In recent years, dark mode has become an integral part of modern web design. It not only reduces eye strain when working in low-light conditions but also saves battery life on devices with OLED displays. Implementing a dark theme on a website using CSS is quite simple, but it is important to do it correctly so that users can easily switch between light and dark versions.

	=== Basic Principles of Working with Themes ===		== Basic Principles of Working with Themes ==
	Dark and light themes are two sets of styles that can be dynamically applied to website elements. Ideally, users should be given the option to choose which theme to use, but system preferences of the operating system can also be taken into account.		Dark and light themes are two sets of styles that can be dynamically applied to website elements. Ideally, users should be given the option to choose which theme to use, but system preferences of the operating system can also be taken into account.

Line 11:		Line 11:
	Both approaches can be combined to make theme handling more flexible.		Both approaches can be combined to make theme handling more flexible.

	=== Using CSS Variables for Theming ===		== Using CSS Variables for Theming ==
	One of the most convenient ways to implement a dark theme is by using CSS variables (<code>custom properties</code>). This makes it easy to manage colors and other style parameters.		One of the most convenient ways to implement a dark theme is by using CSS variables (<code>custom properties</code>). This makes it easy to manage colors and other style parameters.

Line 36:		Line 36:
	Now, simply add the <code>.dark-theme</code> class to <code><html></code> or <code><body></code> to change the colors.		Now, simply add the <code>.dark-theme</code> class to <code><html></code> or <code><body></code> to change the colors.

	=== Switching Themes with JavaScript ===		== Switching Themes with JavaScript ==
	To allow users to switch between light and dark themes, you can use JavaScript:		To allow users to switch between light and dark themes, you can use JavaScript:
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
Line 59:		Line 59:
	This way, the user's choice is preserved after the page reloads.		This way, the user's choice is preserved after the page reloads.

	=== Automatic Detection of System Theme ===		== Automatic Detection of System Theme ==
	If you want to respect the user's system settings, you can use <code>prefers-color-scheme</code>. This media query automatically applies the appropriate theme:		If you want to respect the user's system settings, you can use <code>prefers-color-scheme</code>. This media query automatically applies the appropriate theme:
	<syntaxhighlight lang="css" copy>		<syntaxhighlight lang="css" copy>
Line 71:		Line 71:
	This method is convenient because it immediately adapts the website to the system preferences. However, if the user wants to manually select a theme, you will need to combine this approach with JavaScript.		This method is convenient because it immediately adapts the website to the system preferences. However, if the user wants to manually select a theme, you will need to combine this approach with JavaScript.

	=== Combining Automatic Detection and Manual Selection ===		== Combining Automatic Detection and Manual Selection ==
	To account for both methods, you can first check if there is a saved theme choice in <code>localStorage</code>. If not, apply the system settings:		To account for both methods, you can first check if there is a saved theme choice in <code>localStorage</code>. If not, apply the system settings:
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
Line 84:		Line 84:
	</syntaxhighlight>		</syntaxhighlight>

	=== Creating a User-Friendly Toggle ===		== Creating a User-Friendly Toggle ==
	Now, let's add a theme toggle button in HTML:		Now, let's add a theme toggle button in HTML:
	<syntaxhighlight lang="html" copy>		<syntaxhighlight lang="html" copy>
Line 91:		Line 91:
	The button allows the user to manually change the theme, and the logic for saving the choice makes the interaction convenient.		The button allows the user to manually change the theme, and the logic for saving the choice makes the interaction convenient.

	=== Enhancing Transition Animations ===		== Enhancing Transition Animations ==
	To make the theme switch look smooth, you can add an animation:		To make the theme switch look smooth, you can add an animation:
	<syntaxhighlight lang="css" copy>		<syntaxhighlight lang="css" copy>
Line 189:		Line 189:
	</syntaxhighlight>		</syntaxhighlight>

	=== Conclusion ===		== Conclusion ==
	Implementing a dark theme on a website using CSS and JavaScript is a relatively simple but important task. Using CSS variables makes the code convenient and scalable, while combining <code>prefers-color-scheme</code> and <code>localStorage</code> gives users flexibility in their choices. As a result, the website will be adaptive and comfortable to use in any lighting conditions.		Implementing a dark theme on a website using CSS and JavaScript is a relatively simple but important task. Using CSS variables makes the code convenient and scalable, while combining <code>prefers-color-scheme</code> and <code>localStorage</code> gives users flexibility in their choices. As a result, the website will be adaptive and comfortable to use in any lighting conditions.