fix: blog editor text visibility in dark mode #149

.stylelintrc

@@ -0,0 +1,98 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
+    "stylelint-config-recommended-vue"
+  ],
+  "plugins": ["stylelint-order"],
+  "rules": {
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "tailwind",
+          "apply",
+          "layer",
+          "variants",
+          "responsive",
+          "screen",
+          "if",
+          "each",
+          "include",
+          "mixin",
+          "function",
+          "return"
+        ]
+      }
+    ],
+    "declaration-block-trailing-semicolon": null,
+    "no-descending-specificity": null,
+    "order/order": [
+      "custom-properties",
+      "dollar-variables",
+      "declarations",
+      "rules",
+      "at-rules"
+    ],
+    "order/properties-order": [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "display",
+      "justify-content",
+      "align-items",
+      "flex-direction",
+      "flex-grow",
+      "flex-shrink",
+      "flex-basis",
+      "flex-wrap",
+      "flex",
+      "grid",
+      "grid-template-columns",
+      "grid-template-rows",
+      "grid-column-gap",
+      "grid-row-gap",
+      "gap",
+      "width",
+      "min-width",
+      "max-width",
+      "height",
+      "min-height",
+      "max-height",
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "border",
+      "border-radius",
+      "background",
+      "background-color",
+      "background-image",
+      "background-position",
+      "background-repeat",
+      "background-size",
+      "color",
+      "font-family",
+      "font-size",
+      "font-weight",
+      "line-height",
+      "text-align",
+      "text-transform",
+      "text-decoration",
+      "opacity",
+      "visibility",
+      "transform",
+      "transition",
+      "animation"
+    ]
+  }
+}

src/index.css

@@ -1,6 +1,43 @@
+/* stylelint-disable at-rule-no-unknown */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+/* stylelint-enable at-rule-no-unknown */
+
+/* Jodit Editor Dark Mode Styles */
+.dark .jodit-wysiwyg,
+.dark .jodit-wysiwyg * {
+  color: #e5e7eb !important; /* Light gray text in dark mode */
+  background-color: #1f2937 !important; /* Dark background */
+}
+
+.dark .jodit-container:not(.jodit_inline) {
+  border: 1px solid #374151 !important; /* Border color for dark mode */
+}
+
+.dark .jodit-toolbar__box,
+.dark .jodit-toolbar-editor-collection,
+.dark .jodit-toolbar-button {
+  background-color: #1f2937 !important; /* Toolbar background in dark mode */
+  border-color: #374151 !important; /* Toolbar border in dark mode */
+}
+
+.dark .jodit-toolbar-button__button {
+  color: #e5e7eb !important; /* Toolbar button icons in dark mode */
+}
+
+.dark .jodit-toolbar-button:hover:not([disabled]) {
+  background-color: #374151 !important; /* Hover state for toolbar buttons */
+}
+
+.dark .jodit-placeholder {
+  color: #9ca3af !important; /* Placeholder text in dark mode */
+}
+
+/* Ensure the editor content area has proper contrast */
+.dark .jodit-wysiwyg {
+  padding: 1rem;
+}
 
 .homebg {
   background-image: url("./assets/herosection.avif");

vscode-settings.json

@@ -0,0 +1,21 @@
+{
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.validate": ["css", "postcss"],
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "tailwindCSS.includeLanguages": {
+    "javascript": "javascriptreact",
+    "html": "HTML"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": true
+  },
+  "stylelint.snippet": ["css", "postcss"],
+  "stylelint.enable": true,
+  "files.associations": {
+    "*.css": "postcss"
+  }
+}