-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixes #575. Replaces the existing Carbon icons with different SVGs that are more easily adapted for dark mode by replacing the fill with `"currentColor"`. TODO: - [x] Add dark mode screenshot tests - [x] Add more dark mode screenshot tests - [x] Make accent purple - [x] Fix other color issues
- Loading branch information
Showing
72 changed files
with
301 additions
and
181 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,59 @@ | ||
| body { | ||
| // Define the Carbon color schemes from | ||
| // https://github.com/carbon-design-system/carbon/blob/v10/packages/colors/src/colors.js | ||
| // | ||
| // Projects can override `--color-brand-primary` to whatever they want. | ||
| --qiskit-color-purple: #6929C4; // purple70 | ||
|
|
||
| // Furo normally distinguishes between these two variables, but | ||
| // we want them to be the same. | ||
| --color-brand-content: var(--color-brand-primary); | ||
|
|
||
| // For the Qiskit theme, use purple. | ||
| --color-brand-primary: var(--qiskit-color-purple); | ||
| } | ||
| /* This code is a Qiskit project. | ||
| * | ||
| * (C) Copyright IBM 2024. | ||
| * | ||
| * This code is licensed under the Apache License, Version 2.0. You may | ||
| * obtain a copy of this license in the LICENSE.txt file in the root directory | ||
| * of this source tree or at http://www.apache.org/licenses/LICENSE-2.0. | ||
| * | ||
| * Any modifications or derivative works of this code must retain this | ||
| * copyright notice, and modified files need to carry a notice indicating | ||
| * that they have been altered from the originals. | ||
| */ | ||
|
|
||
| @mixin colors { | ||
| // Define the Carbon color schemes from | ||
| // https://github.com/carbon-design-system/carbon/blob/v10/packages/colors/src/colors.js | ||
| // | ||
| // Projects can override `--color-brand-primary` to whatever they want. | ||
| --qiskit-color-purple: #6929c4; // purple70 | ||
|
|
||
| // Furo normally distinguishes between these two variables, but | ||
| // we want them to be the same. | ||
| --color-brand-content: var(--color-brand-primary); | ||
|
|
||
| // For the Qiskit theme, use purple. | ||
| --color-brand-primary: var(--qiskit-color-purple); | ||
|
|
||
| // Use the same table header color previously used on qiskit.org. | ||
| --color-table-header-background: #dde1e6; | ||
|
|
||
| // Use gray for the top-level links to be more muted. | ||
| --color-sidebar-link-text--top-level: var(--color-sidebar-link-text); | ||
|
|
||
| // Turn off gradient for hover. | ||
| --color-sidebar-item-background--hover: var(--color-background-hover); | ||
|
|
||
| // Colors for admonitions | ||
| --qiskit-color-info-background: #edf5ff; //blue10 | ||
| --qiskit-color-info-border: #0043ce; // blue70 | ||
| --qiskit-color-warning-background: #fcf4d6; // yellow10 | ||
| --qiskit-color-warning-border: #f1c21b; // yellow30 | ||
| --qiskit-color-error-background: #fff1f1; // red10 | ||
| --qiskit-color-error-border: #da1e28; // red60 | ||
| } | ||
|
|
||
| @mixin colors-dark { | ||
| --qiskit-color-purple: #d4bbff; // purple30 | ||
| --color-brand-content: var(--color-brand-primary); | ||
| --color-brand-primary: var(--qiskit-color-purple); | ||
| --color-table-header-background: var(--color-background-secondary); | ||
| --color-sidebar-link-text--top-level: var(--color-sidebar-link-text); | ||
| --color-sidebar-item-background--hover: var(--color-background-hover); | ||
| --qiskit-color-info-background: #002d9c; // blue80 | ||
| --qiskit-color-info-border: #78a9ff; // blue40 | ||
| --qiskit-color-warning-background: #684e00; // yellow70 | ||
| --qiskit-color-warning-border: #f1c21b; // yellow30 | ||
| --qiskit-color-error-background: #750e13; // red80 | ||
| --qiskit-color-error-border: #fa4d56; // red50 | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| /* This code is a Qiskit project. | ||
| * | ||
| * (C) Copyright IBM 2024. | ||
| * | ||
| * This code is licensed under the Apache License, Version 2.0. You may | ||
| * obtain a copy of this license in the LICENSE.txt file in the root directory | ||
| * of this source tree or at http://www.apache.org/licenses/LICENSE-2.0. | ||
| * | ||
| * Any modifications or derivative works of this code must retain this | ||
| * copyright notice, and modified files need to carry a notice indicating | ||
| * that they have been altered from the originals. | ||
| */ | ||
|
|
||
| // Adapted from furo/assets/styles/base/_theme.sass | ||
|
|
||
| @import "colors"; | ||
|
|
||
| body { | ||
| @include colors; | ||
| } | ||
|
|
||
| // Ignore dark-mode hints if print media. | ||
| @media not print { | ||
| // Enable dark-mode, if requested. | ||
| body[data-theme="dark"] { | ||
| @include colors-dark; | ||
|
|
||
| html & .only-light { | ||
| display: none !important; | ||
| } | ||
| .only-dark { | ||
| display: block !important; | ||
| } | ||
| } | ||
|
|
||
| // Enable dark mode, unless explicitly told to avoid. | ||
| @media (prefers-color-scheme: dark) { | ||
| body:not([data-theme="light"]) { | ||
| @include colors-dark; | ||
|
|
||
| html & .only-light { | ||
| display: none !important; | ||
| } | ||
| .only-dark { | ||
| display: block !important; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.