gameboy-color-dark

Anonymous
css
03/09/2026 3:15 PM
4.7 KB
12
Indexable
/* Game Boy Color-inspired dark mode – nostalgic greenish monochrome */

.theme-dark {
      --background-primary: #0f380f;           /* deepest green-black bg */
        --background-primary-alt: #0f380f;
          --background-secondary: #0f380f;
            --background-secondary-alt: #306230;     /* mid green for panels/sidebars */
              --background-modifier-border: #306230;   /* borders/dividers */
                --background-modifier-form-field: #0f380f;
                  --background-modifier-form-field-hover: #306230;
                    --background-modifier-hover: rgba(48, 98, 48, 0.3);  /* hover mid-green tint */
                      
                        --text-normal: #9bbc0f;                  /* lightest green for main text – readable glow */
                          --text-muted: #8bac0f;                   /* slightly dimmer for secondary text */
                            --text-faint: #306230;                   /* very muted for placeholders/etc */
                              
                                --text-accent: #9bbc0f;                  /* accent links, bold, etc. */
                                  --interactive-accent: #9bbc0f;
                                    --text-accent-hover: #8bac0f;
                                      
                                        --bold-color: #9bbc0f;
                                          --italic-color: #8bac0f;
                                            --link-color: #8bac0f;
                                              --link-external-color: #9bbc0f;
                                                --tag-color: #306230;
                                                  --tag-background: rgba(48, 98, 48, 0.4);
                                                    
                                                      --checkbox-color: #8bac0f;
                                                        --checkbox-border-color: #306230;
                                                          --checkbox-background-hover: #306230;
                                                            --checkbox-marker-color: #0f380f;
                                                              
                                                                --calendar-hover: rgba(155, 188, 15, 0.15);
                                                                  --calendar-background-hover: rgba(48, 98, 48, 0.2);
}

/* Optional: subtle pixelated/CRT feel (low opacity scanlines) */
body.theme-dark::before {
      content: " ";
        display: block;
          position: fixed;
            inset: 0;
              background: repeating-linear-gradient(
                    to bottom,
                        transparent 0,
                            rgba(15, 56, 15, 0.12) 1px,
                                transparent 2px
              );
                pointer-events: none;
                  z-index: 9999;
                    opacity: 0.35;
                      mix-blend-mode: multiply;
}

/* Slight glow on interactive elements for that retro screen pop */
a.internal-link,
a.external-link,
.cm-s-obsidian .cm-link,
strong,
.cm-strong {
      text-shadow: 0 0 3px rgba(155, 188, 15, 0.4);
}

/* Make code blocks feel more "cartridge" with darker bg + green text */
pre code {
      background-color: #0f380f !important;
        color: #9bbc0f;
          border: 1px solid #306230;
}

/* Headers get a bit more pop */
h1, h2, h3, h4, h5, h6 {
      color: #9bbc0f;
        text-shadow: 0 0 4px rgba(155, 188, 15, 0.3);
}
}
}
}
              )
}
}
Editor is loading...
Leave a Comment