theme settings with scss

ScolderCreations commented 2 years ago

i will do this soon. if anyone has info on how to do this with react.js, lemme know

hello-smile6 commented 2 years ago

I know! @ScolderCreations Just don't use React or SCSS. Stick to vanilla!

ScolderCreations commented 2 years ago

I know! @ScolderCreations Just don't use React or SCSS. Stick to vanilla!

i’d rather use react, it has built-in XSS protection.

hello-smile6 commented 2 years ago

I know! @ScolderCreations Just don't use React or SCSS. Stick to vanilla!

i’d rather use react, it has built-in XSS protection.

It's called "use your brain". Use innerText and make your backend only accept what it needs to accept. Then you won't have problems. Also, there's no such thing as built-in XSS protection.

ScolderCreations commented 2 years ago

I know! @ScolderCreations Just don't use React or SCSS. Stick to vanilla!

i’d rather use react, it has built-in XSS protection.

It's called "use your brain". Use innerText and make your backend only accept what it needs to accept. Then you won't have problems. Also, there's no such thing as built-in XSS protection.

I prefer React, and that’s how it’ll be for now.

webdev03 commented 2 years ago

removed - not applicable

hello-smile6 commented 2 years ago

You mean light and dark mode? I know how to do this in tailwind (if you use it), in your configuration file, if you want it to be based on media dark/light mode query, use darkMode: media or if you want it as a toggle darkMode: class, then add the dark: prefix to the styles you want in dark mode. But if you want it to be a toggle, then add the dark class to the parent, all children will be in dark mode.

Or:

:root {
  color-scheme: dark;
}

webdev03 commented 2 years ago

You mean light and dark mode? I know how to do this in tailwind (if you use it), in your configuration file, if you want it to be based on media dark/light mode query, use darkMode: media or if you want it as a toggle darkMode: class, then add the dark: prefix to the styles you want in dark mode. But if you want it to be a toggle, then add the dark class to the parent, all children will be in dark mode.

Or:
:root {
  color-scheme: dark;
}

If you want here's the compatibility table:

hello-smile6 commented 2 years ago

You mean light and dark mode? I know how to do this in tailwind (if you use it), in your configuration file, if you want it to be based on media dark/light mode query, use darkMode: media or if you want it as a toggle darkMode: class, then add the dark: prefix to the styles you want in dark mode. But if you want it to be a toggle, then add the dark class to the parent, all children will be in dark mode.

Or:
:root {
  color-scheme: dark;
}
If you want here's the compatibility table:

Outdated. color-scheme works on Chromium OS.

Google Chrome   97.0.4692.91 (Official Build) (64-bit)
Revision    ca9e1861fd2528dc5e166cc74ee6cc059d2d50b8-refs/branch-heads/4692@{#1425}
Platform    14324.72.0 (Official Build) stable-channel octopus
Firmware Version    Google_Ampton.11297.288.0
ARC 8050615
JavaScript  V8 9.7.106.18
User Agent  Mozilla/5.0 (X11; CrOS x86_64 14324.72.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.91 Safari/537.36
Command Line    /opt/google/chrome/chrome --use-gl=egl --enable-native-gpu-memory-buffers --enable-webgl-image-chromium --enable-features=Pepper3DImageChromium,UmaStorageDimensions,ArcAdbSideloading,Crostini,CrostiniGpuSupport,SmartDim,OnDeviceSpeechRecognition --gpu-sandbox-failures-fatal=yes --video-capture-use-gpu-memory-buffer --enable-logging --log-level=1 --use-cras --enable-wayland-server --user-data-dir=/home/chronos --login-profile=user --has-chromeos-keyboard --enable-touchview --form-factor=CHROMEBOOK --guest-wallpaper-large=/usr/share/chromeos-assets/wallpaper/guest_large.jpg --guest-wallpaper-small=/usr/share/chromeos-assets/wallpaper/guest_small.jpg --child-wallpaper-large=/usr/share/chromeos-assets/wallpaper/child_large.jpg --child-wallpaper-small=/usr/share/chromeos-assets/wallpaper/child_small.jpg --default-wallpaper-large=/usr/share/chromeos-assets/wallpaper/default_large.jpg --default-wallpaper-small=/usr/share/chromeos-assets/wallpaper/default_small.jpg --device-help-content-id=apel --ozone-nnpalm-properties={} --arc-availability=officially-supported --enable-houdini --enable-houdini64 --enterprise-enrollment-initial-modulus=15 --enterprise-enrollment-modulus-limit=19 --enable-crashpad --ondevice_handwriting=use_rootfs --ondevice_document_scanner=use_rootfs --login-user=hello-smile6@dev.null --feature-flags=["allow-all-sites-to-initiate-mirroring@1","allow-disable-touchpad-haptic-feedback@1","allow-scroll-settings@1","allow-touchpad-haptic-click-settings@1","arc-input-overlay@1","arc-touch-mode-mouse@1","ash-bento-bar@1","ash-debug-shortcuts","ash-drag-window-to-new-desk@1","ash-enable-floating-window@1","ash-enable-unified-desktop","ash-overview-button@1","audio-url@1","autofill-enable-offer-notification-for-promo-codes@1","calendar-view@1","canvas-2d-layers","canvas-oop-rasterization@1","categorical-search@1","chrome-whats-new-in-main-menu-new-badge@1","chrome-whats-new-ui@1","chromeos-sharing-hub@1","consolidated-site-storage-controls@1","crosh-swa@1","crostini-bullseye-upgrade@1","crostini-container-install@2","crostini-disk-resizing@1","crostini-gpu-support@1","crostini-multi-container@1","crostini-reset-lxd-db@1","crostini-use-dlc@1","dark-light-mode@1","debug-packed-apps","deprecate-alt-based-six-pack@1","deprecate-alt-click@1","disable-quick-answers-v2-translation@1","display-alignment-assistance@1","edit-passwords-in-settings@1","enable-accessibility-live-caption@1","enable-component-updater-test-request","enable-container-queries@1","enable-cros-ime-emoji-suggest-addition@1","enable-cros-language-settings-ime-options-in-settings@1","enable-cros-on-device-grammar-check@1","enable-default-calculator-web-app@1","enable-desks-templates@1","enable-desktop-pwas-additional-windowing-controls@1","enable-desktop-pwas-app-icon-shortcuts-menu-ui@1","enable-desktop-pwas-elided-extensions-menu@1","enable-desktop-pwas-launch-handler@1","enable-desktop-pwas-link-capturing@1","enable-desktop-pwas-manifest-id@1","enable-desktop-pwas-notification-icon-and-title@1","enable-desktop-pwas-prefix-app-name-in-window-title@2","enable-desktop-pwas-remove-status-bar@1","enable-desktop-pwas-sub-apps@1","enable-desktop-pwas-web-bundles@1","enable-desktop-pwas-window-controls-overlay@1","enable-experimental-accessibility-switch-access-multistep-automation","enable-experimental-web-platform-features","enable-hardware_mirror-mode@1","enable-input-noise-cancellation-ui@1","enable-jxl@1","enable-lens-region-search@1","enable-magnifier-continuous-mouse-following-mode-setting@1","enable-notifications-revamp@1","enable-parallel-downloading@1","enable-prerender2@1","enable-reader-mode@2","enable-retail-coupons@1","enable-sharesheet-copy-to-clipboard@1","enable-shortcut-customization-app@1","enable-suggested-files@1","enable-suggested-local-files@1","enable-tls13-early-data@1","enable-touchscreen-calibration","enable-webassembly-baseline@1","enable-webassembly-tiering@1","enable-zero-state-app-reinstall-suggestions@1","exo-lock-notification@1","extension-workflow-justification@1","extensions-menu-access-control@1","file-handling-api@1","file-handling-icons@1","files-archivemount@1","files-filters-in-recents@1","files-trash@1","files-zip-unpack@1","focus-follows-cursor@1","force-show-continue-section@1","full-restore@1","global-media-controls-modern-ui@1","hardware-media-key-handling@1","help-app-background-page@1","help-app-launcher-search@1","https-only-mode-setting@1","intent-picker-pwa-persistence@1","isolate-origins","lacros-availability-ignore","lacros-stability@1","lacros-support@1","launcher-nudge-short-interval@1","launcher-nudge@1","list-all-display-modes@1","media-session-webrtc@1","nearby-sharing-arc@1","new-canvas-2d-api","ntp-chrome-cart-module@1","ntp-drive-module@1","ntp-modules-drag-and-drop@1","ntp-modules-redesigned@1","ntp-modules@1","ntp-photos-module@1","ntp-realbox-suggestion-answers@1","ntp-recipe-tasks-module@1","ntp-safe-browsing-module@1","omnibox-active-search-engines@1","omnibox-keyword-space-triggering-setting@1","omnibox-updated-connection-security-indicators@1","os-settings-app-notifications-page@1","page-content-annotations@1","page-info-about-this-site@1","performant-split-view-resizing@1","permission-chip@1","permission-quiet-chip@1","playback-speed-button@1","post-quantum-cecpq2@1","privacy-review@1","productivity-launcher-animation@1","productivity-launcher@1","productivity-reorder-apps@1","quick-settings-network-revamp@1","quick-settings-pwa-notifications@1","release-notes-notification-all-channels@1","scan-app-searchable-pdf@1","scheduler-configuration@2","scrollable-tabstrip-buttons@1","search-history-link@1","send-tab-to-self-manage-devices-link@1","send-tab-to-self-when-signed-in@1","share-context-menu@1","shared-highlighting-amp@1","shared-highlighting-v2@1","sharing-desktop-screenshots-edit@1","sharing-desktop-screenshots@1","show-metered-toggle@1","side-panel-border@1","side-panel-drag-and-drop@1","side-panel@1","side-search@1","spectre-v2-mitigation@1","tab-restore-sub-menus@1","tab-search-fuzzy-search@4","terminal-ssh@1","turn-off-streaming-media-caching-on-battery@1","upcoming-sharing-features@1","wallpaper-fullscreen-preview@1","wallpaper-webui@1","webui-branding-update@1","webui-dark-mode@1"] --feature-flags-origin-list={"isolate-origins":"https://github.com,https://google.com,https://turbowarp.org"} --vmodule=*arc/*=1,*/ash/wm/tablet_mode/*=1,existing_user_controller=1,wizard_controller=1,*/webui/chromeos/login/*=1,*/browser/ash/login/screens/*=1,*/browser/ash/full_restore/*=1,enrollment_screen_handler=1,*/browser/ash/login/enrollment/*=1,*/ui/ozone/*=1 --enable-features=Pepper3DImageChromium,UmaStorageDimensions,ArcAdbSideloading,Crostini,CrostiniGpuSupport,SmartDim,OnDeviceSpeechRecognition --flag-switches-begin --ash-debug-shortcuts --ash-enable-unified-desktop --canvas-2d-layers --crostini-container-install-version=bullseye --debug-packed-apps --component-updater=test-request --enable-experimental-accessibility-switch-access-multistep-automation --enable-experimental-web-platform-features --enable-touch-calibration-setting --isolate-origins=https://github.com,https://google.com,https://turbowarp.org --lacros-availability-ignore --lacros-stability=canary --new-canvas-2d-api --scheduler-configuration=performance --enable-features=Pepper3DImageChromium,UmaStorageDimensions,ArcAdbSideloading,Crostini,CrostiniGpuSupport,SmartDim,OnDeviceSpeechRecognition,AllowAllSitesToInitiateMirroring,AllowDisableTouchpadHapticFeedback,AllowScrollSettings,AllowTouchpadHapticClickSettings,ArcInputOverlay,ArcNearbySharing,ArcTouchModeMouse,AudioUrl,AutofillEnableOfferNotificationForPromoCodes,BentoBar,CSSContainerQueries,CalendarView,CanvasOopRasterization,CategoricalSearch,ChromeOSSharingHub,ChromeWhatsNewInMainMenuNewBadge,ChromeWhatsNewUI,ConsolidatedSiteStorageControls,CroshSWA,CrostiniBullseyeUpgrade,CrostiniDiskResizing,CrostiniMultiContainer,CrostiniResetLxdDb,CrostiniUseDlc,DarkLightMode,DefaultCalculatorWebApp,DeprecateAltBasedSixPack,DeprecateAltClick,DesksTemplates,DesktopPWAsAdditionalWindowingControls,DesktopPWAsAppIconShortcutsMenuUI,DesktopPWAsElidedExtensionsMenu,DesktopPWAsNotificationIconAndTitle,DesktopPWAsSubApps,DesktopPWAsWebBundles,DesktopScreenshots,DisableQuickAnswersV2Translation,DisplayAlignAssist,DragWindowToNewDesk,EditPasswordsInSettings,EmojiSuggestAddition,EnableAppReinstallZeroState,EnableHardwareMirrorMode,EnableInputNoiseCancellationUi,EnableSuggestedFiles,EnableSuggestedLocalFiles,EnableTLS13EarlyData,ExoLockNotification,ExtensionWorkflowJustification,ExtensionsMenuAccessControl,FileHandlingAPI,FileHandlingIcons,FilesArchivemount,FilesTrash,FilesZipUnpack,FiltersInRecents,FocusFollowsCursor,ForceShowContinueSection,FullRestore,GlobalMediaControlsModernUI,HardwareMediaKeyHandling,HelpAppBackgroundPage,HelpAppLauncherSearch,HttpsOnlyMode,ImeOptionsInSettings,IntentPickerPWAPersistence,JXL,LacrosSupport,LauncherAppSort,LauncherNudgeShortInterval,LensRegionSearch,ListAllDisplayModes,LiveCaption,MagnifierContinuousMouseFollowingModeSetting,MediaSessionWebRTC,MeteredShowToggle,NotificationsRefresh,NtpChromeCartModule,NtpDriveModule,NtpModules,NtpModulesDragAndDrop,NtpModulesRedesigned,NtpPhotosModule,NtpRealboxSuggestionAnswers,NtpRecipeTasksModule,NtpSafeBrowsingModule,OmniboxActiveSearchEngines,OmniboxKeywordSpaceTriggeringSetting,OmniboxUpdatedConnectionSecurityIndicators,OnDeviceGrammarCheck,OsSettingsAppNotificationsPage,OverviewButton,PageContentAnnotations,PageInfoAboutThisSite,ParallelDownloading,PerformantSplitViewResizing,PermissionChip,PermissionQuietChip,PlaybackSpeedButton,PostQuantumCECPQ2,Prerender2,PrivacyReview,ProductivityLauncher,ProductivityLauncherAnimation,QuickSettingsNetworkRevamp,QuickSettingsPWA,ReaderMode:discoverability/offer-in-settings,ReleaseNotesNotificationAllChannels,RemoveStatusBarInWebApps,RetailCoupons,ScanAppSearchablePdf,ScrollableTabStripButtons,SearchHistoryLink,SendTabToSelfManageDevicesLink,SendTabToSelfWhenSignedIn,ShareMenu,SharedHighlightingAmp,SharedHighlightingV2,SharesheetCopyToClipboard,SharingDesktopScreenshotsEdit,ShelfLauncherNudge,ShortcutCustomizationApp,SidePanel,SidePanelBorder,SidePanelDragAndDrop,SideSearch,SpectreVariant2Mitigation,TabRestoreSubMenus,TabSearchFuzzySearch:TabSearchSearchThreshold/0%2E8,TerminalSSH,TurnOffStreamingMediaCachingOnBattery,UpcomingSharingFeatures,WallpaperFullScreenPreview,WallpaperWebUI,WebAppEnableLaunchHandler,WebAppEnableLinkCapturing,WebAppEnableManifestId,WebAppWindowControlsOverlay,WebAssemblyBaseline,WebAssemblyTiering,WebUIBrandingUpdate,WebUIDarkMode,WindowControlMenu --disable-features=PrefixWebAppWindowsWithAppName --flag-switches-end --ui-compositor-memory-limit-when-visible-mb=512 --restore-last-session
Executable Path /opt/google/chrome/chrome
Profile Path    /home/chronos/user
Variations  313957be-ca7d8d80
3e7d7783-ca7d8d80
7e184ca7-33c3eba5
90a7075b-362044e7
a112f012-ca7d8d80
16b16054-377be55a
8e73c278-a79d803f
59b6f412-377be55a
60d4b352-377be55a
152bdf52-ca7d8d80
b3249ec4-377be55a
a9ef513c-377be55a
273268f8-c645bd26
6cb5e962-377be55a
a77166f2-ca7d8d80
6e08fc3e-ca7d8d80
481fc7e7-12ede6a2
eddd0d82-21e0edc7
f5a851ad-e25cd351
89a16501-ca7d8d80
87f33ad6-ece1b491
3095aa95-3f4a17df
7b330e2f-377be55a
1248751e-c28c5069
e799dcad-12ede6a2
a257327f-ca7d8d80
1bb6a450-5c977def
6cbcf5b7-b74ef851
6c5f69af-377be55a
deb1cb12-fefff3a
47bd2c48-35a6e1ab
51266b12-58e43939
76cbd0ec-ca7d8d80
47b5f350-377be55a
7c2504d0-ca7d8d80
ab544014-ca7d8d80
a2fd384c-5c0c03aa
76d3fd53-ca7d8d80
bf4029fe-364c5591
4e3ec83a-ca7d8d80
65570806-20f58b6f
e17bdae7-9c88f5c6
a2e38c9c-ca7d8d80
d051cdc0-ca7d8d80
dd8d67e-6edc92c7
f6f5c542-12ede6a2
8ebcf27b-804f4241
a582a1b8-ad75ce17
c9e4d4e1-f9a43703
fa659f2e-377be55a
da2d8531-ca7d8d80
e87da360-377be55a
6a5f15b-377be55a
1d606bb5-5da4c2ad
722b8030-8755f8d6
3042ad4b-f52d9efc
617ab254-7ceb8445
e4a357e9-ca7d8d80
b8014e4c-29075ce0
d9384a1d-ca7d8d80
2ba47366-ca7d8d80
248c3fbd-ca7d8d80
730a7fb7-ca7d8d80
d7a036b9-7ffdc21a
15eda298-ca7d8d80
8bccc03b-ca7d8d80
be47a367-ca7d8d80
ec50844b-ca7d8d80
551dab91-ca7d8d80
69d4ebd5-ca7d8d80
2b4e7fda-8c4db672
ea90e0df-28216808
d809cc5d-377be55a
727723f1-ca7d8d80
b75782da-f99f9399
8c8d8faf-1f8c5973
f8bcc1f6-457eec63
255dfea8-ca7d8d80
a083757a-5d7a8910
f7a3ec9-49a9fec5
ca5a2953-ca7d8d80
2df267c6-ca7d8d80
3487aa71-ca7d8d80
5fe247df-ca7d8d80
58231b68-ca7d8d80
ad46906e-d098a027
234de0a0-e6a83dae
d3566fbd-377be55a
4ea303a6-ecbb250e
fc7e4d22-88055aa6
2d5bcfa8-377be55a
3f92a30f-a4e98312
77e44b8e-377be55a
9af490f6-377be55a
ad143c8a-9a7cddc4
a8347de-29c39cfb
5c3a74ae-f7f4b8cf
fbe267b5-ca7d8d80
a8a03ccf-377be55a
5176c13e-972b4276
7760b5b2-ca7d8d80
eb084fc2-9c35b788
9dea8d36-377be55a
e8c68789-ca7d8d80
54410569-ca7d8d80
931c5f72-5c0c1f00
494d8760-52325d43
7b2873c2-b34ded13
3ac60855-486e2a9c
f48c01d3-2a0e5f33
63dcb6a3-5c63917a
e706e746-fd6d2f5a
f296190c-767e51a8
4442aae2-a5822863
f690cf64-6e597ede
ed1d377-e1cc0f14
75f0f0a0-6bdfffe7
e2b18481-a90023b1
e7e71889-4ad60575
b1ceb06f-d1372334
6ab03ba1-377be55a
de0fa677-ca7d8d80
2d3dfd19-ca7d8d80
762bb3b2-ca7d8d80
e1368496-377be55a
248e3a0-ca7d8d80
3b96a1d-ca7d8d80
595f5eb0-ca7d8d80
9e91ce29-ca7d8d80
3673692f-ca7d8d80
bef5c006-ca7d8d80
17b84626-377be55a
662773da-7bcd41ab
fb50494f-72cac062
547e761a-3f4a17df
c3859e82-ca7d8d80
a461b170-377be55a
def27776-ca7d8d80
733cb831-377be55a
6598898b-377be55a
b53f3ef9-1f8c5973

There's the info on the Chrome OS laptop I use most of the time. It has full support for color-scheme. (Yes, I have that many flags enabled, and I use hyperthreading. )

scratchbackup / scratchbackup.github.io

theme settings with scss #22