QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-20 23:00:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: sidebar items darkmode

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-10-18 16:04:49 +02:00
parent 54400b223f
commit c1c8097c92
4 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/webapp/src/components/Card/index.tsx
View File

@@ -1,8 +1,13 @@
// @ts-nocheck
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
export function Card({ className, style, children }) { interface CardProps {
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
}
export function Card({ className, style, children }: CardProps) {
return ( return (
<CardRoot className={className} style={style}> <CardRoot className={className} style={style}>
{children} {children}

5
packages/webapp/src/style/App.scss
View File

@@ -44,13 +44,16 @@
@import 'pages/fonts'; @import 'pages/fonts';
@import "section"; @import "section";
body {
background-color: var(--color-app-body);
overflow: hidden;
}
// App // App
.App { .App {
min-width: 1100px; min-width: 1100px;
min-height: 100vh; min-height: 100vh;
background-color: var(--color-app-background); background-color: var(--color-app-background);
} }
// ======= // =======
body.hide-scrollbar .Pane2 { body.hide-scrollbar .Pane2 {

9
packages/webapp/src/style/_variables.scss
View File

@@ -60,6 +60,7 @@ $ns: bp4;
--color-ui-menu-select-item-hover-background: #edeff2; --color-ui-menu-select-item-hover-background: #edeff2;
--color-ui-menu-select-item-active-background: var(--color-primary); --color-ui-menu-select-item-active-background: var(--color-primary);
--color-app-body: #fff;
--color-app-background: #fff; --color-app-background: #fff;
// Splash screen. // Splash screen.
@@ -114,6 +115,7 @@ $ns: bp4;
--color-sidebar-background: #01115e; --color-sidebar-background: #01115e;
--color-sidebar-text: #fff; --color-sidebar-text: #fff;
--color-sidebar-scrollbars-background: rgba(255, 255, 255, 0.25); --color-sidebar-scrollbars-background: rgba(255, 255, 255, 0.25);
// Sidebar - Items // Sidebar - Items
--color-sidebar-menu-item-text: rgb(255, 255, 255); --color-sidebar-menu-item-text: rgb(255, 255, 255);
@@ -345,6 +347,7 @@ body.bp4-dark {
--color-ui-menu-select-item-active-background: var(--color-primary); --color-ui-menu-select-item-active-background: var(--color-primary);
// App // App
--color-app-body: var(--color-dark-gray1);
--color-app-background: var(--color-dark-gray1); --color-app-background: var(--color-dark-gray1);
// Splash screen. // Splash screen.
@@ -406,11 +409,11 @@ body.bp4-dark {
// Sidebar - Items // Sidebar - Items
--color-sidebar-menu-item-text: #ffff; --color-sidebar-menu-item-text: #ffff;
--color-sidebar-menu-item-hover-background: var(--color-dark-gray5); --color-sidebar-menu-item-hover-background: var(--color-dark-gray4);
--color-sidebar-menu-item-text-hover: #fff; --color-sidebar-menu-item-text-hover: #fff;
--color-sidebar-menu-item-active-background: var(--color-dark-gray5); --color-sidebar-menu-item-active-background: var(--color-dark-gray4);
--color-sidebar-menu-item-active-text: #fff; --color-sidebar-menu-item-active-text: #fff;
--color-sidebar-menu-item-focus-background: #01143e; --color-sidebar-menu-item-focus-background: var(--color-dark-gray5);
--color-sidebar-menu-label-color: rgba(255, 255, 255, 0.4); --color-sidebar-menu-label-color: rgba(255, 255, 255, 0.4);
// Sidebar overlay // Sidebar overlay

9
packages/webapp/src/style/containers/Dashboard/Sidebar.scss
View File

@@ -50,7 +50,6 @@
opacity: $sidebar-logo-opacity; opacity: $sidebar-logo-opacity;
} }
} }
&-organization { &-organization {
.title { .title {
background: transparent; background: transparent;
@@ -148,8 +147,7 @@
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
&:hover, &:hover {
&.bp4-active {
background: var(--color-sidebar-menu-item-hover-background); background: var(--color-sidebar-menu-item-hover-background);
color: var(--color-sidebar-menu-item-text-hover); color: var(--color-sidebar-menu-item-text-hover);
} }
@@ -157,7 +155,10 @@
&:active { &:active {
background: var(--color-sidebar-menu-item-focus-background); background: var(--color-sidebar-menu-item-focus-background);
} }
&.bp4-active.bp4-intent-primary {
background: var(--color-sidebar-menu-item-active-background);
color: var(--color-sidebar-menu-item-active-text);
}
>.#{$ns}-icon { >.#{$ns}-icon {
color: #767b9b; color: #767b9b;
margin-right: 16px; margin-right: 16px;