Docusaurus has a nice, minimal sun and moon for their light/dark mode button: https://docusaurus.io/
But our Docusaurus page automatically uses a toggle button that shows the moon emoji đ and the sun emoji đ. They're cute, but don't fit with our site's overall look.
I couldn't find specifics about this in the Docusaurus user docs or in their API docs. I went into the GitHub repo for Docusaurus and checked out their css files as well as their config.js file. I did the same for some other companies who use Docusaurus, but I can't find the code that generates the light/dark mode button.
Any thoughts?
With Docusarus 2.0.0-beta.17 switchConfig was deprecated.
As related PR says: colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or ColorModeToggle instead.
Related
Our company is addressing gaps in accessibility on the Native side of our app. We get a general diagnostic indicating lack of zooming on text on the Native app. The ticket looks like this:
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)
Zooming and scaling should not be disabled.(meta[name="viewport"]).Fix the following: user-scalable on <meta> tag disables zooming on mobile devices
We use react-native-web which allows for both web and native in one codebase. Looking at the top HTML file, I don't see anything indicating user-scalable is disabled.
In order to be able to use pinch gesture to zoom in on text, do I need to go through every text component and add a prop to enable this? Don't want to use a jack hammer for a nail but we might have to if this is what's required. I would think it would be automatic.
Your ticket seems to come from an automatic test, by axe-core : https://dequeuniversity.com/rules/axe/4.4/meta-viewport
Unlike what your ticket said, it's not a WCAG 1.4.4 failure but an accessibility best practice for the web.
If you don't have user-scalable in your HTML file, maybe the automatic test did not run correctly ?
Anyway, to manually check if your mobile app is WCAG 1.4.4 compliant, you have to increase the font size to 200% in the accessibility settings of your phone.
You absolutely do NOT need to go through every text component.
The error is accurate. You have disabled some resizing capabilities in your meta tags.
Just check the head of your document for a meta tag with the attribute name="viewport". You will probably find it has an attribute of content set to either "width=device-width, user-scalable=no" or "width=device-width, user-scalable=0". Reset the content attribute to "width=device-width, initial-scale=1". You should be all set.
I familiarized with Android development and started to read some information about React Native. And one of the problem which I faced with is that I can't see the screen layout.
In Android Studio, for example, I could see the design of my XML layout without running app. Maybe there are such instruments in React Native, but I didn't see them in WebStorm nor VSCode. Maybe I am wrong and they exist, so, can you help me to find them in such situation?
Some modules format the xml document in vscode,
but others have previewable tools.
XML TOOLS
Extension Settings
xmlTools.enableXmlTreeView: Enables the XML Tree View for XML
documents.
xmlTools.enableXmlTreeViewMetadata: Enables attribute and child
element counts in the XML Document view.
xmlTools.enableXmlTreeViewCursorSync: Enables auto-reveal of
elements in the XML Document view when a start tag is clicked in the
editor.
xmlTools.enforcePrettySelfClosingTagOnFormat: Ensures a space is
added before the forward slash at the end of a self-closing tag.
...
I also had the same problem where there is no layout view in VSCode like in Android Studio. My suggestion is to mock out your View containers with coloured boxes. This is an example of designing a screen's header, so I'm making sure the spacing and sizing is all good:
How can I include a popup context menu in my app, just like the ones DroneDeploy use?
What's the CSS, JS lib that you use???
I know how to do this using vanilla JavaScript, but I want it to look like yours, to keep the theme in tact!
I've looked at the source and can see you are using Angular CDK's OverlayModule to provide popups.
I'm not using Angular, so I'll have to just style the popup so it looks like you themes myself.
The doc is the best way to follow up in this case. There you can see what's possible or not. Did you see this point? Here you can follow a checklist to apply in your App and build App in Drone Deploy style. You'll need to follow another way to interact with users.
I create new project react native, then i installed #shoutem/ui , #shoutem/theme, #shoutem/animation to my project via nom install...!
But i have problem when try to find some way better to modify global theme shoutem.
I found theme.js inside folder node_module/shoutem/ui like picture below here!
So best way to modify all them of app is modify this theme.js file?
when i try to modify 1 content like View, Image follow tutorial at here:
https://github.com/shoutem/theme
my navigation bar got error like this picture:
So can u guys help me, suggest me best way to modify global theme default of shoutem?
Do modify theme.js or using something else?
And one more thing! When i try to builder app via https://builder.shoutem.com/ then pull-app using terminal!
I got project! But don't see anything code inside, only extension and so much info! Do not know what is true code when builder complete!
here is picture project when pull-app done!
And here is index file:
So how can i learn form that if only sort info inside index.js file :(
The file you should edit is in:
extensions/ExtensionName/app/theme/ThemeName.js
Where "ExtensionName" refers to the extension that has Screens which you are using in your app.
You should go through the Shoutem documentation on how to write a Theme.
It will show you:
how to create that file (ThemeName.js, your custom Theme)
how you can customize it
how you can use the Builder to manage details about it in Styles>Themes>Customize Theme
how you can add more details for the Builder to manage
When you initially create a Theme as the aforementioned documentation explains, it'll be a copy of the default Shoutem theme, so you'll have a fully functioning Theme right out the box, which you can edit to suit your wants and needs.
You can also check out the Shoutem documentation about the UI Toolkit to find out more info about Shoutem Components (including NavigationBar), Themes and Animations.
The reason I'm linking all this documentation is because the documentation covers all of the issues displayed here in a way that's much more detailed than I could provide in an answer here and the misconceptions and misunderstandings of the questioner can be resolved by self-education.
Edit as response to comment:
You have to use:
$ npm install --save #shoutem/theme
Inside your project directory.
You can follow read this documentation about Themes to better understand how to apply Theme styles to your own components.
If you want to edit specific components globally, you have to edit that component in:
node_modules/#shoutem/ui/components
Editing a file there will edit every iteration of the component throughout the app.
Now that Rally has changed the default UI for their ALM product, I have noticed that the UI components in my apps don't fit the same styling characteristics as the default UI elements. I think it would look a lot cleaner if I could use Ext's "Neptune" theme: http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#basic-panels
Is there a way I can use this theme by default? If it is hosted anywhere within Rally, I think it would be as easy as including the CSS file in the App.html, but I could be wrong.
2.0rc1 is built on Ext 4.1.1a, so I'm not sure if the neptune theme is included or not. You'll be happy to know that 2.0rc2 is hot off the presses though, and should incorporate most of the new look and feel.
https://rally1.rallydev.com/apps/2.0rc2/sdk.js
https://help.rallydev.com/apps/2.0rc2/doc/