mirror of
https://github.com/bitwarden/browser
synced 2025-12-21 10:43:35 +00:00
Dark Theme (#1017)
* Stylesheets * Theme Configuration * Options Area * swal2 style * Icon styling * Fix theme not saving * Update English * Update messages.json * dropdown and login logo * btn-link and totp fix * Organisation Styling * Update webauthn-fallback.ts * Fix contrast issues * Add Paypal Container and Loading svg file * Password Generator contrast fix * Dark Mode Fix buttons and foreground * Fix button hover * Fix Styles after rebase * Add hover on nav dropdown-item * Disable Theme Preview * Options Fix for Default Theme Changes * Updated Colour Scheme * Toast fix * Button and Text Styling * Options Update and Messages Fix * Added Search Icon and Fixed Callout styling * Add theme styling to Stripe * Refactor logic for setting color * Reorder logic to avoid race condition * PayPal Loading and Misc Fix * text-state bug fix * Badge Colour Fix * Remove PayPal Tagline The colour cannot be styled so it's not visible on a dark theme * Adding the Styling from #1131 * Update to New Design * Form and Nav restyle * Modal Opacity and Callout * Nav Colours * Missing Borders * Light theme fix * Improved border for listgroup * Change Org Nav Colour * Save theme to localStorage for persistence * Undo change to Wired image * !Important removal and tweaks * Fix regression with navbar * Light theme by default * Refactor to use getEffectiveTheme * Refactor theme constants to use enum * Set theme in index.html before app loads * Use scss selector to set logo image * Export Sass to TS * Update jslib Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
This commit is contained in:
Danny Murphy
GitHub
246
src/scss/base.scss
Normal file
246
src/scss/base.scss
Normal file
@@ -0,0 +1,246 @@
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 1010px;
|
||||
|
||||
&.layout_frontend {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: $darkDarkBlue2;
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $white;
|
||||
}
|
||||
@include themify($themes) {
|
||||
background-color: themed('layoutFrontendColor');
|
||||
color: themed('headingColor');
|
||||
}
|
||||
}
|
||||
|
||||
@include themify($themes) {
|
||||
background-color: themed('backgroundColor');
|
||||
color: themed('textColor');
|
||||
}
|
||||
|
||||
&.full-width:not(.layout_frontend) {
|
||||
.container {
|
||||
min-width: 980px;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: none !important;
|
||||
padding: 0;
|
||||
width: 980px;
|
||||
}
|
||||
|
||||
.page-header, .secondary-header {
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.6rem;
|
||||
@include themify($themes) {
|
||||
border-bottom: 1px solid themed('separator');
|
||||
}
|
||||
|
||||
&:not(.text-danger) {
|
||||
h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-header, .spaced-header {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
img.logo {
|
||||
display: block;
|
||||
height: 43px;
|
||||
margin: 0 auto;
|
||||
width: 284px;
|
||||
@include themify($themes) {
|
||||
content: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
padding: 40px 0 40px 0;
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed('separator');
|
||||
}
|
||||
}
|
||||
|
||||
hr, .dropdown-divider {
|
||||
@include themify($themes) {
|
||||
border-top: 1px solid themed('separatorHr');
|
||||
}
|
||||
}
|
||||
|
||||
.min-height-fix {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cursor-move {
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
&.spaced-header {
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include themify($themes) {
|
||||
color: themed('linkColor');
|
||||
}
|
||||
|
||||
&.text-body {
|
||||
@include themify($themes) {
|
||||
color: themed('headingColor') !important;
|
||||
font-weight: themed('linkWeight');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@include themify($themes) {
|
||||
color: themed('linkColorHover');
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@include themify($themes) {
|
||||
color: themed('codeColor');
|
||||
}
|
||||
}
|
||||
|
||||
.fa-icon-above-input {
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
|
||||
.text-strike {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.font-weight-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn:focus, .swal2-popup .swal2-actions button:focus, .btn.focus, .swal2-popup .swal2-actions button.focus, .form-control:focus {
|
||||
@include themify($themes) {
|
||||
box-shadow: 0 0 0 0.2rem themed('focus');
|
||||
}
|
||||
}
|
||||
|
||||
/* Override Bootstrap theming */
|
||||
|
||||
.bg-primary {
|
||||
@include themify($themes) {
|
||||
background-color: themed('bgPrimaryColor');
|
||||
}
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
@include themify($themes) {
|
||||
background-color: themed('bgLightColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
@include themify($themes) {
|
||||
border-color: themed('borderPrimaryColor') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.border-warning {
|
||||
@include themify($themes) {
|
||||
border-color: themed('warning') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.border-danger {
|
||||
@include themify($themes) {
|
||||
border-color: themed('danger') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.border-info {
|
||||
@include themify($themes) {
|
||||
border-color: themed('info') !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-success {
|
||||
@include themify($themes) {
|
||||
color: themed('success') !important;
|
||||
}
|
||||
|
||||
& > h1,h2,h3,h4 {
|
||||
@include themify($themes) {
|
||||
color: themed('success') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
@include themify($themes) {
|
||||
color: themed('warning') !important;
|
||||
}
|
||||
|
||||
& > h1,h2,h3,h4 {
|
||||
@include themify($themes) {
|
||||
color: themed('warning') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
&:not(.dropdown-item) {
|
||||
@include themify($themes) {
|
||||
color: themed('danger') !important;
|
||||
}
|
||||
|
||||
& > h1,h2,h3,h4 {
|
||||
@include themify($themes) {
|
||||
color: themed('danger') !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
@include themify($themes) {
|
||||
color: themed('textMuted') !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user