Merge branch 'master' into upgrade-to-v5

Author: pramodreddysareddy

content/blog/announcing-chapel-1-33.md

@@ -0,0 +1,13 @@
+---
+title: Announcing Chapel 1.33!
+date: 2023-12-14T23:14:56.509Z
+externalLink: https://chapel-lang.org/blog/posts/announcing-chapel-1.33/
+author: Brad Chamberlain
+authorimage: https://chapel-lang.org/blog/authors/brad-chamberlain/photo.jpg
+disable: false
+tags:
+  - opensource
+  - HPC
+  - chapel
+---
+External blog

content/blog/dark-mode-theming-in-grommet-adding-dark-and-light-theme-modes.md

@@ -1,13 +1,13 @@
 ---
-title: "Dark Mode Theming in Grommet: Adding dark and light theme modes"
-date: 2020-10-21T12:49:17.679Z
+title: "Dark Mode Theming in Grommet - Part 2: Adding dark and light theme modes"
+date: 2023-12-15T15:46:57.782Z
 featuredBlog: false
 priority: null
 author: Matt Glissmann
 authorimage: /img/blogs/Avatar1.svg
 thumbnailimage: null
 tags:
-  - Grommet
+  - grommet
   - theme
   - mode
   - opensource
@@ -16,46 +16,44 @@ tags:
 
 In [Part 1](/blog/dark-mode-theming-in-grommet-how-to-set-up-and-apply-a-theme) of this 3-part series on Grommet’s support for light and dark modes, I covered setting up a simple Grommet app and applying a theme to that app. Here in Part 2, I’ll guide you through the steps required to implement dark/light theme modes. At the conclusion of this post, the app will have some basic UI components and a control to toggle the interface between light and dark modes.
 
-- [Part 1 - How to set up and apply a Theme](/blog/dark-mode-theming-in-grommet-how-to-set-up-and-apply-a-theme)
-- Part 2 - Adding dark and light theme modes
-- Part 3 - Theme color customizations
+* [Part 1 - How to set up and apply a Theme](/blog/dark-mode-theming-in-grommet-how-to-set-up-and-apply-a-theme)
+* Part 2 - Adding dark and light theme modes
+* [Part 3 - Theme color customizations](https://developer.hpe.com/blog/dark-mode-theming-in-grommet-theme-color-customization/)
 
 In this post, I’ll cover content regarding adding a theme toggle button, including:
-  
+
 * Introducing the `themeMode` prop, which allows specifying which version of the theme the app renders.
 
 * Adding a button to the interface to serve as a control to toggle the value that gets passed to `themeMode`. 
 
 ![f10thememodetoggle](https://hpe-developer-portal.s3.amazonaws.com/uploads/media/2020/9/f10thememodetoggle-1603286872853.gif)
 
 ## Adding a Theme Toggle Button
+
 For this exercise, you’ll continue modifying your app from the example you created in Part 1 of this series.  If you are catching up and joining midstream, you can reference this [Codesandbox](https://codesandbox.io/s/grommet-theme-toggle-1adding-theme-rg91i?file=/src/App.js).
-   
+
 First, I’m going to show you how to add a button that, when clicked, will toggle the theme between light and dark modes.
-    
-In App.js:
-    
-Add the [_**themeMode**_](https://v2.grommet.io/grommet#themeMode) prop to the `<Grommet>` component and set its value to `"dark"`. The value referenced by `themeMode` specifies whether Grommet should use the dark or light versions of the theme.
 
+In App.js:
 
+Add the ***[themeMode](https://v2.grommet.io/grommet#themeMode)*** prop to the `<Grommet>` component and set its value to `"dark"`. The value referenced by `themeMode` specifies whether Grommet should use the dark or light versions of the theme.
 
 ```javascript
-  <Grommet full theme={theme} themeMode="dark">
+  <Grommet full theme={grommet} themeMode="dark">
 ```
 
 This should result in:
 
-
 ![f4part 2 toggle](https://hpe-developer-portal.s3.amazonaws.com/uploads/media/2020/9/f4part-2-toggle-1603286827841.png)
 
 Next, add a button to serve as the toggle control.
-      
+
 Import `Button` as a component from Grommet
-     
 
 ```javascript
 import { Grommet, Anchor, Box, Button, List, Heading, Paragraph, Text } from "grommet";
 ```
+
 Below the `<List>`, add a theme toggle button with some formatting props and an `onClick` handler.
 
 ```javascript
@@ -67,23 +65,22 @@ Below the `<List>`, add a theme toggle button with some formatting props and an
     onClick={() => {}} 
   />
 ```
+
 ## Enable Toggling of ThemeMode’s State
+
 Next, make the theme mode dynamic by adding a variable `darkMode` to hold the current theme mode, storing it in the component’s state, and adjusting the state each time the theme toggle button is clicked.
-   
-Create variable `darkMode` and its state using React’s [`useState` Hook](https://reactjs.org/docs/hooks-state.html).
 
+Create variable `darkMode` and its state using React’s [`useState` Hook](https://reactjs.org/docs/hooks-state.html).
 
 ```javascript
 const App = () => {
  const [darkMode, setDarkMode] = React.useState(false);
   return (
    <Grommet full theme={grommet} themeMode="dark">
-
 ```
 
 Modify the button’s `onClick` handler to toggle `darkMode` between `true` and `false`.
 
-
 ```html
 <Button
     label="Toggle Theme"
@@ -92,27 +89,25 @@ Modify the button’s `onClick` handler to toggle `darkMode` between `true` and
     margin="large"
     onClick={() => setDarkMode(!darkMode)}
   />
-
 ```
 
 Next, replace `themeMode`’s value to be “dark” when `darkMode` is true, and “light” when `darkMode` is false.
 
-```javascript 
-<Grommet full theme={theme} themeMode={darkMode ? "dark" : "light"} >
+```javascript
+<Grommet full theme={grommet} themeMode={darkMode ? "dark" : "light"} >
 ```
 
 The theme mode toggling should be good to go. Give the toggle button a few clicks!
 
 ![f2thememodetogglemid](https://hpe-developer-portal.s3.amazonaws.com/uploads/media/2020/9/f2thememodetogglemid-1603286807584.gif)
 
 ## Incorporating More Visual Interest
+
 Finally, to better demonstrate a changing theme, let’s add some more interesting visuals to the application.
 
 Remove the following from App.js
 
- 
 ```javascript
-
    <Paragraph>We will be modifying this project to:</Paragraph>
     <List data={projectTasks}>
       {(task, index) => (
@@ -125,16 +120,13 @@ Remove the following from App.js
 
 Then, import the DemoSection from `DemoSection.js` and add it below the toggle button. DemoSection contains a sampling of Grommet components to better demonstrate the effect themeMode has across components.
 
-
 ```javascript
   import { DemoSection } from "./DemoSection";	
 ```
 
 Then add DemoSection directly beneath this button.
 
-
 ```javascript
-
       <Button
          label="Toggle Theme"
          primary
@@ -150,7 +142,7 @@ At this point, your code and resulting app should resemble what is shown in this
 ![f14part 2 non animated white theme toggle](https://hpe-developer-portal.s3.amazonaws.com/uploads/media/2020/9/f14part-2-non-animated-white-theme-toggle-1603286900031.png)
 
 As quick review, here’s what we’ve done to modify the app:
-      
+
 * Added `themeMode` as a prop on the `<Grommet>` component. The value provided to `themeMode` specifies which mode of the theme to use.
    
 * Created a state variable called `darkMode` to store whether the theme should currently be in dark mode.
@@ -159,4 +151,4 @@ As quick review, here’s what we’ve done to modify the app:
    
 * Added a `<Button>` to serve as control to toggle the theme mode by toggling the state of `darkMode`.
    
-* Lastly, made the app interface a bit more interesting to demonstrate how various components are affected by toggling the `themeMode`.That’s it for Part 2! In Part 3, I’ll demonstrate how to customize a theme with custom dark and light mode colors. Don’t forget to check back at the HPE DEV blog to catch Part 3 of this series. Again, if you have any questions, please feel free to reach out to me and others in the Grommet group on our Slack channel.
+* Lastly, made the app interface a bit more interesting to demonstrate how various components are affected by toggling the `themeMode`. That’s it for Part 2! In [Part 3](https://developer.hpe.com/blog/dark-mode-theming-in-grommet-theme-color-customization/), I’ll demonstrate how to customize a theme with custom dark and light mode colors. Don’t forget to check back at the HPE DEV blog to catch [Part 3](https://developer.hpe.com/blog/dark-mode-theming-in-grommet-theme-color-customization/) of this series. Again, if you have any questions, please feel free to reach out to me and others in the Grommet group on our Slack channel.

content/blog/dark-mode-theming-in-grommet-how-to-set-up-and-apply-a-theme.md

@@ -1,92 +1,100 @@
 ---
-title: "Dark Mode Theming in Grommet: How to set up and apply a theme"
-date: 2020-10-14T07:50:10.733Z
-author: Matt Glissmann 
-tags: ["grommet","opensource"]
-authorimage: "/img/blogs/Avatar6.svg"
-featuredBlog: false
-priority:
-thumbnailimage:
+title: "Dark Mode Theming in Grommet - Part 1: How to set up and apply a theme"
+date: 2023-12-15T15:45:24.933Z
+featuredBlog: true
+priority: 3
+author: Matt Glissmann
+authorimage: /img/blogs/Avatar6.svg
+thumbnailimage: null
+tags:
+  - grommet
+  - opensource
 ---
 ![darkmode intro part1](https://hpe-developer-portal.s3.amazonaws.com/uploads/media/2020/9/darkmode-intro-part1-1603293464825.png)
 
 This post is Part 1 of a three-part series.
 
-- Part 1 - How to set up and apply a theme
-- Part 2 - Adding dark and light theme modes
-- Part 3 - Theme color customization
+* Part 1 - How to set up and apply a theme
+* [Part 2 - Adding dark and light theme modes](https://developer.hpe.com/blog/dark-mode-theming-in-grommet-adding-dark-and-light-theme-modes/)
+* [Part 3 - Theme color customization](https://developer.hpe.com/blog/dark-mode-theming-in-grommet-theme-color-customization/)
 
 As a UI/UX developer at HPE, I use [Grommet](https://grommet.io) extensively. I am also a regular contributor on the [Grommet Slack](https://grommet.slack.com) channels where the Theming capabilities, especially Grommet’s support for light and dark modes, are a consistent topic of interest. 
 
 [Grommet](https://grommet.io) has robust support for light and dark themes. Due to the apparent interest in this topic, I thought I’d share my approach on how to get started with theme mode styling in [Grommet](https://grommet.io). 
 
 To illustrate the method I use, I’m going to create a simple application demonstrating the ability to toggle between light and dark modes. By the end of this 3-part blog series, I will have demonstrated how to:
 
-- Apply a theme in a Grommet application
-- Incorporate dark and light theme modes
-- Modify a theme to apply custom colors in dark and light modes
+* Apply a theme in a Grommet application
+* Incorporate dark and light theme modes
+* Modify a theme to apply custom colors in dark and light modes
 
 The final product will be a simple application with a custom theme applied and the ability for a user to toggle between the app’s light and dark modes.
 
 <img src="https://hpe-developer-portal.s3.amazonaws.com/uploads/media/2020/9/themetutorialapp-1602698870239.gif" style="height:300px, width:300px" />
 
 # Setup for the tutorial
+
 ## Prerequisites
+
 This tutorial assumes familiarity with HTML, JavaScript, and React. However, even if any of these are new to you, you should be able to follow along and complete the exercise.
 
 ## Get the Starter Code
+
 Open this [starting code](https://codesandbox.io/s/grommet-theme-toggle-0starter-1k1cv?file=/src/App.js) in your browser. Create your own copy by clicking 'Fork' from the menu in the upper right corner. The starter app will look like this:
 
 <img src="https://hpe-developer-portal.s3.amazonaws.com/uploads/media/2020/9/picture-2-1602661773922.png"  />
 
 ## Starter Code Orientation
+
 ### Development Environment
-For this tutorial, I’m using [Codesandbox](https://codesandbox.io/) as the development environment. [Codesandbox](https://codesandbox.io/)  presents the user with: 
 
-- An interface for the project’s file and directory structure
-- A text editor for editing files
-- A browser window to view and interact with the application
+For this tutorial, I’m using [Codesandbox](https://codesandbox.io/) as the development environment. Codesandbox  presents the user with: 
+
+* An interface for the project’s file and directory structure
+* A text editor for editing files
+* A browser window to view and interact with the application
 
 ### Project Structure and Dependencies
+
 The project structure mimics a minimal Create React App (CRA) structure and is organized like so:
 
-- /public
-  - index.html (this gets loaded by the browser and is what renders src/index.js)
-- /src
-  - index.js (This is the project’s root file. I won’t be modifying it.)
-  - App.js
-  - DemoSection.js (This is a component I will use later in the tutorial)
-- Package.json (Create React App ships with `react`, `react-dom`, and `react-scripts` as dependencies. Additionally, I’ve added `grommet` and its peer dependency, `styled-components`, to the starter project.)
+* /public
+
+  * index.html (this gets loaded by the browser and is what renders src/index.js)
+* /src
+
+  * index.js (This is the project’s root file. I won’t be modifying it.)
+  * App.js
+  * DemoSection.js (This is a component I will use later in the tutorial)
+* Package.json (Create React App ships with `react`, `react-dom`, and `react-scripts` as dependencies. Additionally, I’ve added `grommet` and its peer dependency, `styled-components`, to the starter project.)
 
 ### App.js
+
 For this tutorial, most of the development will happen in App.js. The App.js file consists of three parts; imports, projectTasks array, and the App component.
 
 Import of React and Grommet components:
 
-
 ```javascript
 import React from "react";
 import { Grommet, Anchor, Box, List, Heading, Paragraph, Text } from "grommet";
 ```
 
 `projectTasks` array with the tasks to be implemented
 
-
 ```javascript
 const projectTasks = [
  "Apply a Theme - Add an existing theme to provide some styling",
  `Add Theme Toggle Button - Add a button, which when clicked,
  will toggle the theme between light and dark modes`,
  "Customize Theme - Add custom colors to theme"
 ];
-````
+```
 
 The `App` is composed of the following Grommet components:
 
-- `<Grommet>` is the top level Grommet container
-- `<Box>` for some basic page layout
-- For the page’s content, I have `<Heading>`,`< Paragraph>`, and `<List>` which iterates over the `projectTasks` array, returning a `<Text>` component for each task.
-
+* `<Grommet>` is the top level Grommet container
+* `<Box>` for some basic page layout
+* For the page’s content, I have `<Heading>`,`< Paragraph>`, and `<List>` which iterates over the `projectTasks` array, returning a `<Text>` component for each task.
 
 ```javascript
 const App = () => {
@@ -115,36 +123,29 @@ export default App;
 ```
 
 # Applying a Theme
-To provide some initial styling, I’ll apply the `grommet` theme. In Part 3 of this series, I will show you how to customize and incorporate a custom theme.
+
+To provide some initial styling, I’ll apply the `grommet` theme. In [Part 3](https://developer.hpe.com/blog/dark-mode-theming-in-grommet-theme-color-customization/) of this series, I will show you how to customize and incorporate a custom theme.
 
 In App.js, import and apply the Grommet theme:
 
 Import grommet theme
 
-
-```javascript 
+```javascript
  import { grommet } from "grommet"; 
-````
+```
 
 Apply it by adding `theme={grommet}` to the Grommet component.
 
-
 ```javascript
  <Grommet full theme={grommet}>
 ```
 
-
-
-
 ![matt1-picture 3](https://hpe-developer-portal.s3.amazonaws.com/uploads/media/2020/9/picture-3-1602661789429.png)
 
-
-
 ![matt1-picture 4](https://hpe-developer-portal.s3.amazonaws.com/uploads/media/2020/9/picture-4-1602661802053.png)
 
 Your code and resulting app should resemble this [Codesandbox](https://codesandbox.io/s/grommet-theme-toggle-1adding-theme-rg91i?file=/src/App.js), and the app’s UI should have updated with the applied theme. 
 
 At this point, you now have an understanding for how to apply a theme to a Grommet app. This is the foundation from which we will build custom theming. In my next post, I will show you how to add dark/light theming and give users control over toggling between theme modes. In my final post, I will wrap up with a how to customize a theme with custom dark and light mode colors.
 
-Stay tuned to the [HPE DEV blog](/blog) to catch Parts 2 and 3 of this series. If you have any questions, please feel free to reach out to me and others in the Grommet group on our [Slack channel](https://app.slack.com/client/T04LMHMUT/C04LMHN59).
-
+Stay tuned to the [HPE DEV blog](/blog) to catch Parts [2](https://developer.hpe.com/blog/dark-mode-theming-in-grommet-adding-dark-and-light-theme-modes/) and [3](https://developer.hpe.com/blog/dark-mode-theming-in-grommet-theme-color-customization/) of this series. If you have any questions, please feel free to reach out to me and others in the Grommet group on our [Slack channel](https://app.slack.com/client/T04LMHMUT/C04LMHN59).