chore: normal b&w dark mode

Author: meroxdotdev

_sass/themes/_dark.scss

@@ -2,112 +2,120 @@
   color-scheme: dark;
 
   /* Framework color */
-  --main-bg: rgb(24 24 37);
-  --mask-bg: rgb(69 71 90);
-  --main-border-color: rgb(69 71 90);
+  --main-bg: #0d1117; /* Deep black with a slight blue tint, inspired by modern dark themes */
+  --mask-bg: #161b22; /* Slightly lighter dark gray for overlays */
+  --main-border-color: #21262d; /* Subtle gray for borders */
 
   /* Common color */
-  --text-color: rgb(205 214 244);
-  --text-muted-color: rgb(186 194 222);
-  --text-muted-highlight-color: rgb(170 190 255); /* replaced pink */
-  --heading-color: rgb(116 199 236);
-  --label-color: rgb(180 190 254);
-  --blockquote-border-color: rgb(69 71 90);
-  --blockquote-text-color: rgb(186 194 222);
-  --link-color: rgb(137 180 250);
-  --link-underline-color: rgb(137 180 250);
-  --button-bg: rgb(69 71 90);
-  --btn-border-color: rgb(69 71 90);
-  --btn-backtotop-color: var(--text-color);
-  --btn-backtotop-border-color: rgb(69 71 90);
-  --card-header-bg: rgb(49 50 68);
-  --card-bg: rgb(30 30 46);
-  --checkbox-color: rgb(235 160 172);
-  --checkbox-checked-color: var(--link-color);
-  --img-bg: radial-gradient(circle, rgb(17 17 27) 0%, rgb(24 24 37) 100%);
-  --shimmer-bg: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(58 55 55 / 40%) 50%, rgb(255 255 255 / 0%) 100%);
+  --text-color: #c9d1d9; /* Light gray for body text, high readability */
+  --text-muted-color: #8b949e; /* Muted gray for secondary text */
+  --text-muted-highlight-color: #b3bac5; /* Slightly brighter for hover states */
+  --heading-color: #e6edf3; /* Near-white for headings, high contrast */
+  --label-color: #b3bac5; /* Light gray for labels */
+  --blockquote-border-color: #30363d; /* Dark gray for blockquote borders */
+  --blockquote-text-color: #8b949e; /* Muted gray for blockquote text */
+  --link-color: #58a6ff; /* Vibrant blue for links, inspired by tech themes */
+  --link-underline-color: #2f81f7; /* Darker blue for link underlines */
+  --button-bg: #161b22; /* Dark gray for buttons */
+  --btn-border-color: #30363d; /* Subtle border for buttons */
+  --btn-backtotop-color: var(--text-color); /* Matches text color */
+  --btn-backtotop-border-color: #21262d; /* Matches main border */
+  --card-header-bg: #161b22; /* Consistent dark gray for card headers */
+  --checkbox-color: #6e7681; /* Muted gray for checkboxes */
+  --checkbox-checked-color: var(--link-color); /* Blue for checked state */
+  --img-bg: radial-gradient(circle, #0d1117 0%, #161b22 100%); /* Darker gradient for images */
+  --shimmer-bg: linear-gradient(
+    90deg,
+    rgb(255 255 255 / 0%) 0%,
+    rgb(88 166 255 / 20%) 50%, /* Subtle blue shimmer */
+    rgb(255 255 255 / 0%) 100%
+  );
 
   /* Sidebar */
-  --site-title-color: var(--text-color);
-  --site-subtitle-color: rgb(186 194 222);
-  --sidebar-bg: rgb(30 30 46);
-  --sidebar-border-color: rgb(69 71 90);
-  --sidebar-muted-color: rgb(166 173 200);
-  --sidebar-active-color: rgb(250 179 135);
-  --sidebar-hover-bg: rgb(17 17 27);
-  --sidebar-btn-bg: rgb(30 30 46);
-  --sidebar-btn-color: rgb(166 173 200);
-  --avatar-border-color: rgb(69 71 90);
+  --site-title-color: #ffffff; /* Alb perfect pentru modul dark */
+  --site-subtitle-color: #8b949e; /* Muted for subtitle */
+  --sidebar-bg: #0d1117; /* Matches main background */
+  --sidebar-border-color: #21262d; /* Consistent border color */
+  --sidebar-muted-color: #8b949e; /* Muted for sidebar text */
+  --sidebar-active-color: #ffffff; /* Bright white for active states */
+  --sidebar-hover-bg: #161b22; /* Slightly lighter hover state */
+  --sidebar-btn-bg: #21262d; /* Dark gray for sidebar buttons */
+  --sidebar-btn-color: #8b949e; /* Muted button text */
+  --avatar-border-color: rgb(201 209 217 / 90%); /* Light gray for avatar borders */
 
   /* Topbar */
-  --topbar-bg: rgb(24 24 37 / 64%);
-  --topbar-text-color: var(--text-color);
-  --search-border-color: rgb(69 71 90);
-  --search-icon-color: var(--text-color);
-  --input-focus-border-color: rgb(250 180 100); /* replaced orange */
+  --topbar-bg: rgb(13 17 23 / 80%); /* Semi-transparent deep black */
+  --topbar-text-color: var(--text-color); /* Matches body text */
+  --search-border-color: #30363d; /* Dark gray for search borders */
+  --search-icon-color: #6e7681; /* Muted gray for icons */
+  --input-focus-border-color: #58a6ff; /* Blue for focused inputs */
 
   /* Home page */
-  --post-list-text-color: var(--text-color);
-  --btn-patinator-text-color: var(--text-color);
-  --btn-paginator-hover-color: rgb(91 114 186); /* replaced pink */
+  --post-list-text-color: #c9d1d9; /* Light gray for post lists */
+  --btn-patinator-text-color: var(--text-color); /* Matches text color */
+  --btn-paginator-hover-color: #21262d; /* Dark gray for hover */
 
   /* Posts */
-  --toc-highlight: rgb(166 227 161);
-  --tag-hover: rgb(17 17 27);
-  --tb-odd-bg: rgb(30 30 46);
-  --tb-even-bg: rgb(31 31 34);
-  --tb-border-color: var(--tb-odd-bg);
-  --footnote-target-bg: rgb(63 81 181);
-  --btn-share-color: var(--text-color);
-  --btn-share-hover-color: rgb(250 180 100); /* replaced orange */
-  --card-hover-bg: rgb(49 50 68);
-  --card-shadow: rgb(0 0 0 / 35%) 0 4px 16px 0,
-    rgb(137 180, 250 / 6%) 0 0 0 1px;
-  --kbd-wrap-color: rgb(166 173 200);
-  --kbd-text-color: var(--text-color);
-  --kbd-bg-color: rgb(30 30 46);
-  --prompt-text-color: rgb(240 240 242 / 85%);
-  --prompt-tip-bg: rgb(34 139 69 / 65%);
-  --prompt-tip-icon-color: rgb(74 222 128);
-  --prompt-info-bg: rgb(90 123 194 / 65%);
-  --prompt-info-icon-color: rgb(124 157 217);
-  --prompt-warning-bg: rgb(255 180 100 / 65%); /* replaced orange */
-  --prompt-warning-icon-color: rgb(255 180 100); /* replaced orange */
-  --prompt-danger-bg: rgb(185 28 28 / 65%);
-  --prompt-danger-icon-color: rgb(248 113 113);
-
-  /* Tags & Categories */
-  --tag-border: rgb(69 71 90);
-  --tag-shadow: rgb(30 30 46);
-  --dash-color: rgb(166 173 200);
-  --search-tag-bg: rgb(30 30 46);
-  --categories-border: rgb(74 74 80 / 35%);
-  --categories-hover-bg: rgb(30 30 46);
-  --categories-icon-hover-color: rgb(250 180 100);
+  --toc-highlight: #58a6ff; /* Blue for table of contents highlights */
+  --toc-popup-border-color: #30363d; /* Dark gray for TOC borders */
+  --tag-hover: #21262d; /* Dark gray for tag hovers */
+  --tb-odd-bg: #161b22; /* Dark gray for odd table rows */
+  --tb-even-bg: #0d1117; /* Deeper black for even rows */
+  --tb-border-color: var(--tb-odd-bg); /* Matches odd rows */
+  --footnote-target-bg: #1f6feb; /* Darker blue for footnote highlights */
+  --btn-share-color: #6e7681; /* Muted gray for share buttons */
+  --btn-share-hover-color: #c9d1d9; /* Light gray for hover */
+  --card-bg: #161b22; /* Dark gray for cards */
+  --card-hover-bg: #21262d; /* Slightly lighter for hover */
+  --card-shadow: rgb(0 0 0 / 50%) 0 6px 18px 0,
+    rgb(201 209 217 / 20%) 0 0 0 1px; /* Darker shadow */
+
+  --kbd-wrap-color: #6e7681; /* Muted gray for keyboard input wrap */
+  --kbd-text-color: #e6edf3; /* Near-white for keyboard text */
+  --kbd-bg-color: #0d1117; /* Matches main background */
+  --prompt-text-color: rgb(201 209 217 / 75%); /* Muted light gray */
+  --prompt-tip-bg: rgb(22 101 52 / 70%); /* Dark green for tips */
+  --prompt-tip-icon-color: #22c55e; /* Bright green for icons */
+  --prompt-info-bg: rgb(29 78 216 / 70%); /* Dark blue for info */
+  --prompt-info-icon-color: #3b82f6; /* Bright blue for icons */
+  --prompt-warning-bg: rgb(124 45 18 / 70%); /* Dark orange for warnings */
+  --prompt-warning-icon-color: #f97316; /* Bright orange for icons */
+  --prompt-danger-bg: rgb(153 27 27 / 70%); /* Dark red for danger */
+  --prompt-danger-icon-color: #ef4444; /* Bright red for icons */
+
+  /* Tags */
+  --tag-border: #30363d; /* Dark gray for tag borders */
+  --tag-shadow: #0d1117; /* Matches main background */
+  --dash-color: #6e7681; /* Muted gray for dashes */
+  --search-tag-bg: #161b22; /* Dark gray for search tags */
+
+  /* Categories */
+  --categories-border: rgb(48 54 61 / 50%); /* Semi-transparent gray */
+  --categories-hover-bg: #21262d; /* Dark gray for hover */
+  --categories-icon-hover-color: #ffffff; /* White for icon hovers */
 
   /* Archive */
-  --timeline-node-bg: rgb(166 173 200);
-  --timeline-color: rgb(69 71 90);
-  --timeline-year-dot-color: var(--timeline-color);
-
-  /* Code highlight */
-  --language-border-color: rgb(69 71 90);
-  --highlight-bg-color: rgb(17 17 27);
-  --highlighter-rouge-color: rgb(255 180 100); /* replaced orange */
-  --highlight-lineno-color: rgb(166 173 200);
-  --inline-code-bg: rgb(30 30 46);
-  --code-color: rgb(205 214 244);
-  --code-header-text-color: rgb(255 180 100); /* replaced orange */
-  --code-header-muted-color: rgb(255 180 100);
-  --code-header-icon-color: rgb(255 180 100);
-  --clipboard-checked-color: rgb(170 190 255); /* replaced pink */
-  --filepath-text-color: rgb(170 190 255);
+  --timeline-node-bg: #6e7681; /* Muted gray for timeline nodes */
+  --timeline-color: #30363d; /* Dark gray for timeline */
+  --timeline-year-dot-color: var(--timeline-color); /* Matches timeline */
+
+  /* Code highlight colors */
+  --language-border-color: #21262d; /* Dark gray for code borders */
+  --highlight-bg-color: #0d1117; /* Deep black for code background */
+  --highlighter-rouge-color: #c9d1d9; /* Light gray for code text */
+  --highlight-lineno-color: #6e7681; /* Muted gray for line numbers */
+  --inline-code-bg: rgb(255 255 255 / 5%); /* Subtle white for inline code */
+  --code-color: #c9d1d9; /* Light gray for code */
+  --code-header-text-color: #8b949e; /* Muted gray for code headers */
+  --code-header-muted-color: #21262d; /* Dark gray for muted headers */
+  --code-header-icon-color: #6e7681; /* Muted gray for icons */
+  --clipboard-checked-color: #22c55e; /* Green for clipboard check */
+  --filepath-text-color: #c9d1d9; /* Light gray for file paths */
 
   .light {
     display: none;
   }
 
-
   /* Categories */
   .categories.card,
   .list-group-item {
@@ -134,11 +142,11 @@
   #archives li:nth-child(odd) {
     background-image: linear-gradient(
       to left,
-      #1a1a1e,
-      #2a2a2f,
-      #3a3a40,
-      #2a2a2f,
-      #1a1a1e
+      #0d1117,
+      #161b22,
+      #161b22,
+      #161b22,
+      #0d1117
     );
   }
 
@@ -147,9 +155,9 @@
     color-scheme: none;
   }
 
-  /* --- Paper Manuscript Syntax highlight theme --- */
+  /* --- Syntax highlight theme --- */
   .highlight .gp {
-    color: #b4b4b8; /* Warm gray prompt */
+    color: #8b949e; /* Muted gray for prompt */
   }
 
   .highlight table td {
@@ -162,13 +170,13 @@
 
   .highlight,
   .highlight .w {
-    color: #f0f0f2;
-    background-color: #1a1a1e;
+    color: #c9d1d9;
+    background-color: #0d1117;
   }
 
   .highlight .err {
-    color: #fef2f2;
-    background-color: #dc2626; /* Soft red error */
+    color: #0d1117;
+    background-color: #f85149; /* Bright red for errors */
   }
 
   .highlight .c,
@@ -178,41 +186,39 @@
   .highlight .cpf,
   .highlight .c1,
   .highlight .cs {
-    color: #9ca3af; /* Medium gray comments */
-    font-style: italic;
+    color: #8b949e; /* Muted gray for comments */
   }
 
   .highlight .cp {
-    color: #d1d5db; /* Light gray preprocessor */
+    color: #e6b800; /* Yellow for preprocessor */
   }
 
   .highlight .nt {
-    color: #8b9dc3; /* Soft blue tags */
+    color: #e6b800; /* Yellow for tags */
   }
 
   .highlight .o,
   .highlight .ow {
-    color: #c8c8cc; /* Light gray operators */
+    color: #c9d1d9; /* Light gray for operators */
   }
 
   .highlight .p,
   .highlight .pi {
-    color: #c8c8cc; /* Light gray punctuation */
+    color: #c9d1d9; /* Light gray for punctuation */
   }
 
   .highlight .gi {
-    color: #6ee7b7; /* Soft green insertions */
-    background-color: rgb(34 139 69 / 10%);
+    color: #22c55e; /* Green for insertions */
   }
 
   .highlight .gd {
-    color: #fca5a5; /* Soft red deletions */
-    background-color: rgb(185 28 28 / 10%);
+    color: #f85149; /* Red for deletions */
+    background-color: #2d0000; /* Dark red background */
   }
 
   .highlight .gh {
-    color: #8b9dc3; /* Soft blue headers */
-    background-color: #1a1a1e;
+    color: #58a6ff; /* Blue for headers */
+    background-color: #0d1117;
     font-weight: bold;
   }
 
@@ -221,20 +227,19 @@
   .highlight .kp,
   .highlight .kr,
   .highlight .kv {
-    color: #a5b4fc; /* Light purple keywords */
-    font-weight: 500;
+    color: #d3869b; /* Soft pink for keywords */
   }
 
   .highlight .kc {
-    color: #fde68a; /* Soft yellow constants */
+    color: #e6b800; /* Yellow for constants */
   }
 
   .highlight .kt {
-    color: #7dd3fc; /* Light blue types */
+    color: #e6b800; /* Yellow for types */
   }
 
   .highlight .kd {
-    color: #a5b4fc; /* Light purple declarations */
+    color: #e6b800; /* Yellow for declarations */
   }
 
   .highlight .s,
@@ -246,39 +251,39 @@
   .highlight .sh,
   .highlight .sx,
   .highlight .s1 {
-    color: #86efac; /* Soft green strings */
+    color: #22c55e; /* Green for strings */
   }
 
   .highlight .sa {
-    color: #fde68a; /* Soft yellow string attributes */
+    color: #d3869b; /* Pink for string attributes */
   }
 
   .highlight .sr {
-    color: #7dd3fc; /* Light blue regex */
+    color: #2dd4bf; /* Teal for regex */
   }
 
   .highlight .si {
-    color: #fde68a; /* Soft yellow interpolation */
+    color: #e6b800; /* Yellow for interpolation */
   }
 
   .highlight .se {
-    color: #fed7aa; /* Soft orange escapes */
+    color: #e6b800; /* Yellow for escapes */
   }
 
   .highlight .nn {
-    color: #7dd3fc; /* Light blue namespaces */
+    color: #e6b800; /* Yellow for names */
   }
 
   .highlight .nc {
-    color: #8b9dc3; /* Soft blue classes */
+    color: #e6b800; /* Yellow for class names */
   }
 
   .highlight .no {
-    color: #fde68a; /* Soft yellow constants */
+    color: #e6b800; /* Yellow for constants */
   }
 
   .highlight .na {
-    color: #8b9dc3; /* Soft blue attributes */
+    color: #58a6ff; /* Blue for attributes */
   }
 
   .highlight .m,
@@ -289,10 +294,10 @@
   .highlight .il,
   .highlight .mo,
   .highlight .mx {
-    color: #fed7aa; /* Soft orange numbers */
+    color: #22c55e; /* Green for numbers */
   }
 
   .highlight .ss {
-    color: #86efac; /* Soft green symbols */
+    color: #22c55e; /* Green for symbols */
   }
 }