diff --git a/package.json b/package.json
index f610c76..0ac2935 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "test:unit": "vitest --environment jsdom --root src/",
     "test:e2e": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test preview https://localhost:4173/ 'cypress run --e2e --config video=false,screenshotOnRunFailure=false'",
     "test:e2e:dev": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test 'vite dev --port 4173 --host' https://localhost:4173/ 'cypress open --e2e'",
-    "test:visual:ci": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test 'npm run test:visual:dev' http://localhost:3001 'test:visual --ci'",
+    "test:visual:ci": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test 'npm run test:visual:dev' http://localhost:3001 'test:visual'",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
diff --git a/src/assets/main.css b/src/assets/main.css
index ee21189..32a9354 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -2,9 +2,19 @@
 @import "./form.css";
 
 :root,
-:root:not([data-theme]) {
-  --primary: hsl(195 85% 35% / 1);
-  --primary-hover: hsl(195 85% 45% / 1);
+:root:not([data-theme]),
+/* or data-theme is light */
+:root:not([data-theme=dark]),
+[data-theme=light] {
+  --primary: hsl(195 85% 35%);
+  --primary-hover: hsl(195 85% 45%);
+  --muted-color: hsl(205, 10%, 45%);
+}
+
+:root,
+:root:not([data-theme]),
+[data-theme=dark],
+:root:not([data-theme=light]) {
   --muted-color: hsl(205, 10%, 60%);
 }
 
@@ -12,6 +22,22 @@ a {
   --color: hsl(195 85% 41%);
 }
 
+:root a,
+:root:not([data-theme]) a,
+/* or data-theme is light */
+:root:not([data-theme=dark]) a,
+[data-theme=light] a {
+  --color: hsl(195 85% 35%);
+}
+
+:root p,
+:root:not([data-theme]) p,
+/* or data-theme is light */
+:root:not([data-theme=dark]) p,
+[data-theme=light] p {
+  --color: var(--text-color);
+}
+
 body {
   min-height: 100vh;
   text-rendering: optimizeLegibility;
diff --git a/src/stories/NavBar.stories.ts b/src/stories/NavBar.stories.ts
index 5d00fa6..d65a4e5 100644
--- a/src/stories/NavBar.stories.ts
+++ b/src/stories/NavBar.stories.ts
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/vue3";
 import NavBar from "@/components/NavBar.vue";
 
 import { useUserStore } from "@/stores/user";
+import { expect, userEvent, within } from "@storybook/test";
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta: Meta<typeof NavBar> = {
@@ -31,6 +32,31 @@ export const LoggedIn: Story = {
   }),
 };
 
+export const DropdownOpen: Story = {
+  render: () => ({
+    components: { NavBar },
+    setup() {
+      const user = useUserStore();
+      user.isAuthenticated = true;
+    },
+    template: "<NavBar />",
+  }),
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+
+    // There should be no logout text visible. It will be in the dom, but not visible
+    expect(canvas.queryByText("Logout")).not.toBeVisible();
+
+    // First we click on the text "my account"
+    const myAccount = canvas.getByText("My Account");
+    // Click on the "My Account" text
+    await userEvent.click(myAccount);
+    // There should be a visible "Logout"
+    const logout = canvas.getByText("Logout");
+    expect(logout).toBeVisible();
+  },
+};
+
 export const Loading: Story = {
   render: () => ({
     components: { NavBar },