Your Astro combined CSS file has the dark theme before the main Terminal CSS (default light theme).

This is odd given you are importing before establishing the <style>

If I add the <style> manually in console, it enables the dark theme.
You will need to play around with Astro to get the dark theme to appear after the main Terminal CSS.

Your <body> needs to establish the terminal class: <body class="terminal">

Your <html> should look like this:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Terminal CSS</title>
    </head>
    <body class="terminal">
        <header id="header" class="container">
            <header class="terminal-logo">
                <div class="logo terminal-prompt"><a href="https://bbsynth.netlify.app" class="no-style">BBSynth</a></div>
            </header>
        </header>
  </body>
</html>

Your index.astro should look like this:

---
import "terminal.css";
---

<style>
      :root {
        --global-font-size: 15px;
        --global-line-height: 1.4em;
        --global-space: 10px;
        --font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
          DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
          serif;
        --mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
          DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
          serif;
        --background-color: #222225;
        --page-width: 60em;
        --font-color: #e8e9ed;
        --invert-font-color: #222225;
        --secondary-color: #a3abba;
        --tertiary-color: #a3abba;
        --primary-color: #62c4ff;
        --error-color: #ff3c74;
        --progress-bar-background: #3f3f44;
        --progress-bar-fill: #62c4ff;
        --code-bg-color: #3f3f44;
        --input-style: solid;
        --display-h1-decoration: none;
      }
    </style>

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Terminal CSS</title>
    </head>
    <body class="terminal">
        <header id="header" class="container">
            <header class="terminal-logo">
                <div class="logo terminal-prompt"><a href="https://bbsynth.netlify.app" class="no-style">BBSynth</a></div>
            </header>
        </header>
        <article class="container">
            <div>TEST</div>
        </article>
    </body>
</html>

I don't understand how to get the dark theme #37

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions