Payment integration is so simple... don't wait and monetize your business right now

AdrianBudzynski — Mon, 09 Nov 2020 16:39:31 +0000

Lately, we worked on the payment integration on our https://owwly.com website using Stripe. It turned out to be so simple, so I regret we haven't done that much earlier. If you think about that now. Don't wait any longer. Do it right now to monetize your business as soon as possible to have the power 🚀 to make it better in the future! 💪

Dark Theme for your Angular app

AdrianBudzynski — Thu, 14 May 2020 16:51:56 +0000

Hello everyone. I would like to share with you my experiences of how I implemented basic light/dark mode for our Owwly Angular web application.

Background: The last trend for the dark theme option convinced us to introduce a similar approach to our website to fulfill all user's needs - especially mine 😎.

You can also look at the real website: https://owwly.com to check the described implementation yourself in a real-world use case.

Okay, let's begin.

For start define default theme class, which is going to be your fallback CSS class and default setup for the theme:

Create the definitions for colors and put them to the one list which is going to be used later.

_colors.scss

Create an SCSS script to iterate through the colors you defined and generate the right CSS variables:

_theme.scss

To provide a smooth transition between both themes, add the CSS class for color and background transitions as below:

_animations.scss

Next, create the service responsible for themes toggling. setTimeout is not a pretty solution here, but it does the job. Thanks to it we don’t see the transitions when the page is loaded and style is set to dark. On the other hand, we don’t see page to load light and immediately change to the dark mode. A win-win solution to the rescue.

ui-style-toggle.service.ts

Initialize the theme toggle service when the app boots up to set previously selected by a user theme.

ui.module.ts

That's it, now you can use the defined values in your standard component styles as below:

It is a very basic implementation that works for us. I hope you will share your solutions on how you implemented light/dark mode in your angular websites. See ya!

Forem: AdrianBudzynski

Payment integration is so simple... don't wait and monetize your business right now

Dark Theme for your Angular app