From db9a99f7e2f996f3bba4d005f8a8af22bd656a0e Mon Sep 17 00:00:00 2001
From: Magnus Walbeck <mw@mwalbeck.org>
Date: Tue, 28 Feb 2023 14:18:32 +0100
Subject: [PATCH] =?UTF-8?q?Add=20extra=20variables=20from=20the=20default?=
=?UTF-8?q?=20dark=20theme=20so=20they=20take=20preceden=E2=80=A6=20(#328)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Add extra variables from the default dark theme so they take precedent incase the default light theme is active
---
CHANGELOG.md | 6 ++++++
appinfo/info.xml | 2 +-
css/guest-automatic.css | 29 +++++++++++++++++++++++++++++
css/guest.css | 29 +++++++++++++++++++++++++++++
css/server-automatic.css | 26 ++++++++++++++++++++++++++
css/server.css | 26 ++++++++++++++++++++++++++
css/variables/_color-variables.scss | 29 +++++++++++++++++++++++++++++
7 files changed, 146 insertions(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f0242b3..48b3e7b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
## [Unreleased]
+## 25.0.1 - 2023-02-28
+
+### Fixed
+
+- [#327](https://github.com/mwalbeck/nextcloud-breeze-dark/issues/327) Navigation sidebar is light when the default light theme is active along with the Breeze Dark Theme
+
## 25.0.0 - 2023-02-04
### Added
diff --git a/appinfo/info.xml b/appinfo/info.xml
index 7c80f34..5624ebd 100644
--- a/appinfo/info.xml
+++ b/appinfo/info.xml
@@ -38,7 +38,7 @@ Settings > Personal > Appearance and accessibility > Breeze Dark
Under the Theming section in the admin settings you can add your own custom styling to the theme. Only standard CSS can be used. This custom styling will be applied whenever the theme is enabled and only affects the Breeze Dark theme.
]]></description>
- <version>25.0.0</version>
+ <version>25.0.1</version>
<licence>agpl</licence>
<author mail="mw@mwalbeck.org" homepage="https://github.com/mwalbeck/nextcloud-breeze-dark">Magnus Walbeck</author>
<namespace>BreezeDark</namespace>
diff --git a/css/guest-automatic.css b/css/guest-automatic.css
index ce07f7c..0f63b2c 100644
--- a/css/guest-automatic.css
+++ b/css/guest-automatic.css
@@ -71,6 +71,7 @@
--color-loading-dark: var(--color-coastal-fog) !important;
--color-box-shadow: rgba(0, 0, 0, 0) !important;
+ --color-box-shadow-rgb: rgba(0, 0, 0, 0) !important;
--color-border: var(--color-border-grey) !important;
--color-border-dark: var(--color-border) !important;
@@ -84,6 +85,34 @@
--table-color-background: var(--color-main-background) !important;
--table-color-background-hover: var(--color-background-hover) !important;
--table-border-radius: var(--border-radius) !important;
+
+ /* Variables from the official dark theme that needs to be set incase Nextcloud thinks the light theme is preferred.
+ The variables should be adapted to better suit the Breeze Dark theme, but for the moment this will ensure a usable experience. */
+ --color-main-background-rgb: rgb(23, 23, 23);
+ --color-main-background-blur: rgba(var(--color-main-background-rgb), 0.8);
+ --background-invert-if-dark: invert(100%);
+ --background-invert-if-bright: no;
+ --color-success-rgb: 70, 186, 97;
+ --color-success-hover: #6ac780;
+ --color-warning-rgb: 236, 167, 0;
+ --color-warning-hover: #efb832;
+ --color-error-rgb: 233, 50, 45;
+ --color-error-hover: #ed5a56;
+ --color-scrollbar: #3d3d3d;
+ --color-text-maxcontrast-background-blur: #919191;
+ --color-text-maxcontrast-default: #8c8c8c;
+ --color-placeholder-light: #313131;
+ --color-placeholder-dark: #4a4a4a;
+ --color-primary-default: #0082c9;
+ --color-primary-hover: #04537f;
+ --color-primary-light-text: #99c0d6;
+ --color-primary-light-hover: #1d272d;
+ --color-primary-element-default-hover: #046ca5;
+ --color-primary-element-text: #fff;
+ --color-primary-element-hover: #04537f;
+ --color-primary-element-light-text: #99c0d6;
+ --color-primary-element-light-hover: #1d272d;
+ --color-primary-element-text-dark: #ededed;
}
/* Login Screen ------------------------------------------------------------- */
diff --git a/css/guest.css b/css/guest.css
index 138cd9d..4ef5a35 100644
--- a/css/guest.css
+++ b/css/guest.css
@@ -71,6 +71,7 @@
--color-loading-dark: var(--color-coastal-fog) !important;
--color-box-shadow: rgba(0, 0, 0, 0) !important;
+ --color-box-shadow-rgb: rgba(0, 0, 0, 0) !important;
--color-border: var(--color-border-grey) !important;
--color-border-dark: var(--color-border) !important;
@@ -84,6 +85,34 @@
--table-color-background: var(--color-main-background) !important;
--table-color-background-hover: var(--color-background-hover) !important;
--table-border-radius: var(--border-radius) !important;
+
+ /* Variables from the official dark theme that needs to be set incase Nextcloud thinks the light theme is preferred.
+ The variables should be adapted to better suit the Breeze Dark theme, but for the moment this will ensure a usable experience. */
+ --color-main-background-rgb: rgb(23, 23, 23);
+ --color-main-background-blur: rgba(var(--color-main-background-rgb), 0.8);
+ --background-invert-if-dark: invert(100%);
+ --background-invert-if-bright: no;
+ --color-success-rgb: 70, 186, 97;
+ --color-success-hover: #6ac780;
+ --color-warning-rgb: 236, 167, 0;
+ --color-warning-hover: #efb832;
+ --color-error-rgb: 233, 50, 45;
+ --color-error-hover: #ed5a56;
+ --color-scrollbar: #3d3d3d;
+ --color-text-maxcontrast-background-blur: #919191;
+ --color-text-maxcontrast-default: #8c8c8c;
+ --color-placeholder-light: #313131;
+ --color-placeholder-dark: #4a4a4a;
+ --color-primary-default: #0082c9;
+ --color-primary-hover: #04537f;
+ --color-primary-light-text: #99c0d6;
+ --color-primary-light-hover: #1d272d;
+ --color-primary-element-default-hover: #046ca5;
+ --color-primary-element-text: #fff;
+ --color-primary-element-hover: #04537f;
+ --color-primary-element-light-text: #99c0d6;
+ --color-primary-element-light-hover: #1d272d;
+ --color-primary-element-text-dark: #ededed;
}
/* Login Screen ------------------------------------------------------------- */
diff --git a/css/server-automatic.css b/css/server-automatic.css
index 2bd29db..6aa008c 100644
--- a/css/server-automatic.css
+++ b/css/server-automatic.css
@@ -111,6 +111,7 @@
--color-loading-light: var(--color-alternate-gray) !important;
--color-loading-dark: var(--color-coastal-fog) !important;
--color-box-shadow: rgba(0, 0, 0, 0) !important;
+ --color-box-shadow-rgb: rgba(0, 0, 0, 0) !important;
--color-border: var(--color-border-grey) !important;
--color-border-dark: var(--color-border) !important;
--color-icon: rgba(242, 242, 242, 1);
@@ -120,6 +121,31 @@
--table-color-background: var(--color-main-background) !important;
--table-color-background-hover: var(--color-background-hover) !important;
--table-border-radius: var(--border-radius) !important;
+ --color-main-background-rgb: rgb(23,23,23);
+ --color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
+ --background-invert-if-dark: invert(100%);
+ --background-invert-if-bright: no;
+ --color-success-rgb: 70,186,97;
+ --color-success-hover: #6ac780;
+ --color-warning-rgb: 236,167,0;
+ --color-warning-hover: #efb832;
+ --color-error-rgb: 233,50,45;
+ --color-error-hover: #ed5a56;
+ --color-scrollbar: #3d3d3d;
+ --color-text-maxcontrast-background-blur: #919191;
+ --color-text-maxcontrast-default: #8c8c8c;
+ --color-placeholder-light: #313131;
+ --color-placeholder-dark: #4a4a4a;
+ --color-primary-default: #0082c9;
+ --color-primary-hover: #04537f;
+ --color-primary-light-text: #99c0d6;
+ --color-primary-light-hover: #1d272d;
+ --color-primary-element-default-hover: #046ca5;
+ --color-primary-element-text: #fff;
+ --color-primary-element-hover: #04537f;
+ --color-primary-element-light-text: #99c0d6;
+ --color-primary-element-light-hover: #1d272d;
+ --color-primary-element-text-dark: #ededed;
}
/***
* @copyright Copyright (c) 2020, Magnus Walbeck <mw@mwalbeck.org>
diff --git a/css/server.css b/css/server.css
index ba334fc..e77590c 100644
--- a/css/server.css
+++ b/css/server.css
@@ -79,6 +79,7 @@
--color-loading-light: var(--color-alternate-gray) !important;
--color-loading-dark: var(--color-coastal-fog) !important;
--color-box-shadow: rgba(0, 0, 0, 0) !important;
+ --color-box-shadow-rgb: rgba(0, 0, 0, 0) !important;
--color-border: var(--color-border-grey) !important;
--color-border-dark: var(--color-border) !important;
--color-icon: rgba(242, 242, 242, 1);
@@ -88,6 +89,31 @@
--table-color-background: var(--color-main-background) !important;
--table-color-background-hover: var(--color-background-hover) !important;
--table-border-radius: var(--border-radius) !important;
+ --color-main-background-rgb: rgb(23,23,23);
+ --color-main-background-blur: rgba(var(--color-main-background-rgb), .8);
+ --background-invert-if-dark: invert(100%);
+ --background-invert-if-bright: no;
+ --color-success-rgb: 70,186,97;
+ --color-success-hover: #6ac780;
+ --color-warning-rgb: 236,167,0;
+ --color-warning-hover: #efb832;
+ --color-error-rgb: 233,50,45;
+ --color-error-hover: #ed5a56;
+ --color-scrollbar: #3d3d3d;
+ --color-text-maxcontrast-background-blur: #919191;
+ --color-text-maxcontrast-default: #8c8c8c;
+ --color-placeholder-light: #313131;
+ --color-placeholder-dark: #4a4a4a;
+ --color-primary-default: #0082c9;
+ --color-primary-hover: #04537f;
+ --color-primary-light-text: #99c0d6;
+ --color-primary-light-hover: #1d272d;
+ --color-primary-element-default-hover: #046ca5;
+ --color-primary-element-text: #fff;
+ --color-primary-element-hover: #04537f;
+ --color-primary-element-light-text: #99c0d6;
+ --color-primary-element-light-hover: #1d272d;
+ --color-primary-element-text-dark: #ededed;
}
/***
diff --git a/css/variables/_color-variables.scss b/css/variables/_color-variables.scss
index 25cfc3d..4901373 100644
--- a/css/variables/_color-variables.scss
+++ b/css/variables/_color-variables.scss
@@ -70,6 +70,7 @@
--color-loading-dark: var(--color-coastal-fog) !important;
--color-box-shadow: rgba(0, 0, 0, 0) !important;
+ --color-box-shadow-rgb: rgba(0, 0, 0, 0) !important;
--color-border: var(--color-border-grey) !important;
--color-border-dark: var(--color-border) !important;
@@ -83,4 +84,32 @@
--table-color-background: var(--color-main-background) !important;
--table-color-background-hover: var(--color-background-hover) !important;
--table-border-radius: var(--border-radius) !important;
+
+ // Variables from the official dark theme that needs to be set incase Nextcloud thinks the light theme is preferred.
+ // The variables should be adapted to better suit the Breeze Dark theme, but for the moment this will ensure a usable experience.
+ --color-main-background-rgb: rgb(23, 23, 23);
+ --color-main-background-blur: rgba(var(--color-main-background-rgb), 0.8);
+ --background-invert-if-dark: invert(100%);
+ --background-invert-if-bright: no;
+ --color-success-rgb: 70, 186, 97;
+ --color-success-hover: #6ac780;
+ --color-warning-rgb: 236, 167, 0;
+ --color-warning-hover: #efb832;
+ --color-error-rgb: 233, 50, 45;
+ --color-error-hover: #ed5a56;
+ --color-scrollbar: #3d3d3d;
+ --color-text-maxcontrast-background-blur: #919191;
+ --color-text-maxcontrast-default: #8c8c8c;
+ --color-placeholder-light: #313131;
+ --color-placeholder-dark: #4a4a4a;
+ --color-primary-default: #0082c9;
+ --color-primary-hover: #04537f;
+ --color-primary-light-text: #99c0d6;
+ --color-primary-light-hover: #1d272d;
+ --color-primary-element-default-hover: #046ca5;
+ --color-primary-element-text: #fff;
+ --color-primary-element-hover: #04537f;
+ --color-primary-element-light-text: #99c0d6;
+ --color-primary-element-light-hover: #1d272d;
+ --color-primary-element-text-dark: #ededed;
}