From addc033ebeee67d346454a4ab86bcd4c9e9527d3 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sun, 17 Sep 2023 16:49:03 +0900
Subject: [PATCH] feat(blog): add theme-based element visibility

---
 apps/blog/src/app/layout.tsx               |  1 +
 apps/blog/src/styles/theme-visibility.scss | 17 +++++++++++++++++
 apps/portfolio/src/app/layout.tsx          |  1 +
 3 files changed, 19 insertions(+)
 create mode 100644 apps/blog/src/styles/theme-visibility.scss

diff --git a/apps/blog/src/app/layout.tsx b/apps/blog/src/app/layout.tsx
index 9584de7..a12624d 100644
--- a/apps/blog/src/app/layout.tsx
+++ b/apps/blog/src/app/layout.tsx
@@ -22,6 +22,7 @@ import "../styles/mark.scss"
 import "../styles/scrollbar.scss"
 import "../styles/subSup.scss"
 import "../styles/table.scss"
+import "../styles/theme-visibility.scss"
 
 import { type Metadata } from "next"
 import Image from "next/image"
diff --git a/apps/blog/src/styles/theme-visibility.scss b/apps/blog/src/styles/theme-visibility.scss
new file mode 100644
index 0000000..dd93ce2
--- /dev/null
+++ b/apps/blog/src/styles/theme-visibility.scss
@@ -0,0 +1,17 @@
+.dark-element {
+    display: none;
+}
+
+.light-element {
+    display: block;
+}
+
+:is(.dark) {
+    .dark-element {
+        display: block;
+    }
+
+    .light-element {
+        display: none;
+    }
+}
diff --git a/apps/portfolio/src/app/layout.tsx b/apps/portfolio/src/app/layout.tsx
index 01f8242..791f345 100644
--- a/apps/portfolio/src/app/layout.tsx
+++ b/apps/portfolio/src/app/layout.tsx
@@ -19,6 +19,7 @@ import "@developomp-site/blog/src/styles/mark.scss"
 import "@developomp-site/blog/src/styles/scrollbar.scss"
 import "@developomp-site/blog/src/styles/subSup.scss"
 import "@developomp-site/blog/src/styles/table.scss"
+import "@developomp-site/blog/src/styles/theme-visibility.scss"
 import "./global.scss"
 
 import { type Metadata } from "next"