Skip to content

refactor(Stackblitz): use imported dark theme instead of hard-coded styles #3378

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

Merged
averyjohnston merged 9 commits into from
Jan 12, 2024
Merged

refactor(Stackblitz): use imported dark theme instead of hard-coded styles #3378

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
68be867
make changes for Angular
Jan 10, 2024
cb0cddf
make changes for JS
Jan 10, 2024
a18a9d0
make JS quotes consistent
Jan 10, 2024
5207321
make changes for React
Jan 10, 2024
6d747dc
make changes for Vue
Jan 10, 2024
fcd2b6e
Merge remote-tracking branch 'origin/feature-8.0' into FW-5627
Jan 12, 2024
2aa4923
update React/Vue lockfiles
Jan 12, 2024
469fc12
clear out variables.css files
Jan 12, 2024
5b4cfed
move variables.css after dark theme imports
Jan 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions static/code/stackblitz/v8/angular/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"dependencies": {
"@ionic/angular": "7.5.8-dev.11702398696.1ab62ea9",
"@ionic/core": "7.5.8-dev.11702398696.1ab62ea9",
"@ionic/angular": "7.6.2-dev.11704729332.13b412c8",
"@ionic/core": "7.6.2-dev.11704729332.13b412c8",
"@angular/platform-browser-dynamic": "17.0.4"
}
}
11 changes: 11 additions & 0 deletions static/code/stackblitz/v8/angular/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,14 @@
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";
@import "~@ionic/angular/css/display.css";

/**
* Ionic Dark Theme
* -----------------------------------------------------
* For more info, please see:
* https://ionicframework.com/docs/theming/dark-mode
*/

/* @import "~@ionic/angular/css/themes/dark.always.css"; */
/* @import "~@ionic/angular/css/themes/dark.class.css"; */
@import "~@ionic/angular/css/themes/dark.system.css";
159 changes: 0 additions & 159 deletions static/code/stackblitz/v8/angular/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,162 +75,3 @@ http://ionicframework.com/docs/theming/ */
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}

@media (prefers-color-scheme: dark) {
/*
* Dark Colors
* -------------------------------------------
*/

body {
--ion-color-primary: #428cff;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;

--ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;

--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;

--ion-color-success: #2fdf75;
--ion-color-success-rgb: 47,223,117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;

--ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255,213,52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;

--ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255,73,97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;

--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244,245,248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;

--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;

--ion-color-light: #222428;
--ion-color-light-rgb: 34,36,40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}

/*
* iOS Dark Theme
* -------------------------------------------
*/

.ios body {
--ion-background-color: #000000;
--ion-background-color-rgb: 0,0,0;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;

--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;

--ion-item-background: #000000;

--ion-card-background: #1c1c1d;
}

.ios ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
}


/*
* Material Design Dark Theme
* -------------------------------------------
*/

.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;

--ion-border-color: #222222;

--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;

--ion-item-background: #1e1e1e;

--ion-toolbar-background: #1f1f1f;

--ion-tab-bar-background: #1f1f1f;

--ion-card-background: #1e1e1e;
}
}
11 changes: 11 additions & 0 deletions static/code/stackblitz/v8/html/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,17 @@ import '@ionic/core/css/display.css';
/* Theme variables */
import './theme/variables.css';

/**
* Ionic Dark Theme
* -----------------------------------------------------
* For more info, please see:
* https://ionicframework.com/docs/theming/dark-mode
*/

// import '@ionic/core/css/themes/dark.always.css';
// import '@ionic/core/css/themes/dark.class.css';
import '@ionic/core/css/themes/dark.system.css';

defineCustomElements();

(window as any).loadingController = loadingController;
Expand Down
2 changes: 1 addition & 1 deletion static/code/stackblitz/v8/html/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"dependencies": {
"@ionic/core": "7.5.8-dev.11702398696.1ab62ea9"
"@ionic/core": "7.6.2-dev.11704729332.13b412c8"
}
}
159 changes: 0 additions & 159 deletions static/code/stackblitz/v8/html/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,162 +75,3 @@ http://ionicframework.com/docs/theming/ */
--ion-color-light-shade: #d7d8da;
--ion-color-light-tint: #f5f6f9;
}

@media (prefers-color-scheme: dark) {
/*
* Dark Colors
* -------------------------------------------
*/

body {
--ion-color-primary: #428cff;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #3a7be0;
--ion-color-primary-tint: #5598ff;

--ion-color-secondary: #50c8ff;
--ion-color-secondary-rgb: 80,200,255;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255,255,255;
--ion-color-secondary-shade: #46b0e0;
--ion-color-secondary-tint: #62ceff;

--ion-color-tertiary: #6a64ff;
--ion-color-tertiary-rgb: 106,100,255;
--ion-color-tertiary-contrast: #ffffff;
--ion-color-tertiary-contrast-rgb: 255,255,255;
--ion-color-tertiary-shade: #5d58e0;
--ion-color-tertiary-tint: #7974ff;

--ion-color-success: #2fdf75;
--ion-color-success-rgb: 47,223,117;
--ion-color-success-contrast: #000000;
--ion-color-success-contrast-rgb: 0,0,0;
--ion-color-success-shade: #29c467;
--ion-color-success-tint: #44e283;

--ion-color-warning: #ffd534;
--ion-color-warning-rgb: 255,213,52;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0,0,0;
--ion-color-warning-shade: #e0bb2e;
--ion-color-warning-tint: #ffd948;

--ion-color-danger: #ff4961;
--ion-color-danger-rgb: 255,73,97;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255,255,255;
--ion-color-danger-shade: #e04055;
--ion-color-danger-tint: #ff5b71;

--ion-color-dark: #f4f5f8;
--ion-color-dark-rgb: 244,245,248;
--ion-color-dark-contrast: #000000;
--ion-color-dark-contrast-rgb: 0,0,0;
--ion-color-dark-shade: #d7d8da;
--ion-color-dark-tint: #f5f6f9;

--ion-color-medium: #989aa2;
--ion-color-medium-rgb: 152,154,162;
--ion-color-medium-contrast: #000000;
--ion-color-medium-contrast-rgb: 0,0,0;
--ion-color-medium-shade: #86888f;
--ion-color-medium-tint: #a2a4ab;

--ion-color-light: #222428;
--ion-color-light-rgb: 34,36,40;
--ion-color-light-contrast: #ffffff;
--ion-color-light-contrast-rgb: 255,255,255;
--ion-color-light-shade: #1e2023;
--ion-color-light-tint: #383a3e;
}

/*
* iOS Dark Theme
* -------------------------------------------
*/

.ios body {
--ion-background-color: #000000;
--ion-background-color-rgb: 0,0,0;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;

--ion-color-step-50: #0d0d0d;
--ion-color-step-100: #1a1a1a;
--ion-color-step-150: #262626;
--ion-color-step-200: #333333;
--ion-color-step-250: #404040;
--ion-color-step-300: #4d4d4d;
--ion-color-step-350: #595959;
--ion-color-step-400: #666666;
--ion-color-step-450: #737373;
--ion-color-step-500: #808080;
--ion-color-step-550: #8c8c8c;
--ion-color-step-600: #999999;
--ion-color-step-650: #a6a6a6;
--ion-color-step-700: #b3b3b3;
--ion-color-step-750: #bfbfbf;
--ion-color-step-800: #cccccc;
--ion-color-step-850: #d9d9d9;
--ion-color-step-900: #e6e6e6;
--ion-color-step-950: #f2f2f2;

--ion-item-background: #000000;

--ion-card-background: #1c1c1d;
}

.ios ion-modal {
--ion-background-color: var(--ion-color-step-100);
--ion-toolbar-background: var(--ion-color-step-150);
--ion-toolbar-border-color: var(--ion-color-step-250);
}


/*
* Material Design Dark Theme
* -------------------------------------------
*/

.md body {
--ion-background-color: #121212;
--ion-background-color-rgb: 18,18,18;

--ion-text-color: #ffffff;
--ion-text-color-rgb: 255,255,255;

--ion-border-color: #222222;

--ion-color-step-50: #1e1e1e;
--ion-color-step-100: #2a2a2a;
--ion-color-step-150: #363636;
--ion-color-step-200: #414141;
--ion-color-step-250: #4d4d4d;
--ion-color-step-300: #595959;
--ion-color-step-350: #656565;
--ion-color-step-400: #717171;
--ion-color-step-450: #7d7d7d;
--ion-color-step-500: #898989;
--ion-color-step-550: #949494;
--ion-color-step-600: #a0a0a0;
--ion-color-step-650: #acacac;
--ion-color-step-700: #b8b8b8;
--ion-color-step-750: #c4c4c4;
--ion-color-step-800: #d0d0d0;
--ion-color-step-850: #dbdbdb;
--ion-color-step-900: #e7e7e7;
--ion-color-step-950: #f3f3f3;

--ion-item-background: #1e1e1e;

--ion-toolbar-background: #1f1f1f;

--ion-tab-bar-background: #1f1f1f;

--ion-card-background: #1e1e1e;
}
}
11 changes: 11 additions & 0 deletions static/code/stackblitz/v8/react/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,17 @@ import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';

/**
* Ionic Dark Theme
* -----------------------------------------------------
* For more info, please see:
* https://ionicframework.com/docs/theming/dark-mode
*/

// import '@ionic/react/css/themes/dark.always.css';
// import '@ionic/react/css/themes/dark.class.css';
import '@ionic/react/css/themes/dark.system.css';

import Example from './main';

setupIonicReact();
Expand Down
Loading