Rails.application.routes.draw do
    resources :posts

    root "posts#index"
end

Now we need to make sure that the routes are pointing in the right direction. Edit your `routes.rb` file

rails generate scaffold posts
rails db:migrate

Let’s create a posts model with the generate scaffold feature to create something we can work with

Dark Mode In Ruby On Rails With Stimulus.  Image depicting a computer with a dark screensaver and a multicoloured wavy pattern.  A coffee mug to the right, and a plant to the left. WMBT Web Services

https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2

And that's it! You've successfully implemented a dark mode feature in your Ruby on Rails application using Stimulus. Users can now toggle between dark and light themes, and their preference will be remembered across sessions.

Feel free to expand on this by adding more styles, animations, or even integrating with a CSS framework like TailwindCSS for a more polished look. Happy coding!

:root {
    --background-color: white;
    --text-color: black;
}

[data-theme="dark"] {
    --background-color: black;
    --text-color: white;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}


In order to check that everything is working correctly, let’s add some style. We will just modify the background and text colour here, but you can make any variable dynamic!

<!DOCTYPE html>
<html data-theme="<%= cookies[:theme] %>">
    <head>
        <title>Dark Mode App</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>

        <%= stylesheet_link_tag 'application', media: 'all' %>
        <%= javascript_importmap_tags %>
    </head>
    <body>
        <button data-controller="theme" data-action="click->theme#toggle">Toggle Theme</button>
        <%= yield %>
    </body>
</html>


Add a button to your view to allow users to toggle the theme. For this example, we will update `application.html.erb` with a button, but you can update whichever template you prefer!

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
    static targets = ["toggle"];

    connect() {
        this.updateTheme();
    }

    toggle() {
        const newTheme = this.currentTheme() === "dark" ? "light" : "dark";
        document.cookie = `theme=${newTheme}; path=/;`
        this.updateTheme();
        location.reload(); // Reload to apply the theme immediately
    }

    updateTheme() {
        const theme = this.currentTheme();
        document.documentElement.setAttribute("data-theme", theme);
    }

    currentTheme() {
        const matches = document.cookie.match(/theme=([^;]+)/);
        return matches ? matches[1] : "dark";
    }
}

This will create a `theme_controller.js` file in `app/javascript/controllers`. Open this file and add the following code:

We'll use Stimulus to handle the theme switching on the client side without a page reload. Stimulus is included in new Rails apps by default, so we can just add a new Stimulus controller to manage the theme.

Adding Stimulus controller for Theme Switching

<!DOCTYPE html>
<html data-theme="<%= cookies[:theme] %>">
    <head>
        <title>Dark Mode App</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>

        <%= stylesheet_link_tag 'application', media: 'all' %>
        <%= javascript_importmap_tags %>
    </head>
    <body>
        <%= yield %>
    </body>
</html>

class ApplicationController < ActionController::Base
    before_action :set_theme

    private

    def set_theme
      cookies[:theme] ||= 'dark'
      cookies[:theme] = params[:theme] if params[:theme].in? ['dark', 'light']
    end
end

This code sets a default theme of 'dark' and allows the theme to be switched via a URL parameter.

To manage our themes, we'll use cookies to store the user's preference. Add the following code to your `application_controller.rb`:

Adding the Theme Setting to the Application Controller

Now, we'll update our `application.html.erb` to apply the theme:

First things first, let’s create a new Rails app.  

In this tutorial, we'll walk through how to implement a dark mode feature in a Ruby on Rails application using Stimulus. We'll start by creating a new Rails app, then add the necessary code to support theme switching between dark and light modes.

Quick start a React Native App with NodeJS back. The react native logo on the left, and the NodeJS logo on the right.  WMBT Web Services

**Step 1**: Create a New Repo from the Template

* **Use the Template**:
  * Head to the [public template repository on GitHub](https://github.com/isMattCoding/react-native-node)
  * Hit that "Use this Template" button on our GitHub repo.

* **Name It and Claim It**:
  * Choose your `OWNER_NAME` and `REPOSITORY_NAME`.
  * Decide if you want it Public or Private.

* **Boom! New Repo Created**:
  * Congrats, champ! 🥳 Your new project is ready to roll.

And there you have it! 🚀 With our template, you’re all set to kickstart your React Native and Node journey. No more setup blues—just pure, unadulterated coding joy. Happy hacking, folks! 💻🎉

If you liked this post, give it a share and spread the love. Got questions or feedback? Contact me using the contact link below. Let’s build something amazing! 🚀

We love contributions! Found a bug? Got a killer feature idea? Dive in—open an issue or submit a pull request. Let’s make this template even more awesome together.

Our template comes pre-packed with some seriously cool features:

* **TailwindCSS**: For those sleek, responsive designs.
* **Knex**: Making SQL queries feel like a breeze.
* **JWT Authentication**: Secure your app with built-in user tables and JWT.

* **Celebrate**:
  * 🎉 Open up your browser to `localhost:8081` and witness the magic unfold!

git clone https://github.com/OWNER_NAME/REPOSITORY_NAME.git
cd REPOSITORY_NAME

So, how do you dive in? It's as easy as pie. 🥧 Here’s your quick guide: 

Introducing our **React Native App with Node Backend Template**! This gem is your one-stop shop for spinning up a new project with all the bells and whistles already in place. It’s like getting a head start in a marathon—less sweat, more win. 🏅

🌟 Ever find yourself tangled up in the web of setting up a React Native app with a Node.js backend? Say no more! We've got the perfect starter template to zap you straight into productivity mode. 🚀

✨🤳 Quick Start React Native/Node Projects with Our Template! 🤳✨

Bonjour, hi!