Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Sercurio opened this issue Apr 25, 2022 · 4 comments
Open

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

Sercurio opened this issue Apr 25, 2022 · 4 comments

Comments

@Sercurio
Copy link

I didn't found any document for using the dark theme used on the demo website
@MaXFalstein
Copy link

MaXFalstein commented Apr 27, 2022 •
edited
Loading

In the <head> of the Terminal CSS dark website, there is an extra <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;
      }

This provides the dark theme.
I externally load the above CSS from a private CDN.
I will create a PR for this 🙂

@Sercurio
Copy link
Author

Thank you !

@Sercurio
Copy link
Author

Sercurio commented May 6, 2022 •
edited
Loading

I tried what you say, but it's not working, example here :https://bbsynth.netlify.app/
I'm using the SSG Astro by the way.

index.astro

---
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>

<html lang="fr">
  <head>
    <title>Terminal CSS</title>
    
  </head>
  <body>
      <div>
        TEST
      </div
  </body>
</html>

@MaXFalstein
Copy link

MaXFalstein commented May 8, 2022 •
edited
Loading

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>

@ntno ntno mentioned this issue Jan 4, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MaXFalstein @Sercurio