feat: add next themes (#395)

.changeset/fair-teachers-obey.md

@@ -0,0 +1,5 @@
+---
+'@sigle/tailwind-style': minor
+---
+
+Add dark mode styles to config.

.changeset/tall-shrimps-nail.md

@@ -0,0 +1,5 @@
+---
+'@sigle/app': minor
+---
+
+Add dark mode support with feature flag enabled.

packages/tailwind-style/dist/tailwind.css

@@ -712,20 +712,20 @@ Ensure the default browser behavior of the `hidden` attribute.
   --tw-prose-pre-bg: #1a1a1a;
   --tw-prose-th-borders: #d1d5db;
   --tw-prose-td-borders: #e5e7eb;
-  --tw-prose-invert-body: #d1d5db;
-  --tw-prose-invert-headings: #fff;
-  --tw-prose-invert-lead: #9ca3af;
-  --tw-prose-invert-links: #fff;
-  --tw-prose-invert-bold: #fff;
-  --tw-prose-invert-counters: #9ca3af;
-  --tw-prose-invert-bullets: #4b5563;
-  --tw-prose-invert-hr: #374151;
-  --tw-prose-invert-quotes: #f3f4f6;
-  --tw-prose-invert-quote-borders: #374151;
-  --tw-prose-invert-captions: #9ca3af;
-  --tw-prose-invert-code: #fff;
-  --tw-prose-invert-pre-code: #d1d5db;
-  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-body: #e5e5e5;
+  --tw-prose-invert-headings: #f2f2f2;
+  --tw-prose-invert-lead: #343434;
+  --tw-prose-invert-links: #da3a00;
+  --tw-prose-invert-bold: #e5e5e5;
+  --tw-prose-invert-counters: #e5e5e5;
+  --tw-prose-invert-bullets: #e5e5e5;
+  --tw-prose-invert-hr: #343434;
+  --tw-prose-invert-quotes: #e5e5e5;
+  --tw-prose-invert-quote-borders: #343434;
+  --tw-prose-invert-captions: #a1a1a1;
+  --tw-prose-invert-code: #f2f2f2;
+  --tw-prose-invert-pre-code: #2e2e2e;
+  --tw-prose-invert-pre-bg: #f2f2f2;
   --tw-prose-invert-th-borders: #4b5563;
   --tw-prose-invert-td-borders: #374151;
   font-size: 16px;
@@ -844,6 +844,25 @@ Ensure the default browser behavior of the `hidden` attribute.
   color: var(--tw-prose-links);
 }
 
+.dark .dark\:prose-invert {
+  --tw-prose-body: var(--tw-prose-invert-body);
+  --tw-prose-headings: var(--tw-prose-invert-headings);
+  --tw-prose-lead: var(--tw-prose-invert-lead);
+  --tw-prose-links: var(--tw-prose-invert-links);
+  --tw-prose-bold: var(--tw-prose-invert-bold);
+  --tw-prose-counters: var(--tw-prose-invert-counters);
+  --tw-prose-bullets: var(--tw-prose-invert-bullets);
+  --tw-prose-hr: var(--tw-prose-invert-hr);
+  --tw-prose-quotes: var(--tw-prose-invert-quotes);
+  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
+  --tw-prose-captions: var(--tw-prose-invert-captions);
+  --tw-prose-code: var(--tw-prose-invert-code);
+  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
+  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
+  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
+  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
+}
+
 @media (min-width: 1024px) {
   .lg\:prose-lg {
     font-size: 18px;

packages/tailwind-style/src/typography.html

@@ -1,3 +1,3 @@
 <!-- This file is used to purge the css file of unused classes -->
 <!-- If you want to add more class to the generated css add the classes here -->
-<div class="prose lg:prose-lg"></div>
+<div class="prose dark:prose-invert lg:prose-lg"></div>

packages/tailwind-style/tailwind.config.js

@@ -13,6 +13,21 @@ const gray = {
   gray12: '#080808',
 };
 
+const grayDark = {
+  gray1: '#1a1a1a',
+  gray2: '#202020',
+  gray3: '#232323',
+  gray4: '#282828',
+  gray5: '#2e2e2e',
+  gray6: '#343434',
+  gray7: '#3e3e3e',
+  gray8: '#505050',
+  gray9: '#a1a1a1',
+  gray10: '#e5e5e5',
+  gray11: '#f2f2f2',
+  gray12: '#fcfcfc',
+};
+
 const orange = {
   orange1: '#FFF9F6',
   orange2: '#FFF1EC',
@@ -29,6 +44,7 @@ const orange = {
 };
 
 module.exports = {
+  darkMode: 'class',
   content: ['./src/**/*.html'],
   theme: {
     extend: {
@@ -49,6 +65,20 @@ module.exports = {
             '--tw-prose-pre-code': gray.gray5,
             '--tw-prose-pre-bg': gray.gray11,
             '--tw-prose-hr': gray.gray6,
+            '--tw-prose-invert-body': grayDark.gray10,
+            '--tw-prose-invert-headings': grayDark.gray11,
+            '--tw-prose-invert-lead': grayDark.gray6,
+            '--tw-prose-invert-links': orange.orange11,
+            '--tw-prose-invert-bold': grayDark.gray10,
+            '--tw-prose-invert-counters': grayDark.gray10,
+            '--tw-prose-invert-bullets': grayDark.gray10,
+            '--tw-prose-invert-quotes': grayDark.gray10,
+            '--tw-prose-invert-quote-borders': grayDark.gray6,
+            '--tw-prose-invert-captions': grayDark.gray9,
+            '--tw-prose-invert-code': grayDark.gray11,
+            '--tw-prose-invert-pre-code': grayDark.gray5,
+            '--tw-prose-invert-pre-bg': grayDark.gray11,
+            '--tw-prose-invert-hr': grayDark.gray6,
           },
         },
         DEFAULT: {