From 4da9355a978af35fe02a09b5485bf305531ce6f9 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 29 Aug 2024 20:34:15 -0400 Subject: [PATCH 1/8] improve page --- files/en-us/web/manifest/theme_color/index.md | 92 +++++++++++++++++-- 1 file changed, 83 insertions(+), 9 deletions(-) diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index 8fe8b43e9582650..03c6635c187cd8a 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -7,23 +7,91 @@ browser-compat: html.manifest.theme_color {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}} - - - - - - - -
TypeString
+The `theme_color` member specifies the default theme color for your web application's user interface. This color may be applied to various browser UI elements, such as the toolbar, address bar, and status bar. It can be particularly noticeable in contexts like the task switcher or when the app is added to the home screen. This color application can provide a more native app-like experience for your web app, especially when it's loaded in [standalone](/en-US/docs/Web/Manifest/display#standalone) mode. -The `theme_color` member is a string that defines the default theme color for the application. This sometimes affects how the OS displays the site (e.g., on Android's task switcher, the theme color surrounds the site). +## Syntax + +```json +"theme_color": "colorValue" +``` + +### Values + +- colorValue + + - : A string that specifies a [valid color value](/en-US/docs/Web/CSS/color_value). + + > [!NOTE] + > Browsers may ignore the alpha component of the color based on the context. In most environments, `theme_color` cannot be transparent. It's recommended to use fully opaque colors (alpha value of 1 or 100%) to ensure consistent behavior across different platforms and browsers. + +## Description + +While optional, specifying a `theme_color` allows you to extend your app's visual identity beyond its content areas. Choose a `theme_color` that aligns with your app's brand guidelines, which can enhance user recognition and recall, particularly when your app is viewed alongside other applications or system interfaces. + +In browsers that support `theme_color`, the value specified in the manifest file serves as the default theme color for your web app across all pages where the manifest is applied. You can override this default in the following ways: + +- Using the [`theme-color`](/en-US/docs/Web/HTML/Element/meta/name/theme-color) value of the `name` attribute in the HTML `` element: You can specify a theme color for a web page that's different from the manifest `theme_color` specified for your app. This enables you to set unique theme colors for individual pages within your app. + +```html + +``` + +- Combining the `` element with media queries: You can specify the theme color to be used based on user's color scheme preference. + +```html + + +``` + +These override methods provide you the flexibility to adapt your app's appearance for specific pages or user preferences, improving the overall user experience. + +Browsers may also adjust the applied theme color based on user preferences. If a user has set a preference for light or dark mode, browsers may override the manifest `theme_color` value to support any [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query defined in your app's CSS. + +```css +body { + background: #f8f9fa; + color: #212529; +} + +@media (prefers-color-scheme: dark) { + body { + background: #212529; + color: #f8f9fa; + } +} +``` ## Examples +### Using a named color + ```json "theme_color": "red" ``` +### Using an RGB value + +```json +"theme_color": "rgb(66, 133, 244)" +``` + +### Using a hexadecimal value + +```json +{ + "name": "MyWebApp", + "display": "standalone", + "background_color": "#ffffff", + "theme_color": "#ff4500" +} +``` + ## Specifications {{Specifications}} @@ -31,3 +99,9 @@ The `theme_color` member is a string that defines the default theme color for th ## Browser compatibility {{Compat}} + +## See also + +- [`display`](/en-US/docs/Web/Manifest/display) manifest member +- [`background_color`](/en-US/docs/Web/Manifest/background_color) manifest member +- [`scope`](/en-US/docs/Web/Manifest/scope) manifest member From fefc8139cdd2c3a957783fe4e3c7d737aabe3fc6 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 29 Aug 2024 20:41:07 -0400 Subject: [PATCH 2/8] apply formatting --- files/en-us/web/manifest/theme_color/index.md | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index 03c6635c187cd8a..505073785d8d5f7 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -7,7 +7,10 @@ browser-compat: html.manifest.theme_color {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}} -The `theme_color` member specifies the default theme color for your web application's user interface. This color may be applied to various browser UI elements, such as the toolbar, address bar, and status bar. It can be particularly noticeable in contexts like the task switcher or when the app is added to the home screen. This color application can provide a more native app-like experience for your web app, especially when it's loaded in [standalone](/en-US/docs/Web/Manifest/display#standalone) mode. +The `theme_color` member specifies the default theme color for your web application's user interface. +This color may be applied to various browser UI elements, such as the toolbar, address bar, and status bar. +It can be particularly noticeable in contexts like the task switcher or when the app is added to the home screen. +This color application can provide a more native app-like experience for your web app, especially when it's loaded in [standalone](/en-US/docs/Web/Manifest/display#standalone) mode. ## Syntax @@ -22,13 +25,17 @@ The `theme_color` member specifies the default theme color for your web applicat - : A string that specifies a [valid color value](/en-US/docs/Web/CSS/color_value). > [!NOTE] - > Browsers may ignore the alpha component of the color based on the context. In most environments, `theme_color` cannot be transparent. It's recommended to use fully opaque colors (alpha value of 1 or 100%) to ensure consistent behavior across different platforms and browsers. + > Browsers may ignore the alpha component of the color based on the context. + > In most environments, `theme_color` cannot be transparent. + > It's recommended to use fully opaque colors (alpha value of 1 or 100%) to ensure consistent behavior across different platforms and browsers. ## Description -While optional, specifying a `theme_color` allows you to extend your app's visual identity beyond its content areas. Choose a `theme_color` that aligns with your app's brand guidelines, which can enhance user recognition and recall, particularly when your app is viewed alongside other applications or system interfaces. +While optional, specifying a `theme_color` allows you to extend your app's visual identity beyond its content areas. +Choose a `theme_color` that aligns with your app's brand guidelines, which can enhance user recognition and recall, particularly when your app is viewed alongside other applications or system interfaces. -In browsers that support `theme_color`, the value specified in the manifest file serves as the default theme color for your web app across all pages where the manifest is applied. You can override this default in the following ways: +In browsers that support `theme_color`, the value specified in the manifest file serves as the default theme color for your web app across all pages where the manifest is applied. +You can override this default in the following ways: - Using the [`theme-color`](/en-US/docs/Web/HTML/Element/meta/name/theme-color) value of the `name` attribute in the HTML `` element: You can specify a theme color for a web page that's different from the manifest `theme_color` specified for your app. This enables you to set unique theme colors for individual pages within your app. @@ -51,7 +58,8 @@ In browsers that support `theme_color`, the value specified in the manifest file These override methods provide you the flexibility to adapt your app's appearance for specific pages or user preferences, improving the overall user experience. -Browsers may also adjust the applied theme color based on user preferences. If a user has set a preference for light or dark mode, browsers may override the manifest `theme_color` value to support any [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query defined in your app's CSS. +Browsers may also adjust the applied theme color based on user preferences. +If a user has set a preference for light or dark mode, browsers may override the manifest `theme_color` value to support any [`prefers-color-scheme`](/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query defined in your app's CSS. ```css body { From bcaf367a62b2e8efde1bdf41607028d3ee5f14ec Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Thu, 29 Aug 2024 21:11:01 -0400 Subject: [PATCH 3/8] formatting --- files/en-us/web/manifest/theme_color/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index 505073785d8d5f7..a4ab61abfaae291 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -20,7 +20,7 @@ This color application can provide a more native app-like experience for your we ### Values -- colorValue +- `colorValue` - : A string that specifies a [valid color value](/en-US/docs/Web/CSS/color_value). From 18aa935f8590cf83c0fe38c1df4b2e1ce065e536 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 30 Aug 2024 09:47:26 -0400 Subject: [PATCH 4/8] fix values formatting --- files/en-us/web/manifest/theme_color/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index a4ab61abfaae291..8961c8dad2d67c6 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -24,10 +24,10 @@ This color application can provide a more native app-like experience for your we - : A string that specifies a [valid color value](/en-US/docs/Web/CSS/color_value). - > [!NOTE] - > Browsers may ignore the alpha component of the color based on the context. - > In most environments, `theme_color` cannot be transparent. - > It's recommended to use fully opaque colors (alpha value of 1 or 100%) to ensure consistent behavior across different platforms and browsers. + > [!NOTE] + > Browsers may ignore the alpha component of the color based on the context. + > In most environments, `theme_color` cannot be transparent. + > It's recommended to use fully opaque colors (alpha value of 1 or 100%) to ensure consistent behavior across different platforms and browsers. ## Description From 6cb73d54a2f0e35a55b9949d117dbdabd28df889 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 30 Aug 2024 09:57:30 -0400 Subject: [PATCH 5/8] fix code alignment --- files/en-us/web/manifest/theme_color/index.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index 8961c8dad2d67c6..21775670f80d51a 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -39,22 +39,22 @@ You can override this default in the following ways: - Using the [`theme-color`](/en-US/docs/Web/HTML/Element/meta/name/theme-color) value of the `name` attribute in the HTML `` element: You can specify a theme color for a web page that's different from the manifest `theme_color` specified for your app. This enables you to set unique theme colors for individual pages within your app. -```html - -``` + ```html + + ``` - Combining the `` element with media queries: You can specify the theme color to be used based on user's color scheme preference. -```html - - -``` + ```html + + + ``` These override methods provide you the flexibility to adapt your app's appearance for specific pages or user preferences, improving the overall user experience. From 0cd3be667aa94e6230228a25eefd1dfa9f263bb6 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Fri, 30 Aug 2024 13:02:26 -0400 Subject: [PATCH 6/8] fix review comments --- files/en-us/web/manifest/theme_color/index.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index 21775670f80d51a..dbb118bc194e531 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -7,9 +7,10 @@ browser-compat: html.manifest.theme_color {{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}} -The `theme_color` member specifies the default theme color for your web application's user interface. +The `theme_color` member specifies the default color for your web application's user interface. This color may be applied to various browser UI elements, such as the toolbar, address bar, and status bar. It can be particularly noticeable in contexts like the task switcher or when the app is added to the home screen. + This color application can provide a more native app-like experience for your web app, especially when it's loaded in [standalone](/en-US/docs/Web/Manifest/display#standalone) mode. ## Syntax @@ -32,12 +33,12 @@ This color application can provide a more native app-like experience for your we ## Description While optional, specifying a `theme_color` allows you to extend your app's visual identity beyond its content areas. -Choose a `theme_color` that aligns with your app's brand guidelines, which can enhance user recognition and recall, particularly when your app is viewed alongside other applications or system interfaces. +Choose a `theme_color` that aligns with your app's brand guidelines, as this can enhance user recognition and recall, particularly when your app is viewed alongside other applications or system interfaces. In browsers that support `theme_color`, the value specified in the manifest file serves as the default theme color for your web app across all pages where the manifest is applied. You can override this default in the following ways: -- Using the [`theme-color`](/en-US/docs/Web/HTML/Element/meta/name/theme-color) value of the `name` attribute in the HTML `` element: You can specify a theme color for a web page that's different from the manifest `theme_color` specified for your app. This enables you to set unique theme colors for individual pages within your app. +- Using the [`theme-color`](/en-US/docs/Web/HTML/Element/meta/name/theme-color) value of the `name` attribute in the HTML `` element: You can specify a theme color for a web page that's different from the manifest `theme_color` specified for your app. This enables you to set different theme colors for individual pages within your app. ```html From 7504a438d8a6e991ba28439fcb98207eec5e091e Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 3 Sep 2024 16:39:43 -0400 Subject: [PATCH 7/8] Apply suggestions from code review --- files/en-us/web/manifest/theme_color/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index dbb118bc194e531..265cf160e5651e9 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -16,12 +16,12 @@ This color application can provide a more native app-like experience for your we ## Syntax ```json -"theme_color": "colorValue" +"theme_color": "" ``` ### Values -- `colorValue` +- `` - : A string that specifies a [valid color value](/en-US/docs/Web/CSS/color_value). From 8b345cbdde9ab3d4bf68968297f092f1b2bc46be Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya Date: Tue, 3 Sep 2024 16:45:16 -0400 Subject: [PATCH 8/8] Update files/en-us/web/manifest/theme_color/index.md --- files/en-us/web/manifest/theme_color/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/manifest/theme_color/index.md b/files/en-us/web/manifest/theme_color/index.md index 265cf160e5651e9..3caed3f8a40b84d 100644 --- a/files/en-us/web/manifest/theme_color/index.md +++ b/files/en-us/web/manifest/theme_color/index.md @@ -94,7 +94,7 @@ body { ```json { - "name": "MyWebApp", + "name": "My First App", "display": "standalone", "background_color": "#ffffff", "theme_color": "#ff4500"