Back to the Learning!

Laracasts is packed full with over 1,000 lessons just like this one.
Sign up to get full access or log in to your account and sit back.

Watch everything for $15/mo Log In

Build A Laravel App With TDD

Subscribe to Series

Build a Theme Switcher

Episode 38 Run Time 15:07

Now that we have multiple UI themes available to us, the next step is to construct a theme switcher that we'll position in the navigation bar of our site. Because there's behavior associated with each theme button, we'll use Vue to build this little component.

View the source code for this episode on GitHub.

Publish Date: March 28, 2019

Previous Next

vue theme component javascript

01

Episode 1 Run Time 2:31

Meet Birdboard
02

Episode 2 Run Time 12:48

Let's Begin With a Test
03

Episode 3 Run Time 5:32

Testing Request Validation
04

Episode 4 Run Time 7:33

Model Tests
05

Episode 5 Run Time 11:17

A Project Requires An Owner
06

Episode 6 Run Time 11:39

Scoping Projects
07

Episode 7 Run Time 6:38

The Create Project View
08

Episode 8 Run Time 8:19

Prepping the Frontend
09

Episode 9 Run Time 16:39

Go Go Gadget Tailwind
10

Episode 10 Run Time 16:56

Grid Spacing and Card Tweaks
11

Episode 11 Run Time 12:20

Styling the Project Page
12

Episode 12 Run Time 15:24

A Project Can Have Tasks
13

Episode 13 Run Time 9:11

Task UI Updates
14

Episode 14 Run Time 18:31

Task UI Updates: Part 2
15

Episode 15 Run Time 5:05

Touch It
16

Episode 16 Run Time 18:04

Notes and Policies
17

Episode 17 Run Time 16:35

Improve Test Arrangements With Factory Classes
18

Episode 18 Run Time 14:06

Reduce Form Duplication
19

Episode 19 Run Time 12:40

Sometimes Validation With Form Requests
20

Episode 20 Run Time 13:39

Project Activity Feeds
21

Episode 21 Run Time 13:53

Project Activity Feeds: Part 2
22

Episode 22 Run Time 5:57

Project Activity Feeds: Part 3
23

Episode 23 Run Time 12:08

Project Activity Feeds: Cleanup
24

Episode 24 Run Time 10:35

Rendering Activity With Polymorphism
25

Episode 25 Run Time 12:00

The Subject of the Activity
26

Episode 26 Run Time 15:49

Recording Model Changes
27

Episode 27 Run Time 21:47

Get Into The Refactor Flow
28

Episode 28 Run Time 13:51

Tweaking the Activity Card
29

Episode 29 Run Time 7:57

Authorized Users Can Delete Projects
30

Episode 30 Run Time 12:43

Layered Tests and Invitations
31

Episode 31 Run Time 14:08

Beware False Positives
32

Episode 32 Run Time 7:26

Gravatars and Helper Functions
33

Episode 33 Run Time 15:11

Inviting Users as a Feature Test
34

Episode 34 Run Time 13:57

Validation Errors For Multiple Forms
35

Episode 35 Run Time 6:03

Invited Users May Not Delete Projects
36

Episode 36 Run Time 14:06

Easy Tailwind Themes Using CSS Variables
37

Episode 37 Run Time 2:15

Completed Themes Review
Episode 38 Run Time 15:07

Build a Theme Switcher
39

Episode 39 Run Time 12:20

The New Project Modal
40

Episode 40 Run Time 17:51

The New Project Modal: Behavior
41

Episode 41 Run Time 4:45

The New Project Modal: Tasks
42

Episode 42 Run Time 20:44

Object-Oriented JavaScript
43

Episode 43 Run Time 23:27

Make a Dropdown Vue Component
44

Episode 44 Run Time 1:37

Wrap it Up

Back to the Learning!

Build A Laravel App With TDD

Build a Theme Switcher

Meet Birdboard

Let's Begin With a Test

Testing Request Validation

Model Tests

A Project Requires An Owner

Scoping Projects

The Create Project View

Prepping the Frontend

Go Go Gadget Tailwind

Grid Spacing and Card Tweaks

Styling the Project Page

A Project Can Have Tasks

Task UI Updates

Task UI Updates: Part 2

Touch It

Notes and Policies

Improve Test Arrangements With Factory Classes

Reduce Form Duplication

Sometimes Validation With Form Requests

Project Activity Feeds

Project Activity Feeds: Part 2

Project Activity Feeds: Part 3

Project Activity Feeds: Cleanup

Rendering Activity With Polymorphism

The Subject of the Activity

Recording Model Changes

Get Into The Refactor Flow

Tweaking the Activity Card

Authorized Users Can Delete Projects

Layered Tests and Invitations

Beware False Positives

Gravatars and Helper Functions

Inviting Users as a Feature Test

Validation Errors For Multiple Forms

Invited Users May Not Delete Projects

Easy Tailwind Themes Using CSS Variables

Completed Themes Review

Build a Theme Switcher

The New Project Modal

The New Project Modal: Behavior

The New Project Modal: Tasks

Object-Oriented JavaScript

Make a Dropdown Vue Component

Wrap it Up

Want us to email you occasionally with Laracasts news?