Dev C++ Black Theme
Dev C++ Black Theme 2019
Dev C++ Dark Theme Download
Dev C++ Black Theme Windows 10
Dev C++ Black Theme 2020
Black Theme Dev C

Saleem Hadad • March 21, 2021

web-developmenttailwindcssjavascript

Adding the flexibility of changing a website's theme to dark mode is now a trend in web development. TailwindCSS V2 made that feature is extremely simple to do so. In this article, I'll show you how to enable the dark mode functionality using a simple switch button and store that in the localStorage.

New themes are very welcome! To add a new theme to this site either: add it through iTerm2 Color Schemes (preferable, it will automatically be used here) or through a pull request to this site's repo Windows Terminal Themes. Installing Hover Dark Areo on your Windows 10 PC is not that easy though. To install this dark theme, you’d need the help of PatchUxtheme, which is third-party software. After installing the software, you will have to move the downloaded files of Hover Dark Areo to C: Windows Resources Themes. Once you have done this, Hover Dark Areo will be. Code::Blocks is a popular integrated development environment(IDE) used for compiling codes written in various programming languages like C, C, Fortran, etc. It is a free and open-source software which is basically a collection of compilers like gcc, visual c, clang, and so on. Several plugins can be installed to increase its functionality. After successfully writing all of the above code, you can simply open index.html in browser to see the output: 👉 The http call to dark stylesheet is done only once per session. If user switches back to light theme and then again dark theme, it is loaded from cache. See the Network panel in browser devtools to see this. Microsoft Edge Dev channel adds dark theme to sidebar search Dark mode is headed to even more parts of the Edge browser. Dan Thorp-Lancaster. 24 Sep 2020 0 Source: Daniel Rubino / Windows Central.

In this article, we'll rebuild Upwork's landing page's first two sections using TailwindCSS with one additional button that enables users to switch between dark and light themes. Cool? let's get started.

Dev C++ Black Theme

Final output:

The steps we'll follow:

Create a new project.
Install the needed dependencies.
Configure PostCSS, and TailwindCSS.
Add NPM script to 'compile' the TailwindCSS directives.
Create HTML template.
Write a JavaScript script to allow users to change the theme.
Summary, code, and video tutorial.

Note: I'll assume you have basic knowledge of TailwindCSS before you read this article to get the most out of it. If you're new to TailwindCSS I advise you to take a look at this video series by the creators of TailwindCSS to understand its concept first.

Step #1: Create a new project

To create a new project, run the following command:

First, we need to generate package.json to keep track of your project's dependencies. To generate the file quickly run the following command:

Beginner note: The -y flag will fill in the questions automatically that you'll be asked by running npm init alone.

Step #2: Install the needed dependencies

Beginner note: Please insure that you have installed NodeJs on your machine.

Now, let's structure our project quickly first before we install the needed dependencies.

Run the following commands inside your project root:

After running the above commands, your project's list should look like this:

Finally, to install TailwindCSS we need the following dependencies:

postcss => To compile TailwindCSS and generate the final CSS file.
autoprefixer => we used to enable prefixing utilities for all browsers, see here.

To install all of them, run the following command:

Note: We also need to install postcss-cli to run postcss commands using the terminal. However, we need this dependency only in the dev env.

Step #3: Configure TailwindCSS, and PostCSS

In this step, we'll configure each of TailwindCSS and PostCSS in order to compile the final CSS file that includes all Tailwind utilities.

TailwindCSS

Run the following command first to generate the minimal Tailwind configurations file:

Then open the generated file tailwind.config.js and enable the dark mode by setting it to class mode.

Cool note: There are two modes we can enable the dark mode, media, and class. The difference between them is that media mode will rely on the operating system directly of our users, wherein the class mode we have more control on when to switch to dark/light regardless of the OS of our clients.

The last step is to add TailwindCSS directives into src/css/app.css:

PostCSS

We use PostCSS to compile TailwindCSS internal utilities into our final CSS file to be used in our project.

To generate the config file, run this command:

Finally, add the following config to enable both TailwinCSS and Autoprefixer as plugins.

Step #4: Add NPM script to 'compile' the TailwindCSS directives

This step is completely optional but I like to do it so that I don't need to remember the command needed every time I need to compile TailwindCSS.

The command we use to compile TailwindCSS is:

Beginner note: The command above will compile the file src/css/app.css and generate the output to any file we need via -o flag, in this case, we used public/app.css.

Finally, let's add the above command to our scripts inside package.json so that we can run an alias short command.

Now, every time you need to compile TailwindCSS, just run:

Step #5: Create HTML template.

Creating navbar:

Note: notice here we added one button with id='switchTheme' to be used later in JavaScript to toggle between the dark and light modes.

Note: as you can see, we use dark: directive to some classes so that when the dark mode is enabled, the class appended to dark: will override the default (light) one.

Hero section:

Step #6: Write JavaScript script to allow users changing theme.

In order to toggle between themes, we need first to listen to the button if clicked, we can do that using onclick method or by using the id of the button.

Note: in the code provided, I used localStorage to keep track of the selected mode because it's very simple. However, if you need something more advance as a different storage service such as DB or cookies, feel free to do so.

So far, so good, right? Yes!

However, we have one small problem, if you try to refresh the page while dark mode selected the page will go back to the light (default) theme. The reason for that is because we're not tracking the saved value of localStorage.theme once the page is loaded.

To fix this problem add the following code to your HTML's :

Step #7: Summary, code, and video tutorial.

Dev C++ Black Theme 2019

As you saw, it's very straightforward to enable the dark mode feature with just a few lines of code and the help of localStorage to keep the value stored on the client-side.

To review what we did so far in a video format, watch this video on YouTube: https://www.youtube.com/watch?v=4OM26EUodFE
You can find the source code here on my Github account.

Dev C++ Dark Theme Download

I hope you enjoyed this article as much as I am. Finally, I'll be happy to see your website (share in the comments below) if you enabled this feature.

Dev C++ Black Theme Windows 10

Final note: I'll enable it soon on my site here 😄 stay tuned.

Dev C++ Black Theme 2020

Interested to learn more about web development from me? Join me in this 4 weeks intensive virtual class:

Black Theme Dev C

Use WEB coupon at the checkout to get 45% off. Only 3 seats are available.